移動端 | Vue.js對比微信小程序基礎語法

（1）vue 自定義組件與父組件的通信，props：[abb],可以看成自組建的一個自定義屬性

（2）vue 模版語法{{}} 只能是在DOM中插入，<div>{{acc}}</div>, 綁定屬性的話應v-bind：id="abb" 不需要{{}};
而小程序可以<image src="{{url}}" /><div wx:for="{{arr}}" wx:for-item="item" wx:for-index="index wx:key="index"></div>
（3）計算屬性 computed:{} VS 方法 methods:{}
計算屬性是基于他們的依賴（響應式依賴）進行緩存的，只有以來發生改變才會重新求值，如果以來不變，多次訪問會立即返回之前的計算結果，而不執行函數；而方法：每次重新訪問/渲染時，方法總會在此執行；
（4）vue的 watch：{}, 偵聽 data 中的狀態發生變化時，執行的操作；
使用場景： 當需要在數據變化時，執行異步或者開銷較大的操作時，使用watch
eg：
data:{abb: ''}
watch: {
abb: function (newvalue, oldvalue) {

}
}
（5）class 與 style的綁定
1、 vue 為 v-bind:class="" 做了增強
對象語法:
data: {
classObject: {
booleanb: true,
booleanc: false
}
}
v-bind:class="{classa: booleanb, 'classb': booleanc}" -> class="classa"
v-bind:class="classObject" -> class="classa"
數組語法：
data: {
isActive: false,
activeClass: 'active',
errorClass: 'text-danger'
}
v-bind:class="[activeClass, errorClass]" -> <div class="active text-danger"></div>
v-bind:class="[isActive ? activeClass : ''], errorClass" -> class="text-danger"
v-bind:class="[{classa: booleada}, classb]"
2、v-bind:style=""
data: {
activeColor: 'red',
fontSize: 30
}
v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}"
v-bind:style="[baseStyles, overridingStyles]" // 將多個樣式對象綁定到同一個元素上
（6）v-if="abb" // v-if 時惰性的，如果開始為false，則不會渲染；每次切換內部都銷毀重建；v-for優先級比v-if高
v-if="abb === 'uiui"
<template v-if="abb"></template>
v-show="" // 始終都會渲染到DOM！ 只是切換 display 屬性；不支持《template》 不支持v-else
（7）v-for=""
小程序 wx:for="{{arr}}" wx:for-item="item" wx:for-index="index" wx:key="index"
微信 v-for="(item, index) in items" :key="item" item in items 的特殊語法； items - 源數據數組。 item - 數組元素迭代的別名
微信 <li v-for=“(value, key, index) in object” ></li> v-for 通過對象的屬性來迭代

(8) 數組更新檢測
「變異方法：會改拜年原始數組」
var abb = [1,2,3,4,5]
unshift()前邊添加 push() 后邊添加
--------------------------------------------
shift()前邊刪減 pop() 后邊刪減

sort() 排序
reverse() 顛倒
splice(index, howmany, item1, item, ..... itemX)
從數組中刪除、添加項目, 且改變原來的數組；返回被刪除的項；
index 開刀位置；
howmany 往后切幾個；
item。。 往里添加幾個
「非變異方法： 不會改變原始數組，但是總會返回一個新的數組；」
filter()
concat()
slice()
「注意：」
由于JS的限制，vue 不能檢測到以下數組的變動：
1、當使用索引，直接設置一個項時； vm.items[indexOFitem] = newValue
2、修改數組的長度時， vm.items.lenght= newLength
舉個例子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的
為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：
Vue.set(vm.items, indexOfitem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：
wm.$set(vm.items, indexOfitem, newValue)
為了解決第二個問題：
vm.items.splice(newLength)
（9）對象更改檢測 注意事項
* 由于JS 的限制，vue不能檢測到對象屬性 的添加或者刪除；
舉例：data: {a:1} vm.b = 2 // 不是響應式的
解決：
Vue.set(object, key, value)
vm.$set(object, key, value)
* 如果想為已有對象賦予多個新屬性，比如使用Object.assign() 或者 _.exetnd() 在這種情況下，你應該用兩個對象的屬性，創建一個新對象，所以想添加新的響應式屬性，不要像這樣
舉例：
data: {
userProfile: {
name: 'Anika'
}
}
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
而要這樣：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})