2024年最全Vue进阶（八十九）：watch 用法详解_vue watch冻结是什么(3)，2024字节跳动前端面试

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

	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}]

### 五、注意事项⚠️


* 在`watch`中不要使用箭头函数，因为箭头函数中的`this`是指向当前作用域.


### 六、拓展阅读


* 《[Vue进阶（八十四）：Computed 和 Watch 使用与区别](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》
* 《[Vue进阶（八十三）： updated和watch的区别](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》






### 文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。



同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)



**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/a489904576da281d07092f043566f6dd.png)