vue中的计算属性
计算属性
- 定义
- 要用的属性不存在,要通过已有的属性计算得来,已有的属性可以是自己的定义的也可以是从其它组件传递而来的。
- 原理:和数据的双向绑定一样,利用了Object.defineproperty方法提供的setter和getter
- 在计算属性中get函数的执行
- 在初次读取时会执行一次
- 当依赖的数据发生变化时会被再次调用
- 优势:其实我们自己写方法也能实现计算属性的效果,但是计算属性内部有缓存机制(复用),效率更高,调试方便
- 备注
- 计算属性最终是在Vue的实例上的,所以我们直接用即可,和data中的属性一样
- 一般计算属性我们只读取,但如果要修改的话,那必须配置set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
<template>
<h1>{{fullName}}</h1>
</template>
computed:{
//完整的写法
fullName:{
get(){
retuen this.name
}
set(value){
this.name = value
}
}
//简写
fullName(){
return this.name
}//此时就想当于是getter
}
监听属性
监听属性watch
- 当被监听的属性发生变化时,回调函数自动调用。
- 监听的属性必须存在,才能进行监视,不会报错但是回调函数的参数都为undefined
- 监听属性的写法
watch:{
//当有除回调函数的其它配置项时只能完整的写
fullName:{
//还有很多配置属性
immediate:true,//初始化时让handler调用,默认false
deep:true,//开启深度监视,为了效率默认是不开的
handler(newValue,oldValue){}
}
//当只有回调函数时就可以简写成下面这样
fullName(newValue,oldValue){}
}
还可以通过下面这样,vm是vue的实例
vm.$watch('fullName',handler(){})
简写
vm.$watch('fullName',function(newValue,oldValue){})
watch中的深度监视
- Vue中的watch默认不监视对象内部值的改变
- 配置deep为true可以监听对象内部值的改变
- Vue自身是可以监听对象内部值改变的,但是提供的watch是不能监听的
计算属性和监听属性的区别
大部分情况下两者能实现功能都差不多,根据需求选择。
但是当根据变化要做异步处理时,此时只能使用监听属性,原因是计算属性必须返回一个值,当进行异步操作时此时就会有this指向问题。
原则:
1.被vue管理的函数,最好写成普通函数,这时this的指向才是组件实例对象或者vue实例
2.不被vue管理的函数最好写成箭头函数(定时器的回调,promise的回调,ajax的回调),写成监听函数此时this才能指向组件实例对象或者vue实例