乐趣区

关于vue.js:Vue-基础自查watchcomputed和methods的区别

jiezi

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 文档 - 侦听器

公众号【前端嘛】

退出移动版