Vue实践--计算属性
2017-11-28 09:37
316 查看
简单的文本转换可以通过filters来转换,但是当涉及到复杂的逻辑的时候就要通过计算属性完成了
计算属性都是以函数的形式写在computed选项中,计算属性中的this指向Vue实例本身,只要最后有返回的值就行,
“当手动修改计算属性的值就像修改一个普通的数据那样的时候就会触发setter函数”,理解这句话对于理解setter的触发时刻很关键,首先修改的是计算属性的值(而不是其他的值),“就像修改普通数据那样的时候”(我们知道修改普通数据就像修改firstName:myApp1.firstName = "Blaer"是这样的,所以修改计算属性的值的时候也是类似);
虽然绝大多数情况下,我们只会用到getter方法(此时直接采用默认的计算属性的写法就行),但也要知道还有一个setter。
下面我们了解一下两个小技巧:计算属性可以依赖其他计算属性,本Vue实例中的计算属性可以依赖其他Vue实例中的数据(毕竟数据都可以通过实例.属性访问数据)
var myApp2 = new Vue({
el:"#container2",
data:{
cat:3,
mouse:5,
dog:9,
wolf:10
},
computed:{
// 计算属性间的依赖,allAnimals依赖于catAndmouse
allAnimals:function(){
return this.dog + this.wolf+this.catAndmouse
},
catAndmouse:function(){
return this.cat+this.mouse
},
// 计算属性,实例间数据的依赖
others:function(){
return myApp1.firstName + this.cat
}
}
})有些功能通过methds也可以实现,计算属性是基于依赖缓存的(只要计算属性所依赖的值不发生变化,值就不变)、而methods只要页面重新渲染就会变(但此时计算属性不一定会变哦)。那么到底啥时间用计算属性,啥时间用methods呢,一个很实用的判断方法是看你是否需要缓存,当你遍历大数组和做大量计算的时候,就应当使用计算属性,除非你不想得到缓存;
计算属性都是以函数的形式写在computed选项中,计算属性中的this指向Vue实例本身,只要最后有返回的值就行,
/* getter与setter (博客上见)*/ var myApp1 = new Vue({ el:"#container1", data:{ firstName:"John", lastName:"Smith" }, computed:{ fullName:{ // getter,默认 get:function(){ return this.firstName + " "+ this.lastName }, //setter当改变计算属性的值的时候才会触发 set:function(newFullName){ var nameArr = newFullName.split(" "); this.firstName = nameArr[0]; this.lastName = nameArr[nameArr.length-1] } } } }); myApp1.fullName = "Jodan Micale";每一个计算属性都包含一个getter,一个setter函数(其实就像上面的那样),
“当手动修改计算属性的值就像修改一个普通的数据那样的时候就会触发setter函数”,理解这句话对于理解setter的触发时刻很关键,首先修改的是计算属性的值(而不是其他的值),“就像修改普通数据那样的时候”(我们知道修改普通数据就像修改firstName:myApp1.firstName = "Blaer"是这样的,所以修改计算属性的值的时候也是类似);
虽然绝大多数情况下,我们只会用到getter方法(此时直接采用默认的计算属性的写法就行),但也要知道还有一个setter。
下面我们了解一下两个小技巧:计算属性可以依赖其他计算属性,本Vue实例中的计算属性可以依赖其他Vue实例中的数据(毕竟数据都可以通过实例.属性访问数据)
var myApp2 = new Vue({
el:"#container2",
data:{
cat:3,
mouse:5,
dog:9,
wolf:10
},
computed:{
// 计算属性间的依赖,allAnimals依赖于catAndmouse
allAnimals:function(){
return this.dog + this.wolf+this.catAndmouse
},
catAndmouse:function(){
return this.cat+this.mouse
},
// 计算属性,实例间数据的依赖
others:function(){
return myApp1.firstName + this.cat
}
}
})有些功能通过methds也可以实现,计算属性是基于依赖缓存的(只要计算属性所依赖的值不发生变化,值就不变)、而methods只要页面重新渲染就会变(但此时计算属性不一定会变哦)。那么到底啥时间用计算属性,啥时间用methods呢,一个很实用的判断方法是看你是否需要缓存,当你遍历大数组和做大量计算的时候,就应当使用计算属性,除非你不想得到缓存;
相关文章推荐
- Vue计算属性和监听属性
- 初识Vue——计算属性和观察者
- vue的 计算属性(computed)、methods、watched三者区别
- 【Vue】-(5) 计算属性与class,style绑定
- Vue 中计算属性computed和method
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七八║Vue基础: 指令(下)+计算属性
- vue.js计算属性用法(computed)
- Vue计算属性
- Vue计算属性的使用
- vue的过滤器和计算属性
- Vue.js-05:第五章 - 计算属性与监听器
- Vue.js-----轻量高效的MVVM框架(五、计算属性)
- 解决vue 更改计算属性后select选中值不更改的问题
- vue-使用计算属性遇到的坑
- Vue.js 计算属性
- vue 计算属性 底部导航处理
- vue.js入门教程之计算属性
- 详解vue 计算属性与方法跟侦听器区别(面试考点)
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- Vue.js计算属性