Vue 计算属性基本和监视属性使用

计算属性 （computed）

• 在computed属性对象中定义计算属性的方法；在页面中使用 {{方法名}} 来显示计算的结果

例如在下面的input中，如果要让该文本框内容本更，可以结合computed属性来完成，其中必须要用v-model命令进行绑定

<input type="text" placeholder="First Name" v-model="firstName"/>

computed:{
//什么时执行: 初始化显示 / 相关的data属性数据放生改变
firstName(){//	计算属性中的一个方法,方法的返回值作为属性值
return this.firstName + '计算后的数据';
},
}

• 计算属性高级
  通过getter/setter实现对属性数据的显示和监视；
  切记：计算属性存在缓存，多次读取只执行一次getter计算

firstName:{
//回调函数 当需要都去当前属性值时回调, 根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + '计算后的数据';
},
//回调函数 监视当前属性值的变化 当属性值发生改变时回调,更新相关的属性数据
set(value){// value 就是firstName的最新属性值
this.firstName = '1111';
}
}

监视属性 （watch）

• 通过vm对象的 $watch() 或 watch配置来监视指定的属性。
  当属性变化时，回调函数会自动调用，在函数内部进行计算；
  其中监视分为配置监视和vue的实例方法

watch:{// 此为配置监视
firstName(newValue, oldValue){
return this.firstName + '计算后的数据';
},
}

• vue实例方法监视

vm.$watch('firstName',function(newValue, oldValue){
this.firstName = newValue + '计算后的数据';
})

注意：每一个属性都有一个对应的set/get放到，它们均为回调函数；其中get方法的作用是返回当前属性的值，set(value)方法为监视作用，一但属性值更改后就会触发，value为最新的值