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(计算属性)的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
go-gin-vue3-elementPlus带参手动上传文件的案例代码
这篇文章主要介绍了go-gin-vue3-elementPlus带参手动上传文件的案例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11vue项目中使用lib-flexible解决移动端适配的问题解决
这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08vue3在table里使用elementUI的form表单验证的示例代码
这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12基于Vue sessionStorage实现保留搜索框搜索内容
这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06详解vuex中的this.$store.dispatch方法
这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法,才能在store存储成功,需要的朋友可以参考下2022-11-11基于Vue+element-ui 的Table二次封装的实现
这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07vue elementUI select下拉框如何设置默认值
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论