关于Vue的 watch、computed和methods的区别汇总
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的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解swiper在vue中的应用(以3.0为例），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现登录时图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了socket io与vue-cli的结合使用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了JavaScript优选七个用于vue开发库，借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式，平常收集一些JavaScript库介绍，在遇到需要的时候可以信手拈来2023-02-02
这篇文章主要介绍了html中创建并调用vue组件的几种方法汇总，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
Vue Element-UI中el-table实现单选的示例代码
在element-ui中是为我们准备好了可直接使用的单选与多选属性的,本文主要介绍了Vue Element-UI中el-table实现单选的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue中动态select的使用方法,结合实例形式分析了vue.js使用动态select创建下拉菜单相关实现技巧与操作注意事项,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍 Vue3组件传参的方式,包括父子组件、跨层级组件、兄弟组件的传参,如父子组件通过属性绑定和自定义事件双向传参,跨层级组件可利用 Provide/Inject 机制和 Pinia 状态管理,兄弟组件可通过父组件中转或 mitt 库直接传参,需要的朋友可以参考下2025-01-01
最新评论