vue中watch和computed的区别详解
更新时间：2023年11月21日 10:30:51 作者：前端开发小司机
这篇文章主要给大家介绍了关于vue中watch和computed区别的相关资料,computed和watch都是vue框架中的用于监听数据变化的属性,文中通过代码介绍的非常详细,需要的朋友可以参考下
今天给大家讲一下watch跟computed的区别,下面我们直接开始吧
- 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
- 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
- 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
- computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
- 使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
watch的实现
<body>
<div id="app">
姓： <input type="text" v-model=firstName> 名：
<input type="text" v-model=lastName> 姓名：
<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: 'z',
lastName: 's',
fullname: 'zs'
},
watch: {
firstName(newval) {
this.fullname = newval + this.lastName
},
lastName(newval) {
this.fullname = this.firstName + newval
}
}
})
</script> computed的实现
<body>
<div id="app">
姓： <input type="text" v-model=firstName> 名：
<input type="text" v-model=lastName> 姓名：
<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: 'z',
lastName: 's'
},
computed: {
fullname() {
return this.firstName + this.lastName
}
}
})
</script> watch与computed区别总结
computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器
最后
到此这篇关于vue中watch跟computed的区别详解的文章就介绍到这了,更多相关watch跟computed区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
相信大家之前都写过一些组件,尤其是这样的弹窗组件,这篇文章主要来和大家聊聊如何使用Vue手写一个对话框,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了vue之webpack -v报错解决方案总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue弹窗组件的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用Vue.js中的过滤器实现幂方求值的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
这篇文章主要介绍了vue3 中使用 jsx 开发,本文着重说一下在使用 .vue 文件和 .jsx 文件在使用语法上的差异，需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇Vue实现导航栏的显示开关控制，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了在Vue里如何把网页的数据导出到Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要和大家一起探索Vue.js component内容实现,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了vue3的api解读之ref和reactive详解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
最新评论