「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战」
在vue的项目中,我们时常需要对data的改变做出处理,这时候就需要用到watch和computed这两个属性,既然都是数值改变触发改变的属性,他们之间又有什么异同呢?分别要在哪些场景下使用呢?今天给大家简单说下我的理解,希望有所帮助。。。
Vue中的computed
computed 基础用法
computed 是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。
computed设计的初衷是为了使模板中的逻辑运算更简单, 比如在Vue模板中有很多复杂的数据计算的话, 我们可以把该计算逻辑放入到computed中去计算。
get用法
data: {
firstName: 'Liu',
lastName: 'lu'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值
get和set用法
data: {
firstName: 'Liu',
lastName: 'lu'
},
computed: {
fullName:{
get(){//回调函数 当需要读取当前属性值时执行,根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val){//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
//val就是fullName的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}
- computed内部的函数名称可以随意编写
- computed内部的函数必须通过return的方式将结果进行返回,最好不要在内部进行赋值操作
- 虽然computed内部是以函数的方式进行编写,但是在调用的时候并不是一个函数,所以不需要加()
- 只要函数内部所依赖的属性发生了改变,那么这个函数就会自己调用
- 如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果
computed 应用场景
-
适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。
-
如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。
Vue中的watch
watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。 Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。
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应用场景
当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。
watch 和 computed的区别
相同点:他们两者都是观察页面数据变化的。
不同点:computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。
computed 常用于值的计算,如简化tempalte里面{{}}
计算和处理props或$emit
的传值,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数。
watch常用来观察动作,听props
,$emit
或本组件的值执行异步操作,页面重新渲染时值不变化也会执行。
computed 和 watch 的使用场景并不一样,computed 的话是通过几个数据的变化,来影响一个数据, 而 watch,则是可以一个数据的变化,去影响多个数据。