計算屬性和監聽屬性

<div id="root">
    <label>姓：</label><input v-model="firstName" type="text">
    <label>名：</label><input v-model="lastName" type="text">
    <p>‘您輸入的姓名是：{{Name}}</p>
</div>
<script>
    new Vue(
        {
            el: ‘#root
 
‘,
            data: {
                firstName: ‘‘,
                lastName: ‘‘
            },
            computed:　　　　　　//計算屬性
                {
                    Name: function () {
                        return this.firstName + this.lastName;
                    }
                }
　　　　　　　watch:{　　　　　　　　//監聽屬性
　　　　　　　　　　　　firstName:function()
　　　　　　　　　　　　{
　　　　　　　　　　　　　　...
　　　　　　　　　　　　}
　　　　　　　　　　}
        }
    )
 
</script>

computed計算屬性，當參與計算的data沒有發生變化的時候，會使用上一次計算的緩存值，只有當參與計算的變量發生變化時，才回去重新計算。性能比較高

watch監聽屬性，每當監聽的值發生變化時就回去執行方法

v-if、v-show

<div id="root" >
    <div v-if="show">Hello World</div>
<button @click="handleClick">toggle</button>
</div>
<script>
    new Vue(
        {
            el: 
 
‘#root‘,
            data: {
                show: ‘Hello World!‘    //變量為truly 真值即可，不一定非要true
            },
            methods:{
                handleClick:function()
                {
                    this.show=!this.show;
                }
            }
        }
    )
</script>

通過dom來看看兩者的區別：

　-->原始的DOM節點

　-->v-if隱藏的DOM節點　　　　　　　-->v-show隱藏的DOM節點

不難看出，v-if會刪除和重新創建掛載節點。而v-show僅僅是通過display=none來隱藏元素。應用場景可以根據兩者的特性來取舍。

v-for

<div id="root">
    <ul >
        <li v-for="(item,index) in arrCity" :key="index">{{item.name}}:{{item.age}}</li>
    </ul></div>
<script>
    new Vue(
        {
            el: ‘#root‘,
            data: {
                arrCity:[{name:‘張三‘,age:20},{name:‘李四‘,age:21},{name:‘王五‘,age:32}]
            }
        }
    )
</script>

v-for 指令需要以 item in arrCity 形式的特殊語法， arrCity 是源數據數組並且 item 是數組元素叠代的別名,v-for 可以綁定數據到數組來渲染一個列表。

:補充知識

不只是vue，react中在執行列表渲染時也會要求給每個組件添加上key這個屬性。key的值不能相同，用index作為key的值也存在一定風險。

key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。

虛擬DOM的Diff算法：

vue和react都實現了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的Diff算法。

vue和react的虛擬DOM的Diff算法大致相同，其核心是基於兩個簡單的假設：

1. 兩個相同的組件產生類似的DOM結構，不同的組件產生不同的DOM結構。

2. 同一層級的一組節點，他們可以通過唯一的id進行區分。

基於以上這兩點假設，使得虛擬DOM的Diff算法的復雜度從O(n^3)降到了O(n)。

這裏我們借用React’s diff algorithm中的一張圖來簡單說明一下：

當頁面的數據發生變化時，Diff算法只會比較同一層級的節點：

如果節點類型不同，直接幹掉前面的節點，再創建並插入新的節點，不會再比較這個節點以後的子節點了。

如果節點類型相同，則會重新設置該節點的屬性，從而實現節點的更新。

當某一層有很多相同的節點時，也就是列表節點時，Diff算法的更新過程默認情況下也是遵循以上原則。

比如一下這個情況：

我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的：

即把C更新成F，D更新成C，E更新成D，最後再插入E，是不是很沒有效率？

所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

Vue.js 學習（二）