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

2024-09-30 16:59:00

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

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

Vue中的methods、watch、computed的区别

看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑. computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行计算属性是基于依赖进行缓
关于Vue的 watch、computed和methods的区别汇总

目录 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: {} }) 这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但
深入浅析Vue.js中 computed和methods不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m
Vue中computed与methods的区别详解

Vue中computed可以用来简单的拼接需要展示的数据 computed and methods 拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用一个简单的实例 computed只在初始化时被调用 computed只在初始化时被调用 methods会在数据变化时被调用, 即使变动的数据与自身无关测试源码 <!DOCTYPE html> &l
Vue 中的 computed 和 watch 的区别详解

目录 computed 注意应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful
分析 Vue 中的 computed 和 watch 的区别

目录一.computed介绍 1.1.get 和 set 用法 1.2.计算属性缓存二.watch介绍三.两者区别 3.1.对于 computed 3.2.对于 watch 四.应用场景一.computed介绍 computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用. //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:fu
Vue 2.0学习笔记之Vue中的computed属性

Vue中的 computed 属性称为计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
vue.js的computed,filter,get,set的用法及区别详解

1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa
深入浅析Vue中的 computed 和 watch

computed 计算属性:通过属性计算得来的属性计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值 a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="
如何理解Vue中computed和watch的区别

概述我们在 Vue 项目中多多少少都会有用到 computed 和 watch,这两个看似都能实现对数据的监听,但还是有区别.所以以下通过一个小栗子来理解一下这两者的区别. computed 计算属性计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值,这个新值只会根据已知值的变化而变化,简言之:这个属性依赖其他属性,由其他属性计算而来的. <p>姓名:{{ fullName }}</p> ... ... data: { firstNam
vue Watch和Computed的使用总结

01. 监听器watch (1)作用 watch:用于监听data中的数据变化,只在被监听的属性值发生变化时执行 export default { data() { return { number: 1 } }, watch:{ // 普通监听方法,这里表示监听data中的 number属性 // 第一个参数表示改变后的新值,第二个参数表示改变前的旧值 number(newVal,oldVal){ console.log(newVal); console.log(oldVal); } } } (