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文档-侦听器
公众号【前端嘛】