Vue

nextTick简介 背景：Vue在更新响应式状态时，最终的DOM更新不是同步生效的，是由Vue将它们缓存在一个队列中，直到下一个"tick"才一起执行。目的是确保每个组件无论发生多少次状态改变，都仅

diff算法整体分为5步： 整个diff的分步共分为 5 步，分别为： sync from start：自前向后的对比 sync from end：自后向前的对比 common sequence +

步骤一： computed函数定义在packages/src/reactivity/computed.ts文件中： computed 函数接收一个 getterOrOptions 参数,即传入的匿名函

步骤一：createRef 方法 ref函数定义在packages/reactivity/src/ref.ts文件中： ref 函数实际执行的是 createRef 方法，而该方法实际是返回了一个 R

步骤一： reactive 函数在 packages/reactivity/src/reactive.ts 文件下： reactive 函数实际执行的是 createReactiveObject 方法

Vue3优化点 源码优化 使用monorepo和TS管理和开发源码，提升自身代码可维护性 monorepo把模块拆分到不同的package中，每个package有各自的APi、类型定义和测试。模块拆分

watch watch监听ref基本类型 在Vue3里使用watch要先import引入，而且watch里面传入两个参数：第一个是监视的属性名，第二个是回调函数。 watch 监听ref对象类型 监听

Vue3 reactive使用不当会失去响应 1、直接赋值对象：如果直接将一个响应式对象赋值给另一个变量，将失去响应性。因为reactive返回的是对象本身，不仅仅是带来 2、直接替换响应式对象 3、

子组件修改父组件的值 Vue.js遵循单向数据流的原则，即数据从父组件传递到子组件，子组件通过props接收这些数据，每次父级组件发生更新时，子组件中所有的props都将会刷新为最新的值,并且不能直接

Scoped定义 在Vue中，scoped属性通过PostCSS插件来实现样式的局部作用域。当你在一个Vue组件的<style>标签中使用scoped属性时，这个插件会自动给组件模板中的每个元素添加一

Vue、React相同点 都有虚拟DOM（Virtual DOM） 提供响应式和组件化的视图组件 都有各自的路由和状态管理相关的库 都支持服务端渲染 Vue、React的不同点 两者之间更新粒度的不同

Tree Shaking的定义 什么是无用的代码 不会被运行到的代码 值会影响到无关程序运行结果的变量 Tree Shaking的使用环境-----【静态模块化ES Module】 ES module

答题思路 1:虚拟DOM Vue不可以直接操作DOM结构，通过数据驱动、指令等机制间接操作DOM结构。修改模版中的数据时，Vue会触发重新渲染过程，调用render函数，返回一个虚拟DOM树。 2:D

nextTick的定义 异步方法，用于在DOM更新后执行回调 使用nextTick的背景 渲染一个列表，每次点击按钮就会往列表后面添加十条数据，并跳到第十条数据的位置

组件中修改数据 dispatch:异步操作，数据提交至actions，用于向后台提交数据 commit：同步操作，数据提交至mutations，用于登录成功后读取用户信息写到缓存里

Object.defineProperty来劫持整个对象，然后进行深度遍历，给每个属性添加 getter 和 setter，实现响应式，但是存在以下问题： 初始化时需要遍历对象所有key，层级多的情况

v-if和v-for哪个优先级更高？ vue2中v-for的优先级> v-if。先执行循环再判断条件，浪费性能 vue3中v-if的优先级>v-for。v-if执行时，调用的变量还不存在，导致异常 两