watch监听用法（watch(监视属性)和computed(计算属性)的区别）
前言
watch 和 computed 是vue实例对象中的两个重要属性 ，watch是监视属性 ，用来监视vue实例对象上属性和方法的变化 ，computed被称为计算属性 ，可以将data对象中的属性进行计算得到新的属性；由于watch属性监视data对象中的属性变化时 ，也能拿到data对象中的属性进行计算；因此产生疑问既然两者都能实现同一功能 ，两者有什么区别呢？下面将以此疑问为突破点结合实例详述两者的区别；
watch 实现案例
<!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName" /> <br /><br /> 名：<input type="text" v-model="lastName" /> <br /><br /> 全名：<span>{{fullName}}</span> <br /><br /> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示 。 const vm = new Vue({ el: #root, data: { firstName: 张, lastName: 三, fullName: 张-三, }, watch: { firstName(val) { setTimeout(() => { this.fullName = val + - + this.lastName }, 1000) }, lastName(val) { setTimeout(() => { this.fullName = this.firstName + - + val }, 1000) }, }, }) </script>以上为watch通过监视data中的firstName和lastName的变化改变fullName
computed 实现案例
<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName" /> <br /><br /> 名：<input type="text" v-model="lastName" /> <br /><br /> 全名：<span>{{fullName}}</span> <br /><br /> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示 。 const vm = new Vue({ el: #root, data: { firstName: 张, lastName: 三, }, computed: { fullName() { return this.firstName + - + this.lastName }, }, })以上为通过computed计算属性实现fullName和firstName 、lastName产生联系；
对比
通过对比可以看出 ，watch和computed都能实现相同的功能 ，但是首先第一眼看去 ，computed计算属性实现的案例明显代码更少更精简；但是watch能将fullName的变化改成异步；因此对watch和computed属性做出如下总结：
1 、computed能完成的功能watch也能完成
2 、watch能完成的功能computed不一定能完成 ，比如watch可以进行异步操作；
📣注意：
1.所被Vue管理的函数 ，最好写成普通函数 ，这样this的指向才是vm 或 组件实例对象 。
2.所有不被Vue所管理的函数（定时器的回调函数 、ajax的回调函数等 、Promise的回调函数） ，最好写成箭头函数 ，这样this的指向才是vm 或 组件实例对象 。写在最后
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！