vue.js 计算属性与$watch的区别?-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

vue.js 计算属性与$watch的区别?

[导读]:通俗来讲,既能用computed实现又可以用watch监听来实现的功能,推荐用computed,重点在于computed的缓存功能 computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变...
  通俗来讲,既能用computed实现又可以用watch监听来实现的功能,推荐用computed,重点在于computed的缓存功能
  computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;
  watch监听的是已经在data中定义的变量,当该变量变化时,会触发watch中的方法;
  设计模式不同
  Computed是一种声明式的解决方案,我们只需要告诉vue某个属性的构成方法,就可以一劳永逸的放手不管了。
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}
  Watch是一种命令式的解决方案,我们需要自己处理vue某个属性依赖要素的变化,根据变化重置这个属性。
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }

  }

  因此,个人十分享受Computed,甚至不惜使用vue-async-computed来实现异步下的Computed。
asyncComputed: {
async someCalculation () {
 const x = await someAsycFunction()
    const y = await anotherAsyncFunction()
    return x + y
  }
}
  响应行为不同
  Computed的响应是deep的响应,即在计算过程中用到的对象的属性发生变化,是可以被监听到的。

	
computed: {
  fullName: function () {
    // this.name 的属性 firstName/lastName 变化时 fullName 会响应。
    return this.name.firstName + ' ' + this.name.lastName
  }
}
  然而,一旦Computed没有在模板中使用,vue是不会为我们计算Computed内容的。
  Watch的响应默认为非deep的响应,即观测的是某个对象的字面量。当然,我们可以为Watch设置deep响应类型或是监听其属性。

	
watch: {
  name: function () {
    // this.name 的属性 firstName/lastName 变化时不会触发。
    // TODO
  }
}
  两者的使用应当是互补的:
  在获得较为简单的属性,且用于展示时,用computed可以简化书写。
  在进行比较复杂的异步操作,或有比较明显的副作用时,用watch逻辑更清晰。
  注:个人觉得依赖较多的仍应该用computed或async-computed。
  另外,需要注意的是,watch的计算早于同依赖的computed。

 

 

 

 

 

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ