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 或 组件实例对象。
到此这篇关于watch(监视属性)和computed(计算属性)的区别的文章就介绍到这了,更多相关watch(监视属性)和computed(计算属性)的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！