ttt

1. vue中虚拟dom的key的作用？

（1）v-if不加key，切换input，但用户输入的数据不会被清除，除非设置key，用 key 管理可复用的元素

(2)v-for是否key，[1,2,3]-->[1,2]的过程

（3）提到diff算法，只有key是vdom的唯一标识，告诉diff算法该节点，修改前后他们是否是同一个节点，只有是相同，才会对其子节点、text文本、class等属性进行精细化的比较，否则删除旧的，插入新的

2. nextTick 的原理
   (1)js的事件执行机制

(2)当设置data.a =2时，视图不会立刻被更新，因为vue的dom刷新机制是异步的，
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的
vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替

3. Vue 组件 data 为什么必须是函数 ?
   new Vue()实例中,data 可以直接是一个对象,为什么在 vue 组件中,data 必须是一个函数呢?
   因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。

所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题。

4. https://zhuanlan.zhihu.com/p/101330697

5.优化：
（1）首页加载优化，缓存，两帧
（2）大图分块加载技术
（3）10周年庆典，动画，backgroundImage,替换URL 会闪动，通过雪碧图，控制background-position
（4）测试环境，登录态问题，登录页---》 中台cas登录平台 ---》返回前端登录页，并通过cookie带回登录态 ---》前端请求数据成功
但cookie不支持待会localhost调试页，之前服务端在测试环境不需要登录，但接入米盾后，测试环境也需要登录

6.IntersectionObserver监听视口
var io = new IntersectionObserver(callback, option);
// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

7. requestAnimationFrame https://www.jianshu.com/p/fa5512dfb4f5

vue @transitionend
dom addEventListener('webkitTransitionEnd transitionend webkitAnimationEnd animationend')

8. Vue3 的新特性(三) —— 虚拟DOM的底层原理

vue3 虚拟dom：重写了 Vdom ，突破了 Vdom 的性能瓶颈
（1）patch flag 优化静态属性
Vdom 除了模拟出来它的基本信息之外，还给它加了一个标记： 1 /* TEXT */
这个标记就叫做 patch flag（补丁标记）
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。
尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。
（2）事件侦听器缓存
onclick: _cache[1] || (_cache[1] = () => {})
我们发现 onClick 函数的储存位置变成了缓存的形式。也就是说 当你的页面在不断的更新的时候，你的事件侦听器并不会重复地销毁再创建，而是以缓存的形式存在，这使 Vue3 在性能方面又有了一个出彩的地方

9. []不响应，因为没有重写[index] = ddd
   {}不响应，是因为后加的属性没有setter

10.computed属性的原理：computed的观察者也被收集到data的依赖收集器中
页面初始渲染时，读取 computed 属性值，触发重定义后的 getter 函数。由于观察者的 dirty 值为 true，将会调用 get 方法，执行原始 getter 函数。getter 函数中会读取 data（响应式）数据，读取数据时会触发 data 的 getter 方法，会将 computed 属性对应的观察者添加到 data 的依赖收集器中（用于 data 变更时通知更新）。观察者的 get 方法执行完成后，更新观察者的 value 值，并将 dirty 设置为 false，表示 value 值已更新，之后在执行观察者的 depend 方法，将上层观察者（该观察者包含页面更新的方法，方法中读取了 computed 属性值）也添加到 getter 函数中 data 的依赖收集器中（getter 中的 data 的依赖器收集器包含 computed 对应的观察者，以及包含页面更新方法（调用了 computed 属性）的观察者），最后返回 computed 观察者的 value 值。