文章目录
- 一、计算属性
-
- [1. 计算属性定义](#1. 计算属性定义)
- [2. computed 比较 methods](#2. computed 比较 methods)
- [3. 计算属性完整写法](#3. 计算属性完整写法)
- 二、监听器
-
- [1. 普通监听](#1. 普通监听)
- [2. 添加额外配置项](#2. 添加额外配置项)
一、计算属性
1. 计算属性定义
概念：基于现有的数据，计算出来的新属性，依赖的数据变化，自动重新计算。
计算属性需在 computed 中进行声明，computed 与 data 同级，一个计算属性对应一个函数，我们将计算结果直接返回，外部使用计算属性的时候，把它当做普通属性使用就可以，直接写函数名来使用，不要写括号！
html
<div id = "app">
<p>{{totalCount}}</p>
</div>
<script src="vue.js"></script>
<script>
//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
const app = new Vue({
el: '#app',
data: {
list: [
{id: 1, num: 1},
{id: 2, num: 7},
{id: 3, num: 3}
]
},
computed: {
totalCount() {
let total = this.list.reduce((sum, item) => sum + item.num, 0)
return total
}
}
})
</script>reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，此处的 0 代表起始的 sum 值为 0！
2. computed 比较 methods
① computed 计算属性
作用 ：封装了一段对于数据的处理，求得一个结果。
语法：作为属性直接使用，this.计算属性，{{ 计算属性 }}
② methods 方法
作用 ：给实例提供一个方法，调用以处理业务逻辑。
语法：作为方法需要调用，this.方法名()，{{ 方法名() }}，@事件名="方法名"。
methods 也可以用来处理数据，但是 computed 给我们提供了很好的缓存特性，计算属性会对计算出来的结果进行缓存，再次使用会直接读取缓存，依赖项变化了，会自动重新计算并再次缓存，所以如果要处理数据，我们还是优先选择 computed，可以提升性能。
3. 计算属性完整写法
计算属性默认的简写，只能读取访问，不能修改，如果要修改，就需要写计算属性完整的写法。
① 计算属性被查询时，执行 get 方法，有缓存，会将返回值作为求值的结果；
② 计算属性被修改时，执行 set 方法，需要修改的值会自动传递给 set 方法的形参。
二、监听器
作用 ：监视数据变化，执行一些业务逻辑或异步操作。
语法 ：
监听方法会在数据变化时，触发执行，我们一般只用新值 newValue 就可以了！
1. 普通监听
我们现在有一个问题就是，words 每输入一个字母，watch 都会监听一次并做出反应，其实一个完整的 words 并没有输入完，没必要时刻监听每一个字母的变化，这会导致服务器的压力很大。
解决办法是，增加防抖措施，先等一等，延迟一会再执行，如果一段时间内用户没有再输入，这时候再去执行。
c
<script>
//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
const app = new Vue({
el: '#app',
data: {
timer: '',
obj: {
words: ''
}
},
watch: {
//防抖，延迟执行
'obj.words' (newValue) {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
console.log('变化了', newValue)
}, 500)
}
}
})
</script>
定义 setTimeout，让打印操作延迟 500 ms 再执行，如果超出 500 ms 用户还没有操作，就直接执行 console.log('变化了', newValue)，setTimeout 返回的结果是延时器的 id，我们这里用 timer 接收，如果用户在 500 ms 内再次输入了数据，那么就根据 timer 把前面的延时器清空掉，重新开始计时，只要用户在不停地输入，那么我们后台的代码就一直延时执行，减少不必要的中间数据，极大提高效率。
其实这里的 timer 不需要在 data 里面定义，跟页面渲染无关的数据，直接使用 this.数据，即可绑定！
2. 添加额外配置项
① deep：true ，对复杂类型深度监视，可以同时监控多个数据，这些数据以对象的形式封装在 data 中，watch 中内置具体的处理方法，方法名必须为 handler，value 为发生变动后的对象。
② immediate：true，初始化立刻执行一次 handler 方法，无需触发监听事件就可以执行一次。
