详解Vue中的computed和watch
前言
在Vue当中，watch和computed都可以实现监听的效果，本文主要是围绕watch和computed这两个属性来进行深入的讲解，讲解内容包括它们的原理、实现方式、各自优劣以及区别。
原理
computed
概念：通过对某个属性值进行一系列计算，让该属性值为一个新的值。在计算过程中，可以调用多个其他属性值用于计算。
computed又称计算属性，它主要作用就是用于在Vue当中监听某个属性的变化。举个例子来分别演示没有computed和用了computed的vue实例。
需求：让两个数字相加求解。
没有用computed：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的库文件-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
a:<input type="number" v-model="a"><br>
b:<input type="number" v-model="b"><br>
<button @click="btn">计算</button>
<div>相加等于：{{ c }}</div>
</div>
<!--2.创建Vue的实例对象-->
<script>
//创建Vue的实例
const vm = new Vue({
// el属性是固定写法。
// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
el: "#app",
data: {
a: '',
b: '',
c: null
},
methods: {
btn() {
this.c = parseFloat(this.a) + parseFloat(this.b)
}
}
})
</script>
</body>
</html>
在上述代码中，我们可以发现，求解是用了一个按钮实现，首先我们创建了Vue实例，然后创建三个变量a，b，c，c是结果，a，b是两个数字，用v-model进行数据绑定后，输入点击按钮后就能出现结果。那么如果使用计算属性computed，也可以用另一种方式实现相同的效果。计算操作在计算属性中进行实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的库文件-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
a:<input type="number" v-model="a"><br>
b:<input type="number" v-model="b"><br>
<div>结果：{{ c }}</div>
</div>
<!--2.创建Vue的实例对象-->
<script>
//创建Vue的实例
const vm = new Vue({
// el属性是固定写法。
// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
el: "#app",
data: {
a: '',
b: '',
},
computed:{
c(){
return parseFloat(this.a)+parseFloat(this.b);
}
}
})
</script>
</body>
</html>
在上述代码中，我们可以看到，计算属性代替了按钮实现了相同的计算功能。那么同时我们发现，计算属性要放在computed节点下才生效，而节点下的计算属性，语法格式和定义method方法的语法格式相同，这个计算属性，会实时监听它的属性值是否发生改变，如果发生改变就会立即缓存，不需要任何人为操作。它在初始化时就会进行缓存，那么在上述代码中，它的初始值就为NaN，NaN展开就为Not a Number，中文叫非数。输入a和b的数字后，就可以看到立刻发生变化。
computed特点
- 计算属性都放在computed节点下。
- 定义方式和方法相同。
- 只要该计算属性的依赖属性发生改变，它就会重新计算并进行视图更新以及计算属性缓存。
- 所有的计算属性都有缓存机制，当初始化后即开始了第一次计算属性缓存，而看到的值，实际是从缓存中拿到的。
- 惰性执行：如果不调用这个计算属性，但是依赖项改变了，那属性会被标记为dirty,但是它计算，只有调用了且被标记为dirty了，它才会进行计算缓存和更新操作。
- 不允许执行异步操作
computed有几种创建方式
两种，一种函数式，一种对象式。
function a(){} || a:{get(){},set(){}}
应用
- 当一个属性频繁的受其他多个属性影响时可以被应用。
Watch
概念： 监听器，是Vue实例的一个属性，是用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
大白话就是，监听某个属性值是否变化，如果该属性值发生改变，则做一系列与改变有关的操作。
实例：输入姓，输入名，得到姓名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的库文件-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
姓:<input type="text" v-model="x"><br>
名:<input type="text" v-model="m"><br>
<div>结果：{{ xm }}</div>
</div>
<!--2.创建Vue的实例对象-->
<script>
//创建Vue的实例
const vm = new Vue({
// el属性是固定写法。
// 表示当前的VM实例要控制页面上的哪上区域，收接的是一个选择器。
el: "#app",
data: {
x: '李',
m: '华',
xm:''
},
watch:{
x:{
handler(oldValue,newValue){
this.xm=newValue+this.m
}
},
m:{
handler(oldValue,newValue){
this.xm=this.x+newValue;
}
}
}
})
</script>
</body>
</html>
首先我们分析这个需求，如果把这个需求放在计算属性中，我们发现只需要一个计算属性result就可以实现，而监听需要做两个，因为我们要监听的是姓和名两个属性值，这和计算属性和判断依赖项是否改变是不同的，这也决定了它们适用的方向不同。
Watch有几种创建方式
五种：函数、对象、数组、函数名
常用的还是第一种：
watch:{
监听属性名:{
handler(监听前值,监听后值){
代码逻辑
}
}
}
Watch主要内容
handler：回调函数，也就是监听到变化后执行的函数。
deep：确认是否深入监听，假设有个深层对象，当它很多层内的数据发生变化，是否依旧能监听到且执行回调函数，如果想监听到，可以开启深度监听。
immediate：默认是false，false则初始化页面后不调用监听回调函数，true则第一次进入页面就调用回调函数且绑定值。
Watch特性
- 默认初次进入页面不调监听函数（immediate：true解决）
- 一个监听函数只能监听一个属性值
- 默认当对象属性值发生改变不调监听（deep：true解决）
- 允许执行异步操作，比如调用一个API。
应用场景
- 一次只能监听一个数据，并处理数据相关的代码逻辑。
- 百度联想词
- 复杂的业务逻辑或调用异步API，如AJAX。
computed和Watch区别
下面简称computed为c，Watch为w。
- c发生改变是因为依赖项改变，所以它能监听几个属性取决于它有几个依赖属性，所以它能监听一个或多个属性，w一次只能监听一个属性。
- 因为c的值是被同步计算出来的，先判断依赖是否改变，改变则计算，计算后缓存，缓存后显示，所以c不能异步操作，w能异步。
- c要判断依赖项是否改变，改变后需要计算才能缓存，而watch监听到改变就立刻执行相关操作。
- c可以类似data直接访问到，watch不能。
- 所以说计算多个属性时可以用computed，监听一个属性或处理异步或逻辑较难业务可以用watch。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
