最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
当需要监听一个对象的改变时,普通的watch
方法无法监听到对象内部属性的改变,只有data
中的数据才能够监听到变化,此时就需要deep
属性对对象进行深度监听。
三、第三种方式
<input type="text" v-model="cityName.name" />
data (){
return {
cityName:
{
name:'北京',
location: '中国'
}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注:监测对象的时候,newVal == oldVal
此时会给cityName的所有属性都加上监听函数,如果属性较多时,每个属性值的变化都会执行handler
。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: {
'cityName.name': {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
四、监听数组变化
1.watch
能监听到数组push
时的改变,例如
data () {
return {
demo: [1,2]
}
},
mounted (){
window.myVue = this
},
watch: {
demo(val){
console.log(val)
}
},
myVue.demo.push(3) //[1,2,3]
2.watch
不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
myVue.demo[1] = 5
- 当你修改数组的长度时,例如:
myVue.demo.length = 2
此时,你可以删除原有键,再 $set
一个新的值,这样就可以触发watch
。
myVue.$set(myVue.demo,0,8) // [8,2,3]
3.更复杂一点,对数组嵌套对象进行监听的时候,这时就需要深度监听。
data () {
return {
demo:[
{
name:'张三',
age:18
},
{
name:'李四',
age:20
}
]
}
},
mounted (){
window.myVue = this
},
watch: {
demo: {
handler (val) {
console.log(val)
},
// 这里是关键,代表递归监听 demo 的变化
deep: true
}
},
myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]
对象篇
模块化编程-自研模块加载器
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ps://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)