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 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
解决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调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
javascript 写类方式之七
2009/07/05 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python实用代码片段收集贴
2015/06/03 Python
Python语法快速入门指南
2015/10/12 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python中Numpy mat的使用详解
2019/05/24 Python
np.dot()函数的用法详解
2020/01/17 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python如何编写win程序
2020/06/08 Python
Delphi CS笔试题
2014/01/04 面试题
会计出纳员的自我评价
2014/01/15 职场文书
狼和鹿教学反思
2014/02/05 职场文书
高中生的自我评价
2014/03/04 职场文书
意向书范文
2014/03/31 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android