面试复习-框架篇
1. vue中use作用， Vue.use是Vue提供的一个静态方法，用来向vue注册插件。
- Vue.use 可以接收一个对象，Vue.use(obj)
- 对象obj中需要提供一个 install 函数
- 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器
// mian.js中使用 import comomHeader from '@/components/comomHeader.vue'; const app = createApp(App); app.component('ComomHeader',comomHeader)
2. 虚拟dom是什么? 原理? 优缺点?
1. 虚拟dom本质上是js对象，是真实dom的抽象， 状态变更时，记录新树和旧
树的差异最后把差异更新到真正的dom中
vdom具有三个属性， tag：标签名，attrs：属性，children：子元素对象
优点：无需手动操作 DOM， 跨平台
缺点: 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。
<ul id="list">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
{
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children:['item1']
}
},
{
tag: 'li',
attrs: {
className: 'item',
children:['item2']
}
}
]
}
//创建Virtual Dom Tree <ul id="list"> <li class="a">a</li> <li class="a ">b</li> </ul> //创建Virtual Dom Tree let ul = Element( 'ul', { id: 'list' }， [ Element( 'li', { class: 'a' }，[ 'a' ]), Element( 'li', { class: 'b'}，[ 'b' ]) ]); let ulDom = ul.render( );//生成真实 Domdocument.body.appendChild( ulDom );
3. vue 和 react 在虚拟dom的diff上，做了哪些改进使得速度很快?
1. vue和react的diff算法都是优化过的diff算法,而且有着相同的优化点,就是同 级 比较,不做跨级比较,不同层的只需要删除原节点，并且新建插入更新节点 2. vue的diff算法的比较规则:新旧列表的两端对比 1. 旧列表的头一个节点oldStartNode与新列表的头一个节点 newStartNode 对比 2. 使用旧列表的最后一个节点oldEndNode与新列表的最后一个节点 newEndNode对比 3. 使用旧列表的头一个节点oldStartNode与新列表的最后一个节点 newEndNode对比 4. 使用旧列表的最后一个节点oldEndNode与新列表的头一个节点 newStartNode对比 5. 当前四个比较规则都失效的时候,把新列表的第一个节点newStartNode 对旧列表进行循环遍历对比 3. react的diff算法的三种策略 1.tree diff:同级策略,只进行同级的对 比 2.component diff: 同一类型的组件，按原策略（层级比较）,不同类型 的组件，删除原组件，构建新组件 3.element diff:同级遍历,拿着新节点列表的节点一个个与旧节点列表做 遍历对比,当对比成功的时候,就把旧节点插入到真实dom中当前新节点 位置对应的真实dom的前边,若是没有找到对应的,就要在新节点所对应 的真实dom的地方插入一个节点 4.vue与react的diff比较 vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时 调 动patch函数，参数是vnode和oldVnode，分别代表新旧节点。 vue对比节点。当节点元素相同，但是classname不同，认为是不同类型 的元素，删除重建，而react认为是同类型节点，只是修改节点属性。 vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左 到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个， react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个
4 vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?
key是虚拟Dom对象的标识，在更新显示时key起着极其重要的作用。 当Vue中data或React中state的数据发生变化时，会根据新数据生成新的虚拟Dom，随后Vue/React会对新虚拟Dom和旧虚拟Dom进行diff比较， 1. 旧虚拟Dom中找到与新虚拟Dom相同的key 1. 若虚拟Dom中的内容没变，则直接使用之前的真实Dom 2.若虚拟Dom中的内容变了，则生成新的真实Dom，随后替换掉页面中之 前的真实Dom
2. 旧虚拟Dom中没有找到与新虚拟Dom相同的key：
1. 根据数据创建新的真实Dom，随后渲染到页面
为什么遍历列表时，key最好不要用index 删除等破坏顺序的操作，会产生虚拟DOM和旧的真实DOM中的部分key对不上的问题，接着会产生很多没有必要的真实DOM更新，渲染效率低下。
5. vue 双向绑定的原理是什么?
vue3使用的poxy代理，与Vue2相比的好处在于不消耗性能，因为Vue2使用Object.defineProperty()方法嵌套深层的话需要使用递归比较耗性能，而Vue3使用代理则不用。
vue2,用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter；在数据变动时发布消息给订阅者，触发相应的监听回调。 实现步骤： 1. 设置实现一个监听器Observer，用来劫持并监听所有的属性，一旦 属性发生变化，就通知订阅者。 2. 需要设置实现一个订阅者Watcher，用来接收属性变化的一个通知并执行相应的函数，从而更新视图。 3. 实现一个解析器Compile，用来可以扫描和解析每个节点的相关指令，然后初始化相应的模板数据以及订阅者。
