Computed和watch

微信扫一扫,分享到朋友圈

Computed和watch

computed是计算属性,watch是侦听器

  • computed是计算属性,通过其他变量计算得来的另一个属性,

    • 如fullname在它所依赖的firstname和lastname两个变量变化时重新计算自己的值。
    • 另外,computed具有缓存。计算属性是基于他们的依赖进行缓存的,只有相关依赖发生改变时才会重新求值,意味着如果依赖没变,多次访问计算属性都会立即返回之前的计算结果,而不必每次都执行函数
  • watch是侦听器,侦听一个特定的值,当该值变化时执行特定函数。
data() {
return {
firstname: '空条',
lastname: '承太郎',
fullname2: '空条承太郎'
}
},
watch: {
lastname: function(val) {
this.fullname2 = this.firstname + ' ' + val
}
}
// this.lasttname = '徐伦'
// console.log(this.fullname2) // 空条徐伦
computed: {
fullname: function(val) {
return this.firstname + ' ' + this.lastname
}
} // 空条承太郎

总结:

1、也就是computed是关联多个变量的,只要其中一个变量值改变,都会触发函数;watch则只依赖一个变量,每次只能对一个变量进行监控。

2、最重要的一点是:watch是监听data里定义的值,而computed的计算属性只能在computed内,不能在data中定义,否则会报错(重复定义),因为computed作为计算属性定义变量并返回对应的结果给这个变量,变量不可被重复定义和赋值。

3、①:computed中使用箭头函数的话,会导致this指向的不是vueComponent(因为箭头函数没有自己的this,而是和上一层作用域共享this,computed的上一层作用域可能就没有了,所以this是undefined)

②:使用function() 形式就可以解决,this指向vueComponent

③:使用对象的形式,get()、set()也都指向vueComponent (例:fullname: { get() {return this.firstname + ‘ ‘ + this.lastname}})

疫情后,你会买房吗?

上一篇

苏宁申请“J-10%”商标,目前尚在审查中

下一篇

你也可能喜欢

Computed和watch

长按储存图像,分享给朋友