关于Vue的 watch、computed和methods的区别总结
发布时间：2021-11-07 16:17:12 所属栏目：教程 来源：互联网
导读：目录 1 前言2 基础用法2.1 methods 方法2.2 computed 计算属性2.3 watch 侦听器3 三者的区别3.1 方法 VS 计算属性 3.2 计算属性 VS 侦听器 1 前言 创建一个Vue实例时，可以传入一个选项对象 const vm = new Vue({ data: { msg: hello }， computed: {}, metho
|
目录 1 前言2 基础用法2.1 methods 方法2.2 computed 计算属性2.3 watch 侦听器3 三者的区别3.1 方法 VS 计算属性 3.2 计算属性 VS 侦听器 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属性也会更新 （编辑：站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
