Vue--计算属性与监视属性
vue认为data中的写的都是属性
计算属性：拿着属性去进行加工
配置项：computed
<body>
<div id="root">
姓：<input type="text" name="" id="" v-model="surname">
<br>
名: <input type="text" name="" id="" v-model="name">
<br>
姓名：<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
surname:'张',
name:'三',
},
// methods:{
// fullname(){
// return this.surname+this.name;
// }
// }
computed:{
//fullname就是一个属性
fullname:{
//get什么时候调用： 初次读取fullname时；所依赖的值发生变化。
get(){
//这里this就是vm
return this.surname + this.name;
},
//fullna被修改的时候
set(value){
const arr = value.split('-');
this.surname = arr[0];
this.name = arr[1] ;
}
}
}
})
methods和computed的区别：
①、methods不会进行缓存，如果多次使用会调用多次。
计算属性会进行缓存，如果多次使用，计算属性只会调用一次，所依赖的值发生变化才会再次调用。效率比较高。
②、methods是函数调用，computed是属性调用
③、computed定义的方法是以属性访问的形式调用的【其中实现的原理是get方法】，methods定义的方法是以函数访问的形式调用的。
④、computed是基于响应式依赖进行缓存的，只有响应式依赖发生改变时，才会重新求值
如果这个计算属性只考虑读取，只有get的的方法 就可以简写为fullname:{
fullName(){
return this.surname + this.name;
},
例子：
<body>
<div id="root">
<h2>weathher is {{info}}</h2>
<button @click="changeWeather">改变天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
ishot: true,
},
computed: {
info(){
return this.ishot ? "热" : "不热"
}
},
methods: {
changeWeather(){
this.ishot = !this.ishot
}
},
})
</script>
监视属性
watch: {
ishot:{
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
}
},
或者是使用：
vm.$watch('ishot',{
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
})
刚刚的使用计算属性的全名也可以使用监视属性
<body>
<div id="root">
姓：<input type="text" name="" id="" v-model="surname">
<br>
名: <input type="text" name="" id="" v-model="name">
<br>
姓名：<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
surname:'张',
name:'三',
fullname:''
},
watch: {
surname:{
handler(newValue){
this.fullname = newValue + this.name
}
},
name:{
handler(newValue){
this.fullname = this.surname + newValue
}
}
},
// methods:{
// fullname(){
// return this.surname+this.name;
// }
// }
// computed:{
// //fullname就是一个属性
// fullname:{
// //get什么时候调用： 初次读取fullname时；所依赖的值发生变化。
// get(){
// //这里this就是vm
// return this.surname + this.name;
// },
// //fullna被修改的时候
// set(value){
// const arr = value.split('-');
// this.surname = arr[0];
// this.name = arr[1] ;
// }
// }
// },
})
总结：这里去使用了三种方式来实现进行将姓名继续拼接，如果是需要一些异步操作的时候使用watch会比较好。
①、computed能完成的，watch都可以完成
②、watch能完成的，computed不一定能完成，比如说watch进行异步操作
③、所有被vue管理的函数都写成普通函数，这样this的指向才是 vm 或者是 组件实例对象
④、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数），最好写成箭头函数，这样this才指向的是 vm 或者是 组件实例对象。