Vue文档地址链接:
conputed: cn.vuejs.org/v2/api/#com…
watch: cn.vuejs.org/v2/api/#wat…
computed计算属性
-
类型:{ [key: string]: Function | { get: Function, set: Function } }
-
详细:
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。
//data添加name和age属性
new Vue{
data:{
name:'frank',
age:'24'
},
computed:{ //计算出一个name+age的属性
displayUsers: {
get(){ //get()和set()函数给对象加一个伪属性
return this.name + this.age
}
}
},
template: `
<div>
{{displayUsers}}
</div>
`,
}
watch侦听
-
类型:{ [key: string]: string | Function | Object | Array }
-
详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。
//当数据发生变化时会执行一个函数
const vm = new Vue{
data:{
n:0
new:[]
}
watch;{
a:function(value,oldValue){
console.log(value.oldValue)
}
// deep:true表示该回调在任何侦听对象的propety改变时调用,无论该嵌套有多深
b:{
handler:function(value,oldValue){console.log(value.oldValue)}
deep:true
}
// immediate表示该回调在侦听开始就立即执行
c:{
handler:function(value,oldValue){console.log(value.oldValue)}
immediate:true
}
}
}
vm.n=1 // new:1,old:0
选项
- deep
为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
- immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调: