【vue】有关watch的⼀道题下⾯说法错误的是：
A watch监听对象必须设置deep：true
B 数组直接通过索引修改属性值，能触发watch⽅法
C watch内部可以写异步⽅法
D immediate：true可以开启⾸次赋值监听
这道题我做错了，选的A，正确答案是B。
先看B为什么错：
我们都知道数组直接以下标的⽅式修改数组项，data数据是⽆法响应式驱动视图的。
<body>
<div id="app">
<h1 ref="h1" v-if="show">nowcoder</h1>
<button @click="change" :class="arr">按钮</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: false,
arr: ['red']
},
methods: {
change() {
this.arr[0] = 'black';
console.log(this.arr)
}
},
watch: {
arr() {
console.log('arr变动触发了watch更新！')
}
}
})
</script>
</body>
点击按钮并没有变成⿊⾊
此时控制台输出arr：
这个Observer代表arr数组上有⼀个watch。
data数据改变了，但是视图没有重新渲染，watch⽅法也没有被触发。
换种写法：
Vue.set(this.arr, 0, 'black');
这种⽅式data数据会响应式更新，结果：
watch⽅法也被触发啦！以后只要记住watch⽅法触发与data数据响应式更新的特点⼀致就⾏了。
然后我们再看A：
⽐如说有这么段代码：
<script>
new Vue({
el: '#app',
data: {
obj: {
name: 'alex',
age: 12
}
},
methods: {
changeObj() {
this.obj.name = 'max';
}
},
watch: {
obj() {
console.log('监听的对象发⽣了更新！')
}
}
})
vue逗号分割的字符串转数组</script>
obj的name属性在视图上确实是更新了，但是watch⽅法可没有触发！
毕竟监听⼀个对象可⽐监听⼀个字符串或者数组难多了！它需要更深层次的监听。
所以此时就⽤到了'deep'这个属性，告诉watch要开启360度全⽅位⽆死⾓深层次监听，眼神牢牢锁定你！
既然要设置属性了，就不能⽤es6那种简写了，当然，也可以⽤啦，不过就不能直接在监听对象上⽤，可以在handler上⽤函数的简写。watch: {
obj: {
deep: true,
handler() {
console.log('监听的对象发⽣了更新！')
}
}
}
然后，watch⽅法就可以触发啦！
最后再看D：
immediate开启⾸次赋值监听，啥叫‘⾸次赋值’？其实就是data数据初始化，监听的数据初始化完成以后，就会调⽤watch⽅法了！watch: {
obj: {
immediate: true,
deep: true,
handler() {
console.log('⾸次赋值监听！')
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。