Vue 计算属性和监听器

文章目录

一、计算属性
- [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 方法，无需触发监听事件就可以执行一次。