Vue 中的 computed 和 watch 的区别详解
computed
computed 看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算。
1）下面是一个比较经典简单的案例
<template>
<div class="hello">
{{fullName}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: '飞',
lastName: "旋"
}
},
props: {
msg: String
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>注意
在 Vue 的 template 模板内（{{}}）是可以写一些简单的js表达式的很便利，如上直接计算 {{this.firstName + ' ' + this.lastName}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。
应用场景
适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为 computed
watch
watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。
<template>
<div class="hello">
{{fullName}}
<button @click="setNameFun">click</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '飞',
lastName: "旋"
}
},
props: {
msg: String
},
methods: {
setNameFun() {
this.firstName = "大";
this.lastName = "熊"
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName(newval,oldval) {
console.log(newval)
console.log(oldval)
}
}
}
</script>总结
- 1.如果一个数据依赖于其他数据，那么把这个数据设计为 computed
- 2.如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化
到此这篇关于Vue 中的 computed 和 watch 的区别详解的文章就介绍到这了,更多相关Vue computed 和 watch 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了vue中如何动态拼接this后面的变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue中el-table前端如何导出excel数据表格,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-07-07
下面小编就为大家带来一篇Vue利用路由钩子token过期后跳转到登录页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
为了解决加载组件中出现的报错、超时、状态展示等问题,可以使用 Vue 3 提供的异步组件（Async Components）,它对于加载过程做了更细致的控制,这篇文章主要介绍了Vue 3 进阶用法之异步组件,需要的朋友可以参考下2024-04-04
vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要为大家详细介绍了Vue.js仿Metronic高级表格的静态设计，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue(element ui)使用websocket及心跳检测方式
这篇文章主要介绍了vue(element ui)使用websocket及心跳检测方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要个给大家介绍了在vue3中使用defineModel进行父子组件中的双向绑定,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
最新评论