【前端面试系列之VUE】vue中如何监听对象、v-if和v-for同时出现应该怎么办？

问题1：vue如何监听对象或者数组某个属性的变化

采用this.$set(你要改变的数据/对象，你要改变的位置，你要改变成什么)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

调用几个数组的方法

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

vm.$set的实现原理是：

• 如果目标是数组，直接使用数组的splice方法触发响应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则会通过调用defineReactive方法进行相应水处理（defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）。

问题2：v-if和v-for哪个优先级更高，如果同时出现，应如何优化？

当v-if与v-for一起使用的时候，v-for具有比v-if更高的优先级。
优化的话一般由两种常见的情况

• 过滤列表的某些项

这时可以将要过滤的列表交给监视属性watch去处理，得到一个过滤后的列表再次进行渲染。优点：只渲染有效列，渲染更高效。

• 判断整个列表是否显示

可以把v-if放置在v-for外层容器元素上（例如:ul，ol，div或者说是template）