小妍Vue笔记——目录
1. 什么是计算属性
我们己经可以搭建出一个简单的 Vue 应用,在模板中双向绑定
一些数据或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,如:
<div>
{{text.split(',').reverse().join(',')}}
</div>
上述表达式包含三个操作,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性
。
所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
2. 计算属性用法
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。除了上例简单的用法,计算属性还可以依赖多个 Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
getter 和 setter 方法
每一个计算属性都包含一个 getter 方法和一个 setter 方法。
如果计算属性后面直接跟一个 function,使用的就是计算属性的默认方法 getter
来读取。例 展示两个购物车的物品总价:
computed: {
prices: function(){
var prices = 0
for(let i=0; i<this.package.length; i++){
prices += this.package[i].price * this.package[i].count
}
return prices
}
}
我们也可以在需要时使用 setter 函数 , 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发 setter 函数,执行一些自定义的操作。例 显示全名:
computed: {
fullName: {
get: function(){
return this.firstName + ' ' + this.lastName
},
set: function(newValue){
// 传进来的值用逗号分隔,如'Liu,Bei'
var names = newValue.split(',') // 分隔为数组
this.firstName = names[0]
this.lastName = names[1]
}
}
}
计算属性除了上述简单的文本插值外,还经常用于动态地设置元素的样式名称 class 和内联样式 style。
小技巧
计算属性还有两个很实用的小技巧容易被忽略:
1. 计算属性可以依赖其他计算属性;
2. 计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他实例的数据。
3. 计算属性缓存
计算属性缓存是定义在计算属性 computed 里的。
调用 methods 里的方法也可以与计算属性起到同样的作用。
页面中的方法: 如果是调用方法,只要页面重新渲染,方法就会重新执行;若不需要渲染,则不需要重新执行。
计算属性:不管是否渲染,只要计算属性依赖的数据(缓存)未发生变化,就永远不变。
结论
1.用计算属性可以实现的问题,在 methods 里定义一个方法也可以实现相同的效果,甚至该方法还可以接受参数,使用起来更灵活。
2.既然使用 methods 就可以实现,那么为什么还需要计算属性呢?因为计算属性是基于它的依赖缓存的,一个计算属性所依赖的数据发生变化时,它才会重新取值,所以 text 只要不改变,计算属性也就不更新。
何时使用二者
使用计算属性还是 methods 取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非不希望得到缓存;
当需要数据实时发生变化时,适合用 methods。
总结:
- 计算属性computed在使用时,一定要注意,函数里面的变量都会被监听,只要里面的某一个值变动,便会将整个函数执行一遍。 而 watch 只是监听某一个值,若是监听的值里面也有很多变量,也会全部监听
- 计算后的属性可不在 data 中定义,如果定义会报错,因为对应的computed作为计算属性定义并返回对应的结果给这个变量,变量不可被重复定义和赋值。 而 watch 监听 data 中定义的变量变化
computed特性
1.是计算值,
2.应用:就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性,页面重新渲染值不变化,计算属性会立即返回之前的计算结果,而不必再次执行函数
watch特性
1.是观察的动作,
2.应用:监听props,$emit或本组件的值执行异步操作
3.无缓存性,页面重新渲染时值不变化也会执行
<div>{{reverseTitle()}}</div>
// 在组件中
methods: {
reverseTitle: function () {
return this.title.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。只是一个使用reverseTitle()取值,一个使用reverseTitle取值。
然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 title还没有发生改变,多次访问 reverseTitle计算属性会立即返回之前的计算结果,而不必再次执行函数。
举个小例子:
<div>{{reverseTitle}}</div>
<div>{{reverseTitle1()}}</div>
<button @click="add()">补充货物1</button>
<div>总价为:{{price}}</div>
复制代码
computed: {
reverseTitle: function(){
return this.title.split('').reverse().join('') //而使用计算属性,只要title没变,页面渲染是不会重新进这里来计算的,而是使用了缓存。
},
price: function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){
this.package1.count++
},
reverseTitle1: function(){
return this.title.split('').reverse().join('') //点击补充货物,也会进这个方法,再次计算。不是刷新,而是只要页面渲染,就会进方法里重新计算。
}
},
复制代码
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
4.深入Vue计算属性:getter和setter
关键词:computed(getter、setter)
注意:split()方法用于把一个字符串分割成字符串数组
一、原始的Vue实例computed
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "miya",
lastName: "Wang"
},
computed: {
fullName: function(){
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
二、计算属性中get和set的使用
将原始的Vue实例中computed里的属性、值改变一下:
1、起初:后台尝试测试了一下set的传值,发现value值指向fullName这个计算属性
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "miya",
lastName: "Wang"
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
console.log(value)
}
}
}
})
</script>
如图:第一个sussie li是console.log打印出的value值,第二个是sussie li 则是vm.fullName返回的结果。
2、然后,看看set是如何设置fullName的值?
当set时,value值是指向fullName这个计算属性。我们会把数组赋值给firstName和lastName。而当计算属性fullName所依赖的值firstName和lastName发生改变时会重新计算。
当你set这个fullName时,firstName和lastName发生变化,恰好是fullName所依赖的值,就会引起fullName的重新计算,fullName变了,页面上的fullName也就跟着变了。
注意:split()方法用于把一个字符串分割成字符串数组
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "miya",
lastName: "Wang"
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
var arr = value.split(" ");//将fullName这个字符串用空格将其打散
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
三、总结
1、get:通过设置get方法可以得到fullName的新值。
2、set:通过set的方法,设置一个值(value)来改变fullName相关联的值,引起fullName重新的计算,相应的页面上fullName也会发生改变成新的内容。