个人名片:
作者简介:一名大二在校生
个人主页:坠入暮云间x
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡
纪上次的Vue的基础语法和条件渲染的学习,我们对Vue的语法也有些初步的了解,今天的学习内容是Vue的计算属性和监视属性,让我们继续漫步在学习的海洋中吧
定义:要用的属性不存在,要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty
方法提供的getter
和setter
。
优势:与methods
实现相比,内部有缓存机制(复用),效率更高,调试方便
语法:{{方法名}}
显示计算结果
代码示例
<div id="app">
<h2>{{firstName+' ' +lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
const app =new Vue({
el:'#app',
data:{
firstName:'Lebron',
lastName:'james'
},
//computed:计算属性()
computed:{
fullName:function(){
return this.firstName +' ' +this.lastName
}
},
methods:{
getFullName(){
return this.firstName +' ' +this.lastName
}
}
})
</script>
计算属性拥有的两个方法:getter 和 setter
用来实现数据的双向绑定
可以简单的将getter
理解为获取值 ,setter
为设置值
但一般默认情况下computed
只有getter
读取数值,不能改变设值
语法:
computed:{
fullName:{
get(){
return ...
},
set(value){
}
}
}
注意:
1.
getter
中一定要有return
返回值,不然会报错
2.setter
函数接受一个参数,是setter函数执行时设置的fullName
的值。
在Vue中呢watch常用于监听响应数据的变化 当属性变化时, 回调函数自动调用, 在函数内部进行计算。
注意:
computed
中定义,监视属性监听的是已经在 data
中定义的变量, 当该变量变化时,会触发 watch
中的方法.computed
具有缓存功能,可以监听对象某个具体属性。watch
可以进行深度监听,监听对象的变化。computed
能完成的功能,watch
都可以完成。watch
能完成的功能,computed
不一定能完成,比如:watch
可以进行异步操作。