移动端 | 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'
})