Vue 基础自查——watch、computed和methods的区别

  • A+
所属分类:Web前端
摘要

创建一个Vue实例时,可以传入一个选项对象这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但不限于data、methods、computed、watch等等


1 前言

创建一个Vue实例时,可以传入一个选项对象

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

这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但不限于datamethodscomputedwatch等等

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

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/[email protected]/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> 

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

事实上通过打印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文档-侦听器