1、watch监听
方法：
action(nv, ov){
this.msg = nv
}
监听的几种方法
name: function(nv, ov){
this.msg = nv
}
name(nv, ov){
this.msg = nv
}
'name'(nv, ov){
this.msg = nv
}
'name': 'action'
obj: {
handler(nv, ov){
this.msg = nv
},
deep: true // 深度监听，值为false时，对象中的属性值变化，不会执行handler方法
}
2、计算属性
计算属性中使用data中的数据一旦有变化，计算属性就会更新
total( ){
if(this.shop.count > 5){
return this.shop.price * this.shop.count
}else{
return this.shop.price * this.shop.count + 5
}
}
计算属性传参数
num( ){
return function(i){
return this.num.toFixed(i)
}
}
3、$set、$delete
{{obj.age}}
obj: {id:1, name: 'xx'}
add(){
this.obj.age = 18 // 不会触发视图更新
this.$set(this.obj, 'age', 18) // 会触发视图更新
delete this.obj.name // 不会触发视图更新
this.$delete(this.obj, 'name') // 会触发视图更新
}
4、过滤器
文本格式化，可以在表达式{{ }}和v-bind中使用
{{3.1415926 | number}}
{{3.1415926 | num(2)}}
filters: {
number(data){
return data.toFixed(2)
},
num(data,n){
return data.toFixed(n)
}
}
计算属性和watch监听的区别
watch监听：监听具体的属性或对象，当监听的对象发生变化，执行对应的函数
computer计算属性：函数中所用到data中的数据发生变化，都会执行对应函数
计算属性和方法的区别
计算属性有缓存，多次用到同一个计算属性，计算属性只会执行一次
方法没有缓存，多次用到同一个方法，方法会执行多次