vue2.0的基本特性

本文目前總結的特性以下
1.偵聽屬性和計算屬性
2.class的綁定
3.條件渲染時的注意事項
4.v-if和v-for同時使用的注意事項
5.插槽
6.ref,父組件調用子組件的另外一種方式
7.<keep-alive>標籤

---

偵聽屬性和計算屬性

計算屬性computed
假設有A、B兩個變量,B的值依賴於A,B=A的平方

<p>A的值：{{A}}</p>
<p>A的平方:{{B}}</p>
//B的值依賴於A，當A發生改變時B也會改變
computed:{
    B(){
        //這個方法在A發生改變時會觸發,返回值傳給B
        return A*A
    }
}

當計算很簡單的時候,能夠直接使用{{A*A}}來代替計算屬性。
但是當計算變得邏輯變得複雜時,若是嵌套在template的表達式並不適用於這種方法，並且這樣會使代碼的可讀性變差，難以維護
並且使用計算屬性是有緩存的,只有當A發生改變時,纔會再次觸發

watch偵聽屬性
watch的功能computed相似,watch的方法在監聽的屬性改變時觸發

watch:{
  A(){
    this.B = A*A;
  }
}

---

class的動態修改

當一個元素的樣式須要根據數據來動態改變時，使用:class屬性
<div :class="{類名:變量}"></div>，類名是否存在取決於變量值是否爲真

當元素有多個樣式時：
<div :class="['類1',{'類名2':變量2}]">

類名也能夠用計算屬性來監聽：
isEnoug爲true,class="cartLeast unEmpty" 不然class="cartLeast"
<div :class="classObj"></div>
computed:{
classObj(){
let classArr = ['cartLeast'];

if(this.isEnough){
  classArr.push('unEmpty');
}
return classArr;

}
}

在引用組件的時候增長class,這是組件child的類名有a,b兩個
<template><div class="a"></div></template>
<child class="b"></child>

---

條件渲染時的注意事項

vue爲了高性能渲染,通常會複用已渲染過的標籤。
假若有一個登陸框，根據選擇的登陸方式切換input，一個是手機登陸，一個是郵箱登陸。由於vue會複用原來已有的input，因此當你切換到郵箱登陸時，input裏還會保存有手機登陸時的內容，這顯然是不符合條件的。
經過在input上添加key能夠區別元素

<div class="" v-if="isSeen">
  <input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
  <input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
  toggle
</div>
data:{
isSeen:true
}

---

當同時使用v-for和v-if的注意事項

v-for的優先級是高於v-if的,當只須要渲染知足一些特色條件的元素時，是頗有效的
可是當須要所有渲染時，把v-if放在外面

<div v-if="{{a}}"><div v-for="item in list"></div></div>