$watch和watch属性的使用

$watch和watch属性都是监听值的变化的,是同一个作用，但是有两个不同写法。

用法一：

this.$watch((newVal,oldVal)=>{ })

注意：这种方法是监听不到对象的变化的。

用法二：

watch:{xxx：（newVal,oldVal)=>{     // xxx是data里的数据
    }
}

监听对象某个值的变化

watch:{"xxx.value"：（newVal,oldVal)=>{     // xxx.value是data里对象的value
    }
}

监听整个对象的变化(深度监听) ,handle方法：

  //深度监听
    obj:{handler(newVal,oldVal){}，　　　　deep:true}

例子：

<template><div><input type="text" v-model="name">{{name}}<input type="text" v-model="age">{{age}}<input type="text" v-model="obj.id">{{obj.id}}<input type="text" v-model="obj">{{obj}}</div>
</template>
<script>
export default {name: "Home",data() {return {name: "",age: "",obj: {id: "1",addr: "gz"}};},created() {this.obj = {id:"99",addr:"gd"}// 用法一：  this.$watch("要监听的值",(oldVal,newVal)=>{ })this.$watch("name", (newValue, oldValue) => {console.log(newValue + "_新值");console.log(oldValue + "_旧值");});//这样监听不到对象的变化的this.$watch("obj", (newval, oldval) => {console.log(newval);console.log(oldval);});},//用法二：
  watch: {age: (newValue, oldValue) => {console.log(newValue);console.log(oldValue);},// 监听对象中的某个属性的变化"obj.id":(newVal,oldVal)=>{console.log(newVal);console.log(oldVal);},//深度监听
    obj:{handler(newVal,oldVal){console.log(newVal);console.log(oldVal);},　　　　deep:true}},
};
</script>
<style lang="css" scoped>
</style>

转载于:https://www.cnblogs.com/luguankun/p/10873813.html

$watch和watch属性的使用

最新文章

热门文章