Vue项目中数据的深度监听或对象属性的监听实例


Posted in Javascript onJuly 17, 2020

众所周知,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项目中数据的深度监听或对象属性的监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
浅析JS运动
Dec 28 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
You might like
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
完美的php分页类
2017/10/24 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php实现文件上传基本验证
2020/03/04 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
vue.js的提示组件
2017/03/02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python实现修改文件内容的方法分析
2018/03/25 Python
使用Python实现分别输出每个数组
2019/12/06 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
应聘教师推荐信
2013/10/31 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
质量主管工作职责
2014/09/26 职场文书
部队2014年终工作总结
2014/11/27 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript