计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。它有以下几个特点:
数据可以进行逻辑处理,减少模板中计算逻辑。
对计算属性中的数据进行监视
依赖固定的数据类型(响应式数据)
计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。另外set设置属性,并不是直接修改计算属性,而是修改它的依赖。
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { //this.fullName = newValue 这种写法会报错 var names = newValue.split(' ') this.firstName = names[0]//对它的依赖进行赋值 this.lastName = names[names.length - 1] } } }
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
可以像绑定普通属性一样在模板中绑定计算属性,在定义上有区别:计算属性的属性值必须是一个函数。
data:{ //普通属性 msg:'浪里行舟', }, computed:{ //计算属性 msg2:function(){ //该函数必须有返回值,用来获取属性,称为get函数 return '浪里行舟'; }, reverseMsg:function(){ //可以包含逻辑处理操作,同时reverseMsg依赖于msg,一旦msg发生变化,reverseMsg也会跟着变化 return this.msg.split(' ').reverse().join(' '); } }
两者最主要的区别:computed 是可以缓存的,methods 不能缓存;只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。网上有种说法就是方法可以传参,而计算属性不能,其实并不准确,计算属性可以通过闭包来实现传参:
:data="closure(item, itemName, blablaParams)" computed: { closure () { return function (a, b, c) { /** do something */ return data } } }
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性watch。watch中可以执行任何逻辑,如函数节流,Ajax异步获取数据,甚至操作 DOM(不建议)。
watch属性
{{ $data }}
使用 watch 来监听数据变化的时候除了常用到 handler 回调,其实其还有两个参数,便是:
deep 设置为 true 用于监听对象内部值的变化
immediate 设置为 true 将立即以表达式的当前值触发回调
以上代码我们修改了 obj 对象中 a 属性的值,我们可以触发其 watch 中的 handler 回调输出新的对象,而如果不加 deep: true,我们只能监听 obj 的改变,并不会触发回调。同时我们也添加了 immediate: true 配置,其会立即以 obj 的当前值触发回调。 我们再看一个实际工作中常遇到的场景:组件创建的时候我们获取一次列表的数据,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表。
created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } }
有没有办法优化一下呢?
watch: { searchInputValue:{ handler: 'fetchPostList', immediate: true } }
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。
从上面流程图中,我们可以看出它们之间的区别:
watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。
computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会重新计算。
除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性。watch也可以检测computed属性。
接下去我们看个用watch来实现防抖的例子:直到用户停止输入超过1秒后,才更新视图。
{{ fullName }}firstName:lastName: