每天学习一点前端知识-VUE（二）

1.既然vue能通过数据劫持精准探测数据变化，为何还需要虚拟dom进行diff检测差异

vue是一个组件一个渲染watcher，如果每个属性都对应一个watcher的话，会浪费内存，性能下降

2.请说⼀下你对响应式数据的理解?

1.1 如何实现响应式数据

数组和对象类型当值变化时如何劫持到。对象内部通过defineReactive⽅法，使⽤ object.defineProperty将属性进⾏劫持(只会劫持已经存在的属性)，数组则是通过重写数组⽅法来实 现。多层对象是通过递归来实现劫持。vue3则采⽤ proxy

1.2 vue2 处理缺陷

在vue2 的时候使⽤ defineProperty 来进⾏数据的劫持,需要对属性进⾏重写添加getter及setter 性能差。 当新增属性和删除属性时⽆法监控变化。需要通过$set、$delete实现 数组不采⽤ defineProperty 来进⾏劫持 (浪费性能，对所有索引进⾏劫持会造成性能浪费)需要对数组单 独进⾏处理。 对于 ES6 中新产⽣的 Map、Set 这些数据结构不⽀持.

3.vue2中如何检测数组变化

数组劫持，重写数组的方法（pop、push、shift、unshift、reverse、sort、splice） 缺点：无法监控数组的索引和长度变化

4.Vue.set(屏蔽了在根上定义数据)

对于数组:底层使用splice 对于对象:底层使用defineReactive(ob.value,key,val) (可以使用合并的方式代替 {...a,...b} )

5.v-if v-show

v-if:如果条件不成立就不会渲染当前节点的dom元素，可有阻断内地代码的执行，不成立则不会执行内部逻辑 v-if只是切换当前dom的显示或隐藏

(display,opacity,visibility差别)

display:

这个属性控制元素是否显示以及它的盒模型如何影响其他元素。 可能的值包括：none, block, inline, inline-block, flex, grid 等等。 当设置为 none 时，元素不会在页面上占据空间，并且不会对其他元素产生影响，相当于元素从 DOM 中移除。 opacity:

这个属性控制元素的透明度，可以让元素呈现半透明或完全透明。 可以设置的值范围从 0（完全透明）到 1（完全不透明）之间。 即使元素是透明的，它仍然会占据空间，并影响其他元素的布局。 visibility:

这个属性控制元素是否可见，但不会影响它在布局中所占的空间。 可能的值包括：visible（默认值）, hidden, collapse。 当设置为 hidden 时，元素会被隐藏，但仍然会占据与原始位置相同的空间，因此不会影响页面布局。 总的来说，display: none 将完全移除元素，不占据任何空间，opacity 控制元素的透明度，但不影响其占据的空间，而 visibility: hidden 使元素隐藏但仍保留空间。