计算属性
计算属性与属性的区别
在Vue实例中的data里我们可以设置属性。
举例来说,如果我想设置名字为’Revin’,年龄为26那么可以这么设置。
在这个例子中name和age就是属性。
const vm = new Vue({
el:'#demo',
data:{
name:'Revin',
age:26
}
})
计算属性与属性不同,计算属性可以对属性进行操作。例如在上个例子中,若想实现输出:Revin的年龄是26这个功能并且能随着输入进行修改,那么就可以采用计算属性来设置。计算属性不写在data中,计算属性写在computed中。
具体实现上述功能的代码如下
<body>
<div id="demo">
名字:<input type="text" v-model="name"> <br /><br />
年龄:<input type="text" v-model="age"> <br /><br />
结果:<span>{{answer}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
name: 'Revin',
age: '26'
},
methods:{
},
computed: {
answer: {
//get有什么作用?当有人读取answer时,get就会被调用,且返回值就作为answer的值
//get什么时候调用?1.初次读取answer时。2.所依赖的数据发生变化时。
get() {
return this.name + '的年龄是' + this.age
}
}
}
})
</script>
</body>
计算属性的注意事项
在计算属性中需要注意以下几点
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。(在上述实例中answer由name和age的计算的来)
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
(1)get()是在读取计算属性时自动执行, 不可写成answer.get()。同时get的返回值会直接作为answer的值。
(2)set()实在修改计算属性时自动执行,同样不可写成answer.set()。在使用set()时要修改data中的name和age,从而实现对answer的修改。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。(所谓依赖数据,就是计算属性用到了什么属性,例如上述answer用到了name和age那么当name和age改变时,answer就会再次执行get。如果name和age不改变的话,那么answer就只执行一次,然后存入缓存方便下次调用。)
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。