vue 中 computed 和 watch 的区别
2024-01-08 04:22:15
在Vue中,computed和watch都是用于监听数据的变化,并且根据变化做出相应的反应。
computed是一个计算属性,它会根据依赖的数据的变化自动计算得出一个新的值,并且具有缓存的特性。当依赖的数据发生变化时,computed属性会重新计算,并且只有在依赖的数据发生变化时才会重新计算,否则会直接返回之前计算的结果。computed属性适用于依赖较少、计算量较大的情况。
以下是一个使用computed的例子:
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
})
在上面的例子中,fullName是一个computed属性,它依赖于firstName和lastName这两个data属性。当firstName或者lastName发生变化时,fullName会自动重新计算得出新的结果。
watch则是一个侦听器,它会监听指定的数据的变化,并且在数据发生变化时执行相应的回调函数。watch适用于需要在数据变化时执行异步或者复杂的操作的情况。
以下是一个使用watch的例子:
new Vue({
data: {
name: 'John Doe'
},
watch: {
name: function (newVal, oldVal) {
console.log('name changed from ' + oldVal + ' to ' + newVal);
}
}
})
在上面的例子中,watch会监听name属性的变化。当name发生变化时,watch会执行相应的回调函数,打印出变化前后的值。
总结一下,computed是根据依赖的数据自动计算得出一个新的值,并且具有缓存的特性;而watch则是监听指定的数据的变化,并在数据发生变化时执行相应的操作。
文章来源:https://blog.csdn.net/m0_71966801/article/details/135435868
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!