Vue项目中数据的深度监听或对象属性的监听实例
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。根据vue的文档,不难发现,使用数据的深度监听来达到这一效果。具体实现如下:
1 2 3 4 5 6 7 8 9 10 11 | 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负责,不需要我们的参与。
所以如果在面临选择是使用计算属性还是监视属性的情况下,优先选择计算属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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)
监听属性其实质是一次异步回调,希望读者在想到使用监听属性之前多考虑能否采用计算属性来取代监听属性
对比同一个功能实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //计算属性 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项目中数据的深度监听或对象属性的监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue3-print-nb实现页面打印(含分页打印)示例代码
大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下2024-01-01vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route
this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧2023-10-10vue3+elementplus基于el-table-v2封装公用table组件详细代码
在日常开发后端管理系统项目中,用于展示数据多会用表格进行展示,下面这篇文章主要给大家介绍了关于vue3+elementplus基于el-table-v2封装公用table组件的相关资料,需要的朋友可以参考下2023-12-12
最新评论