以前觉得这块挺简单,但是后来在项目中使用的时候,感觉特别的蹩脚,主要体现在这些方面:
- 计算属性不能设置一个固定的初始值,只能借助其他变量,为什么这样说了,看下它的 get 方法:
computed: {
// 计算属性的 getter
reversedMessage(){
return this.message
}
}
- 计算属性的 set 方法和 get 方法,在什么情况下触发.
- 读取计算属性的值, 默认调用方法getter方法
- 当数据改变时即给计算属性赋值时，默认调用set方法
注意:
1.只有computed里的值在模板里使用,更改了getter里使用的变量，才会触发computed的更新.
2.若是改变其 get 方法中绑定的表达式,这时只会触发其 get 方法, 只有对本计算属性进行赋值才会,触发 set 方法.
3. set 中的 newValue 代表着就是该数组的值
4.若给计算属性数组 push('5') 添加元素,你会发现只触发了 get 方法, 且等同于 给其 get 中绑定的数据添加新元素.
computed: {
fullName: {
// getter
get(){
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
-
计算属性的作用和意义
使用的利弊:
当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护.
即计算属性是使用处理一些简单的数据绑定逻辑的,对于一些比较复杂的逻辑建议放到方法中进行处理,方便后期的维护.computed主要的作用:
-
分离逻辑(模板和数据分离) ???
-
缓存值
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，页面每渲染一次就重新执行,所以每次都会重新计算。
-
双向绑定(getter,setter)
-
计算属性还可以依赖多个vue实例的数据，只要其中任一个数据变化，计算属性就会重新执行，视图也会更新。适用于比较费时的数据计算
-
当使用组件时，计算属性也经常用来 动态传递props。
-
"动态传递 Props"的理解:
如果你想要根据某个prop的值动态地计算并传递一个新的prop给子组件，你可以使用计算属性来计算这个值，然后将这个计算属性作为prop传递给子组件。
并不是在子组件件...
- 实用技巧:
- 计算属性可以依赖其他计算属性；
- 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。
计算属性 get 的用法:
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，通常里面都是一个个计算相关的函数 , 一般就是用来通过其他的数据算出一个新数据 , 只要最终返回一个计算出来的结果即可。
使用计算属性的默认方法 getter 来读取,里面可以执行一些逻辑或者直接return返回的值.
computed: {
// 计算属性的 getter
reversedMessage(){
// 在此之前调用函数方法 或 执行一些逻辑
// 最终return 的是 通过其他的数据算出一个新数据
return this.message.split('').reverse().join('')
}
}
计算属性 set 的用法:
注意: 绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法
computed: {
fullName: {
// 数据渲染时会自动调用get方法
get: function(){
return this.firstName + '-' + this.lastName
},
// 注意必须要传递参数,否则没有意义
// 数据变化时自动调用set方法
set: function(newValue){
var names = newValue.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
// 此时会调用set方法,若现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName也会相应地被更新；进而会触发getter被调用。
fullname = 'Jay-Chou'
计算属性与watch的区别
1.触发条件不同
computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。
watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。
2.应用场景不同
执行异步操作，开销较大的操作，避免堵塞主线程，使用watch。
简单且串行返回的，使用computed
3.区别
区别在于watch是不断触发更新 , 而computed只有值更新后才触发一次
自己感悟:
1.什么时候使用计算属性:
当一个值变化时引起其他逻辑变化时,可以使用计算属性;
只有当该计算属性被用于模版展示时,才会触发Get方法,否则无效;
2. 计算属性数组:
- 对计算数组操作
计算属性有点像壳子,像是被封装一层的函数,你对其进行数组类型进行操作,其实都是对其实都是对 get 中绑定的原数组进行操作,而且此时会触发 get 方法,我们可以在其中进行 逻辑方法调用.
对其赋值操作时,会触发 set 方法,我们可以在其中进行 逻辑方法调用.其中 newValue 就是这个赋值的新值.
-
对原数组进行操作
对原数组 新增和删除 操作会影响计算属性的值一起变化,并触发 get 方法;
对原数组 赋值操作时,也是会影响计算属性的值一起变化,并触发 get 方法;总结:
要想触发计算数组的 set 的方法,只能对计算数组进行赋值操作;
无论是对计算属性还是原数组进行新增和删除 操作,都会触发 get 方法,并影响计算属性的值一起变化;
-
计算属性布尔型, int 类型, 字符串类型:
1.对计算数组操作
只会触发计算属性的 set 方法
2.对原数组进行操作
只会触发计算属性的 get 方法
网友评论