vue --》watch 深度监听的优化。
话不多说,直接上代码,注释很清楚
<template>
<div>
<input type="text" v-model="value" >
<p>{{pValue}}</p>
<input type="text" v-model="userName.name">
</div>
</template>
<script>
export default {
data() {
return {
value:'111111111',
pValue:"12",
userName:{
name:"Mir.Wang"
}
}
},
watch: {
value(a,b){ //监听input值,发生变化就会触发
this.pValue = a
},
pValue(a,b){ //监听p标签得值,当input值发生变化时,设置了p标签的值,该函数就会触发
//console.log(a,b)
},
"userName.name"(a,b){ //用字符串的方法来取代深度监听deep:true,//深度监听底层一个一个得遍历,很浪费性能
console.log(a,b)
}
},
}
</script>