computed和watch的区别(VUE)

363 阅读1分钟

computed

计算属性中的属性不需要在data中定义,而且必须有return

data(){
	return{
    	firstname:"Bababa",
        lastname:"Lone"
    }
}
computehd(){
	fullname(){
    	return this.firstname+this.lastname
    }
}

计算属性顾名思义就是通过其他变量来计算得来的另一个属性,fullName 在它所依赖firstName和lastName这两个变量变化时重新计算自己的值。
tips:**计算属性具有缓存,计算属性是基于它们的依赖进行缓存的。**计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问fullName计算属性都会立即返回之前的计算结果,而不必再次执行函数。 即:computed对于其中变量的依赖时多个的,在它的函数中使用了多个this.xxx,只要其中一个发生了变化都会触发这个函数

watch

监听器watch中的值需要在data中定义,且函数有参数,newval和oldval

data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
},
watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

侦听器 watch 是侦听一个特定的值,当该值变化时执行特定的函数。watch的依赖是单个的,它每次只可以对一个变量进行监控

本期内容为本人个人理解,可能有误,后续将改进