Vue监视属性

// 监视属性watch写法一:
//写在vue实例化里面
watch: {
//date里面需要监视的值
isHot: {
immediate: true,//初始化时让handler调用
//handler是当isHot发生变化时调用
handler(newValue, oldValue) {
console.log(“isHot被修改了”, newValue, oldValue);
}
}
}
//----------------------------------------
// 监视写法二:
//写在vue实例化外面
vm.$watch(‘isHot’, {
immediate: true,//初始化时让handler调用
//handler是当isHot发生变化时调用
handler(newValue, oldValue) {
console.log(“isHot被修改了”, newValue, oldValue);
}
})

### 2.深度监视:


(1).Vue中的watch默认不监测对象内部值的改变 (一层)  
 (2).配置deep:true可以监测对象内部值改变 (多层)。  
 备注:  
 (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!  
 (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

Vue.config.productionTip = false;
var vm = new Vue({
el: “#app”,
data: {
isHot: true,
},
computed: {
info() {
// 三目运算符flase还是true判断
return this.isHot ? ‘炎热’ : ‘凉爽’;
}
},
methods: {
changeWatchd() {
// 等于非this.isHot就是等于isHot的相反值也就是truefalse相互转换
this.isHot = !this.isHot;
},
watch: {
//简写当检测属性只有handler时就能简写
// isHot(newValue, oldValue) {
// console.log(“isHot被修改了,newValue,oldValue”)
// },
isHot: {
// immediate: true,//初始化时让handler调用
//handler是当isHot发生变化时调用
handler(newValue, oldValue) {
console.log(“isHot被修改了”, newValue, oldValue);
},
},
//监视多级结构中某个属性的变化
/*“inumbers.a”:{
handler(){
console.log("a被改变了’)
}
}*/
//监视多级结构中所有属性的变化
numbers: {
deep: true,
handler() {
console.log(“numbers改变了”);
}
}
}
}
})

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0