第一种方式有一个缺点: 就是当值第一次绑定的时候不会执行监听函数,只有当值改变的时候才会执行。
如果我们想在第一次绑定的时候就执行此监听函数,则需要设置immediate
为true
。比如当父组件向子组件动态传值时,子组件props
首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate
设为true
。
二、第二种方式
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
immediate
表示在watch
中首次绑定的时候,是否执行handler
,值为true
则表示在watch
中声明时,立即执行handler
方法,值为false
,则和一般使用watch
一样,在数据发生变化的时候才执行handler
。
当需要监听一个对象的改变时,普通的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
#### 总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)