计算属性和监听器
1.计算属性
1.1介绍
计算属性是自动监听依赖值的变化,从而动态返回内容。监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。它有以下几个特点:
- 数据可以进行逻辑处理,减少模板中计算逻辑
- 对计算属性中的数据进行监视
- 依赖固定的数据类型(响应式数据)
计算属性由两部分组成:get
和set
,分别用来获取计算属性和设置计算属性。默认只有get
,如果需要set
,要自己添加。另外set
设置属性,并不是直接修改计算属性,而是修改它的依赖:
1.2计算属性 vs 普通属性
可以像绑定普通属性一样在模板中绑定计算属性,但是它们在定义上有区别,即计算属性的属性值必须是一个函数:
1.3计算属性 vs 方法
两者最主要的区别:computed
是可以缓存的,methods
不能缓存;只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,就不会多次执行。网上有种说法就是方法可以传参,而计算属性不能,其实并不准确,计算属性可以通过闭包来实现传参;但是计算属性一旦传参就不能对结果进行缓存,这也就和方法好像就没有什么区别了,而使用计算属性的目的之一就是它会缓存数据!这或许就是为啥官网上没有提计算属性可以传参的原因吧。
闭包函数:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。
2.侦听属性
2.1介绍
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性watch。Watch中可以执行任何逻辑,如函数节流、Ajax异步获取数据,甚至操作 DOM(不建议)。
常规用法如下:
节流函数:在短时间多次触发某个函数的场景下,对执行函数进行节流,节省无效浪费。(具体做法:例如在输入框中输入内容进行查找,在预定的时间内多次改变搜索框内容时,只对最后一次输入的结果进行请求。)
2.2深度监听
监听器还可以监听一个对象的属性变化,除了上述监听器的写法,还有可以直接写一个函数。
使用 watch
来监听数据变化的时候除了常用到的 handler
回调,其实还有两个参数,它们是:Deep
、immediate
;
handle
:watch
中需要具体执行的方法deep
:需要监听的数据的深度,一般用来监听对象中某个属性的变化,,数组字符串一般不需要;immediate
:在选项参数中指定immediate: true
,将立即以表达式的当前值触发回调;
注意: 使用watch
时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate
属性。
2.3总结
普通的watch:
数组的watch:深拷贝
对象的watch:
对象的具体属性的watch:
2.4解决监听的新旧数据一样的问题
如果想要得到差异内容,可以结合计算属性、序列化、反序列化生成新的对象,来避免此问题 。
3.对比
3.1监测的对象不同
watch
:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作;computed
:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。
属性值:定义属性的特定的特征或参数;
依赖值:一个关系内部属性与属性之间的约束关系;
3.2是否可以执行异步任务
- 计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。
- 如果遇到异步任务,就交给侦听属性。
3.3适用场景
- 计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来的;
- 侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
3.4总之
computed
能做的,watch都能做,反之则不行- 能用
computed
的尽量用computed