Vue项目中数据的深度监听或对象属性的监听实例
众所周知，vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。根据vue的文档，不难发现，使用数据的深度监听来达到这一效果。具体实现如下：
watch: {
evlist: {
handler(val, oldVal) {
this.isTeam = val.projectParty;
this.pjtid = val.pjtid;
this.isFinish = val.projectSelfValue;
},
deep: true
},
},
这其中，evlist是一个对象，val监听到变化后的值，oldVal是变化前的值。
补充知识：vue中的监听属性和计算属性
计算属性（computed）
vue中的计算属性是非常棒的东西，它兼具了逻辑和变量。可以让我们不再关注视图层，值关注代码的逻辑即可。至于数据如何展现则只需由Vue负责，不需要我们的参与。
所以如果在面临选择是使用计算属性还是监视属性的情况下，优先选择计算属性
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
export default {
data(){
return {
message: 'Hello',
}
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');
}
}
可以看到我们使用的计算属性替代了模板内表达式的功能。所以，对于任何复杂逻辑，你都应当使用计算属性。而且计算属性让我们只关注于逻辑实现，至于后期的数据在界面上的表示形式则直接由Vue.js负责，读者可以看到我们并没有直接参与页面展示上面来
此外，传统的直接通过表达式求值的方式需要我们自行取值，而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。也就是说，计算属性会直接从缓存拿值，并伴随着值的改变而改变。而传统的直接通过表达式求值的方式需要我们在拿值之前需要执行一次getter()函数
监听属性（watch）
监听属性其实质是一次异步回调，希望读者在想到使用监听属性之前多考虑能否采用计算属性来取代监听属性
对比同一个功能实现
//计算属性
computed: {
fullName2: function () {
return this.firstName + ' ' + this.lastName
}
}
//监听属性
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
可以看到计算属性的代码更加简洁也更加高效，而且就实现效果而言，明显计算属性会更好一点
以上这篇Vue项目中数据的深度监听或对象属性的监听实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了elementUI Tree 树形控件的官方使用文档，用清晰的层级结构展示信息，可展开或折叠。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
大家都知道，Vuejs的 CLI工具 是基于 webpack 来实现的，所以在项目打包后，会生成的文件会很大。 主要原因是 webpack 将我们所有文件都打包成一个js文件，即使再小的项目，打包之后文件都会变得很大。 下面讲讲最近我遇到的相同问题。2020-02-02
这篇文章主要介绍了Vue实现单行删除与批量删除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
Vue-router 中hash模式和history模式的区别
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了element-ui中el-table不显示数据的问题解决,这是最近在做列表首页时遇到的一个问题,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了Pinia进阶setup函数式写法封装到企业项目实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下2023-07-07
Vue2.0+ElementUI+PageHelper实现的表格分页功能
ElementUI也是一套很不错的组件库，对于我们经常用到的表格、表单、时间日期选择器等常用组件都有着很好的封装和接口。这篇文章主要介绍了Vue2.0+ElementUI+PageHelper实现的表格分页,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue 组件基础知识的相关资料，帮助大家更好的理解和使用vue的组件，感兴趣的朋友可以了解下2021-01-01
最新评论