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

网络编程 2024/11/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

Vue,数据,深度监听,对象属性

标签：

Vue,数据,深度监听,对象属性

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无Vue项目中数据的深度监听或对象属性的监听实例的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

Vue,数据,深度监听,对象属性

在vue中对数组值变化的监听与重新响应渲染操作

解决vue无法侦听数组及对象属性的变化问题

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接