移動端 | 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的綁定
一、 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]"
二、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 不能檢測到如下數組的變更：
一、當使用索引，直接設置一個項時； vm.items[indexOFitem] = newValue
二、修改數組的長度時， 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'
})