这篇文章主要介绍了Vue2.x版本中computed和watch怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue2.x版本中computed和watch怎么使用文章都会有所收获,下面我们一起来看看吧
这篇文章主要介绍了Vue2.x版本中computed和watch怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue2.x版本中computed和watch怎么使用文章都会有所收获,下面我们一起来看看吧。
两者的区别,继续通过代码实现的方式具体去了解
html
<li>最开始的value值:{{ name }}</li><li>computed计算后的值:{{ computedName }}</li><li>watch修改后的值:{{ watchName }}<input type="text" v-model="watchName" /></li><li><button @click="handleNumber">修改名字</button></li>
JS
data() {return {name: "zhangsan",watchName: "张三",};},watch: {watchName(newVal, oldVal) {console.log("旧的值---->", newVal);console.log("新的值---->", oldVal);console.log("watch下所有的状态都会监听this.name---->", this.name);console.log("watch下所有的状态都会监听this.computedName---->",this.computedName);this.watchName = newVal;},},computed: {computedName: function (currentThis) {console.log("和计算属性无关的状态发生更改时,不会执行,只要依赖的状态发生更改,缓存才会更新",currentThis);return `依赖于name,:${this.name}`;},},methods: {handleNumber() {this.name = "lisi";},},
依赖值: computed依赖于所使用的状态,类似在data中声明的name,
而watch中监听的值不依赖于某个值,只要组件状态发生更改,监听的值就实时获取最新值,
computed的实现使用的是getter和setter获取值,属于同步操作。
使用方法:
computed最后需要进行return处理返回值,并且可以使用更深层次的getter和setter,具体参考 vue2.x版详解computed和watch的使用
watch除了callback回调函数外,还有两个属性值为布尔值的属性,用于首次绑定immediate,以及对对象的深度监听deep
两者相同点就是可以通过方法参数获取新值,结合其他状态处理相关的业务
在官方文档中,除了在组件中使用的watch外,官方文档中,还有对于示例中watch的介绍
官方文档提示:
注意:在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
vm.$watch('a.b.c', function (newVal, oldVal) { // 做点什么})// 函数vm.$watch( function () { // 表达式 `this.a + this.b` 每次得出一个不同的结果时 // 处理函数都会被调用。 // 这就像监听一个未被定义的计算属性 return this.a + this.b }, function (newVal, oldVal) { // 做点什么 })
需要注意的是,如果使用vm.$watch,那么使用unwatch有助于我们取消对某个状态的监听,减少不必要的监听和交互开销
var unwatch = vm.$watch('a', cb)// 之后取消观察unwatch()
关于“vue2.x版本中computed和watch怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue2.x版本中computed和watch怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: vue2.x版本中computed和watch怎么使用
本文链接: https://www.lsjlt.com/news/342529.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0