文章目录
- 一、计算属性
- 1. 计算属性定义
- 2. computed 比较 methods
- 3. 计算属性完整写法
- 二、监听器
- 1. 普通监听
- 2. 添加额外配置项
一、计算属性
1. 计算属性定义
概念:基于现有的数据,计算出来的新属性,依赖的数据变化,自动重新计算。
计算属性需在 computed 中进行声明,computed 与 data 同级,一个计算属性对应一个函数,我们将计算结果直接返回,外部使用计算属性的时候,把它当做普通属性使用就可以,直接写函数名来使用,不要写括号!
<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 并没有输入完,没必要时刻监听每一个字母的变化,这会导致服务器的压力很大。
解决办法是,增加防抖措施,先等一等,延迟一会再执行,如果一段时间内用户没有再输入,这时候再去执行。
<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 方法,无需触发监听事件就可以执行一次。