Vue的computed计算属性和watch的异同

tech2025-04-24 10

computed和watch的异同

不同点：

触发条件不同 computed计算属性会依赖于它的data属性，只要是依赖的data属性有变动的话，则自定义重新调用计算属性执行一次 watch则是在监控data属性值发生变化的时候，其余会自动调用watch回调函数执行速度不同 computed计算属性的值是从缓存中获取的，而不是重新编译执行一次，因而其性能要高一些，尤其是在data属性没有发生变化的时候，而重复调用computed回调函数使用方式不同 computed计算属性的回调函数方法可以直接在页面中通过插值表达式{{}}来获取，此时我们不需要在data数据域中再定义一个与方法名相同的属性 watch的方法名必须是data数据域中存在的，否则无法使用

相同点：

都可以实现通过监控data数据域中属性值的变化来触发相应的回调函数，进而实现业务逻辑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <div id="app"> <input type="text" v-model="lastName" placeholder="姓"> <input type="text" v-model="firstName" placeholder="名"> <h2>拼接：{{fullName}}</h2> </div> </body> <script src="../../../js/vue/vue/2.0/vue.js"></script> <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script> <script type="application/javascript"> new Vue({ el:'#app' ,data:{ firstName:'' ,lastName:'' } ,computed:{ fullName:function () { return this.lastName + '·' + this.firstName; } } }); </script> </html>

computed回调函数域中的回调函数方法可以在插值表达式{{}}中直接获取返回结果而无需在data数据域中定义相关的属性，这一点相较于watch中而言使用起来也更方便些。

最新回复(0)