计算属性
计算属性：
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：地城记住了Object.defineproperty方法提供的getter和serter。
- get函数什么时候执行？
-
初次读取f时会调用一次。 -
所依赖的数据发生变化时会再次调用。
-
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 -
备注：
-
计算属性最终会出现在vm上，直接读取使用即可。 -
如果计算属性被修改，那必须写set函数去相应修改，且set中有引用的计算时依赖的属性发生变化，一般情况下计算属性不会修改。 -
计算属性不能靠异步任务去返回返回值，因为它是靠返回值获取对应值的。
<div id="root">
<!-- @keyup.enter代表回车键弹起 -->
请输入姓：<input type="text" v-model="name_1">
<br>
请输入名：<input type="text" v-model="name_2">
<br>
输入的内容：<label>{{fullName}}</label>
<hr>
</div>
<script>
let val = "xin";
const vm = new Vue({
el: "#root",
data: {
name_1: "",
name_2: ""
},
computed: {
//------完整版写法-------
fullName: {
//get的作用：当读取fullName时，get就会被调用，且返回值为fullName的值。
//get的调用：初次读取fullName时，所得来的数据发生变化时。
get() {
//此处的this是vue对象
return this.name_1 + "-" + this.name_2;
},
//修改fullName的属性时会被调用
//一般情况下计算属性不会修改
set(value) {
let arr = value.split("-");
this.name_1=arr[0];
this.name_2=arr[1];
}
}
//-------简写版写法（只考虑读取不考虑修改时才能用简写形式）-------
//与只有一个get函数的效果相同，调用方法与插值语法一样，不加括号
fullName(){
return this.name_1 + "-" + this.name_2;
}
}
})
</script>
监视属性（侦听属性）
监视属性：
- 被监视的属性变化时，回调函数自动调用，进行相关操作。
- 被监视属性必须存在才能进行监视（被监视的属性可以是计算属性）
- 监视属性的两种写法：
- new New时传入watch配置。
- 通过vm.$watch监视。
<div id="root">
<h1>今天天气很{{info}}</h1>
<br>
<button @click="changeWeather">点我切换</button>
<hr>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? "热" : "冷";
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
watch: {
//监听isHot值得改变
isHot: {
immediate: false, //初始化的时候自动调用handler，默认是false，旧参数值（lowValue为undefine）
//isHot改变时会调用handler,第一次参数是新的值，第二个参数是旧的值。
handler(newVlaue, lowValue) {
console.log("isHot被改了 " + "新的值：" + newVlaue + " 旧的值：" + lowValue);
}
}
}
})
//后续添加监视属性
vm.$watch("isHot",{
//监听isHot值得改变
isHot: {
immediate: false, //初始化的时候自动调用handler，默认是false，旧参数值（lowValue为undefine）
//isHot改变时会调用handler,第一次参数是新的值，第二个参数是旧的值。
handler(newVlaue, lowValue) {
console.log("isHot被改了 " + "新的值：" + newVlaue + " 旧的值：" + lowValue);
}
}
});
</script>
深度监视（深度侦听）
深度监视：
- vue中的watch默认不监测对象内部值的改变（一层）。
- 配置deep:true可以监测队形内部值的改变（多层）。
- vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以。
- 使用watch是根据数据的具体结构，决定是否采用深度监视。
- 如果使用简写方式就不能进行深度监视等操作了。
<div id="root">
<h1>a的值{{number.a}}</h1><br>
<button @click="number.a++">改变a的值</button>
<hr><br>
<h1>b的值{{number.b}}</h1><br>
<button @click="number.b++">改变a的值</button>
<hr>
</div>
<script>
new Vue({
el: "#root",
data: {
number: {
a: 1,
b: 2
}
},
watch: {
//监测number中的属性a是否改变
"number.a": {
handler(){
console.log("a的值改变了");
}
},
//监测number的所有属性是否改变
number:{
deep:true,
handler(){
console.log("number有值改变了");
}
}
}
})
//----------------------------后续添加监听属性-----------------------------------
//正常写法
vm.$watch("number",{
immediate:true,
deep:true,
handler(newValue, lowValue){
console.log("number的值改变了" + "新的值：" + newValue + " 旧的值" + lowValue);
}
})
//简写方法
vm.$watch("xin",function(newValue, lowValue){
console.log("xin-的值改变了" + "新的值：" + newValue + " 旧的值" + lowValue);
})
</script>
?computed与watch的区别
computed与watch的区别：
- computed能完成的功能，watch都可以完成。
- watch能完成的功能computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
- 所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实力对象。
- 所有不被vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象。
|