0
点赞
收藏
分享

微信扫一扫

watch和computed的区别

官方文档vue-计算属性

computed——>计算属性

官方对于计算属性的解释是:

对于任何复杂逻辑,你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

个人理解:计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。

例子:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

总结:

1.变量不在 data中定义,而是定义在computed中,有返回值。函数名直接在页面模板中渲染,不加小括号 。

2.根据传入的变量的变化 进行结果的更新。

3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。

watch——>侦听器

只监听单个数据

Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

watch和computed对比

watch是在执行一些复杂的操作时候使用的。更直观的例子,我们可以看下官方对computed和watch的对比:

以下代码是针对fullname这个属性的监听:

watch和computed的区别_数据

使用watch

watch和computed的区别_sed_02

使用computed

watch和computed的区别_缓存_03

可以明显的看出,在执行简单的计算操作时,computed比watch更简洁易读。

总结:

1.计算属性变量在computed中定义,属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的

变量,当定义的值发生变化时,执行相对应的函数。

3.如果一个数据依赖于其他数据的简易计算处理的,那么使用computed比较合适。
4.如果需要在某个数据变化时做一些事情,使用watch来观察这个数据变化

举报

相关推荐

0 条评论