watch(监视属性)和computed(计算属性)的区别
2023-03-31 10:40:41 时间
前言
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 或 组件实例对象。
写在最后
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假