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.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- Vue.js中 computed 和 methods 的区别
官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- watch、computed、methods的区别
1. `computed`属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.主要当作属性来使用,要return出去一个值:2. `methods`方法表示一个具体的操作,主要书写业务逻辑:3. ...
- Vue 基础自查——条件渲染和列表渲染
v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...
- Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
- vue.js中的computed和watch的区别
1.computed在调用时不需要加(),watch是不需要调用的2.computed如果属性没有发生改变时会从缓存中读取值,watch当属性发生改变时会接收到2个值:一个为新值,一个为旧值3.com ...
随机推荐
- Jmeter系列(24)- 常用逻辑控制器(3) | 模块控制器Module Controller
模块控制器(Module Controller) 作用 可以理解为引用.调用执行的意思,调用范围为testplan树下任意的逻辑控制器,模块控制器除外 点开testplan树,需要引用哪个逻辑控制器选 ...
- Java项目常用的统一返回跟统一异常处理
先创建一个crud的项目. controller调用service调用mapper 以下以简单代码代替 controller @GetMapping("/getUserById") ...
- Elasticsearch、XXLJob以及最近的学习记录
Elasticsearch.XXLJob以及最近的学习记录 前言 在这九月的最后一周,来总结一下最近的学习记录,主要是对于Elasticsearch.XXLjob的初步学习,想着还是多记录点,以便后面 ...
- 鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的 | 百篇博客分析OpenHarmony源码 | v20.04
百篇博客系列篇.本篇为: v20.xx 鸿蒙内核源码分析(用栈方式篇) | 程序运行场地谁提供的 | 51.c.h .o 精读内核源码就绕不过汇编语言,鸿蒙内核有6个汇编文件,读不懂它们就真的很难理解 ...
- 吴恩达--神经网络-week1-hw4
# Ref: https://blog.csdn.net/u013733326/article/details/79767169 import numpy as np import testCases ...
- Docker-Java限制cpu和内存及浅析源码解决docker磁盘挂载失效问题
需求 之前工作流的运行都是用的docker-java提供的api拉起的docker容器直接跑服务,但是最新线上的新业务资源消耗较大,单个容器如果不加控制,CPU和内存都会拉满,导致服务器莫名宕机事故的 ...
- C++学习 3 结构体
结构体基本概念: 结构体属于用户自定义的数据类型,允许用户存储不同的数据类型: 结构体定义和使用: 语法:struct 结构体名 { 结构体成员列表 }: 通过结构体创建变量名的方式有三种: ...
- iostream 操作符
iostream 操作符 Input/output manipulators - cppreference.com
- 用C++实现的数独解题程序 SudokuSolver 2.4 及实例分析
SudokuSolver 2.4 程序实现 本次版本实现了 用C++实现的数独解题程序 SudokuSolver 2.3 及实例分析 里发现的第三个不完全收缩 grp 算法 thirdGreenWor ...
- 脚本注入1(boolean&&get)
现在,我们回到之前,练习脚本支持的布尔盲注(get型). 布尔盲注的应用场景是查询成功和失败时回显不同,且存在注入点的地方. 这里以Less-8为例: 发现查询成功时,会显示:失败则无回显. 同时发现 ...