欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

关于Vue的 watch、computed和methods的区别汇总

程序员文章站 2022-03-05 17:16:06
目录1 前言2 基础用法2.1 methods 方法2.2 computed 计算属性2.3 watch 侦听器3 三者的区别3.1 方法 vs 计算属性3.2 计算属性 vs 侦听器1 前言创建一个...

1 前言

创建一个vue实例时，可以传入一个选项对象

const vm = new vue({
  data: {
    msg: 'hello'
  }，
  computed: {},
  methods: {},
  watch: {}
})

这个选项对象可以指定非常多的选项（或者说属性），和数据相关的选项有：包括但不限于data、methods、computed、watch等等

其中methods、computed、watch都能通过函数来对数据进行处理或作出响应，这三者有差异，但很容易混淆

2 基础用法

用script引入vue.js，下面的代码都在如下html中运行

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>methods</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    
  </body>
  <script>
    
  </script>
</html>

2.1 methods 方法

methods选项中的定义的函数称为方法，在vue实例化的过程中，methods对象中的方法将被混入到vue实例中，成为vue实例的方法。可以直接通过vue实例访问这些方法

<body>
  <div id="example">
    <!-- 显示：a:1 -->
    <p>a:{{ plus() }}</p> 
  </div>
</body>
<script>
  const vm = new vue({
    el: "#example",
    data: {
      a: 0,
    },
    methods: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // 查看控制台输出的vm，可以看到它有一个方法是：plus: ƒ ()，⚠️注意是方法
  console.log(vm.plus()); // 直接通过vm实例访问方法，输出：1
</script>

需要主动调用methods中的函数才能执行，a的值改变并不能让页面中的<p>a:{{plus()}}</a>跟着更新

2.2 computed 计算属性

computed选项中定义的函数称为计算属性，在vue实例化的过程中，computed对象中的计算属性将被混入到vue实例中，成为vue实例的同名属性。

<body>
  <div id="example">
    <!-- 显示：a:1 -->
    <p>a:{{ plus }}</p>
  </div>
</body>
<script>
  const vm = new vue({
    el: "#example",
    data: {
      a: 0,
    },
    computed: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // // 查看控制台输出的vm，可以看到它有一个属性是：plus:1，⚠️注意是属性
</script>

乍一看好像computed和methods功能一样，确实在这个例子中二者展示效果相同

事实上通过打印vm实例以及访问方式已经体现出二者的一个不同之处：

  • methods中的函数会成为vm的方法
  • 而computed中的函数经过计算后会成为vm的同名属性，属性值为函数的计算结果，即返回值

另外，和方法不同的是，计算属性能够跟着它依赖的数据变化而进行响应式更新，即a变化时，plus属性也会更新

2.3 watch 侦听器

watch选项中的键值对称为侦听器或者说监听属性/监听属性，键是需要观察的表达式，值是对应的回调函数（值还可以是其他形式，此处不展开）

在vue实例化的过程中，这些需要侦听的变量会被记录下来，当这些变量发生变化的时候，对应的回调函数就会执行

<body>
  <div id="example">
    <!-- 显示：a:1 -->
    <p>a:{{ a }}</p>
  </div>
</body>
<script>
  const vm = new vue({
    el: "#example",
    data: {
      a: 0,
    },
    watch: {
      a: function () {
        console.log("a发生了变化"); // 因为a的值变了，回调函数执行
        console.log(this.a);
      },
    },
  });
  vm.a = 1; // 这里直接手动改变a的值
</script>

3 三者的区别

3.1 方法 vs 计算属性

除了2.2中已经提到的两点区别之外，还有最重要的区别是：

  • 计算属性是基于它们的响应式依赖进行缓存的，即上文中的a发生变化时，才会重新触发求值函数，否则多次调用都会从缓存中求值，这对开销较大的计算来说非常有用，可以避免重复计算
  • 方法则是调用时总会重新执行

下面用表格的形式对这两者的区别进行总结：

methods computed
vue实例化后成为vm实例的什么 成为vm实例上的方法 成为vm实例上的属性
能否根据依赖的数据进行响应式更新 不能，需要主动调用方法 能
能否缓存 不能，每次调用重新执行 能，依赖的数据不变，会从缓存中取值

3.2 计算属性 vs 侦听器

  • 首先最明显的区别，侦听器的命名方式是固定的，想要监听谁，就和谁同名。而方法和计算属性可任意命名
  • 其次，侦听器无法主动进行访问，而另外两者都能主动访问
  • 计算属性和侦听器的使用场景：

如果某个值需要通过一个或多个数据计算得到，就使用计算属性

侦听属性主要是监听某个值的变化，然后进行需要的逻辑处理；此外当需要在数据变化时执行异步或开销较大的操作时，侦听属性就比较有用，具体例子可见

到此这篇关于关于vue的 watch、computed和methods的区别汇总的文章就介绍到这了,更多相关vue的 watch、computed和methods的区别内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

相关标签： Vue watch、computed methods

上一篇： Linux—shell脚本化工具模板

下一篇： MySQL实战窗口函数SQL分析班级学生考试成绩及生活消费

推荐阅读