vue面试1

标签：vue DOM event 面试 组件 data 监听

生命周期函数（父子）顺序

父beforeCreate  =>. 父created ==>. 父beforeMount ==> 子beforeCreate ==> 子created ==> 子beforeMount ==> 子mounted ==> 父mounted

更新顺序

父beforeUpdate ==> 子beforeUpdate ==> 子updated ==> 父updated

卸载顺序

父beforeDestory / 子beforeDestory / 子destroyed / 父destroyed

 

vue2自定义 v-model

props: ['text']  
model: {
   prop: 'text', event: 'change'
}
:value  @input="$emit('change')"

 

v-if（存在DOM销毁和创建，可以有多个互斥的分支）和v-show（使用 display： none 来控制是否显示）

v-html 会有XSS 风险，会覆盖 children 里面的内容

watch 深度监听一个对象，拿不到 oldvalue，因为是引用

 

v-for和v-if 不要在一个标签上面使用（在vue3上 v-if的优先级高于 v-for）

事件对象 $event 是原生的mouseEvent对象 和 react 不同 $event.target 是注册到的 div / @click定义的位置 $event.currentTarget 事件被注册到当前的元素，react是注册到 root 标签上的 但是 vue 不是   vue是异步渲染的，data修改之后 DOM不会立即渲染，多次 data修改做整合，只会触发渲染一次 但是可以在 $nextTick 中获取最新的DOM   slot 插槽 作用域插槽(使用子组件中的 data) 具名插槽(有名称)   动态组件 <component. :is='name'.  /> vue2只需要 名称， vue3必须是 一个具体的组件变量   异步组件 components: { FormDemo: () => import(.....) } 用到的时候才会去 加载对应的 js 文件，减小打包体积，提高性能     keepalive 用于频繁切换（常见性能优化） 缓存组件，不需要重复渲染

 

mixin的问题

变量来源不清晰，不利于阅读，重名(当有多个的时候)， 功能不能有效拆分

组件和mixin 可能出现多对多的现象 mixinMounted 先执行 mounted 后执行

 

组件化：并不是新出现的。 后端原本就有 <%include. 文件。 %>

MVVM： 数据驱动视图，不需要修改DOM，只关注于业务逻辑

vue的响应式，自动触发视图更新

proxy 兼容性不好，且无法 poly fill   defineProperty 的缺点 无法监听到新属性 / 下标 的 值，同样也无法 删除，无法监听原声数组，需要特殊处理 需要使用Vue.set / delete   复杂对象

需要开始深度监听 (递归操作)，而且在赋值时也要 深度监听（在 runtime 时执行），计算量大

 

vdom 核心减少计算次数的难度， 计算出最小的变更，然后执行DOM操作 { tag: 'div', props: { id: 'div1' }, children: [ ] } 使用JS来模拟DOM的结构   snabbdom 学习 vdom h / patch 函数 h 函数接受 vdom得出vnode, patch函数负责 挂载/更新/卸载 新旧vnode对比，得出最小更新范围，最后更新DOM   tag都可以有 key 属性 patchVnode / addVnode / removeVnode updateChildren key的重要性   diff 算法 是vdom中最核心，最关键的部分 并不是 vdom 独创的，如 Linux diff 比较2个JS对象也可以做 diff 库 jiff

 

树的时间复杂度为 O(n^3) 1000个节点，需要计算1000^3次 怎么办 优化时间复杂度到 O(n) ，怎么实现 1.只比较同一层级，不跨级比较 2.tag不相同，则直接删除重建，不再深度比较 3.tag和key相同，二者都相同，则认为是相同节点 日常中大多数就是同级比较  

编译模板

vue template complier 将模板编译为 render 函数 执行 render 函数生成 vnode

with 要慎用，它打破了作用域规则，易读性变差 vue-loader 会在开发环境下编译模板 vue组建中使用render函数代替template

 

 组件渲染更新过程

• 初次渲染过程

1.解析模板为render函数(或者在开发环境下完成 vue-loader) 2.触发响应式，监听data属性 getter setter 3.执行render函数，生成vnode，patch(container, vnode) 当data里面的 数据没有在 template中用到，就不会出发 getter，也就不会被监听到 因为和视图没有关系，没有用到  

• 更新过程

1.修改data，触发setter 此前getter中已经被监听 2.重新执行 render函数，生成newVnode 3.patch(vnode, newVnode)

异步渲染 减少DOM操作次数，提高性能     前端路由原理 hash变化会触发网页跳转，即浏览器的跳转 不会刷新页面，SPA必须的特点 hash永远不会提交到 server 端， 重写   window.onhashchange = (event) => { }   history 路由：URL规范的路由，跳转时不刷新页面 history.pushstate / onpopstate window.pushstate     hash 管理系统，能用就尽量使用，比如不需要 SEO history 可以考虑(to C 消费者)需要服务端支持     v-for中的key diff算法中通过 tag 和 key来判断是否是 sameNode   减少DOM操作次数，提高性能   v-model的原理：手动控制。value和 input 事件，重新出发re-render $props 传递给子组件   ajax 应该放在 mounted中： JS是单线程，放在mounted之前没有用，逻辑只会更加混乱   何时需要beforeDestory 解绑自定义事件 event$off 清除定时器 解除自定义的DOM事件，window.scroll   mutation 做原子操作 action 可以整合多个mutation操作   常见的性能优化 合理使用 v-show/ v-if / computed v-for 增加 key，以及避免 v-if 一起使用 销毁事件，避免越用越卡 合理使用异步组件 / keep-alive data 层级不要太深，因为需要深度监听 前端通用性能优化， 比如：图片懒加载     vue3有什么优势 性能更好，体积更小，更好的TS支持，更好的代码组织/逻辑复用 更多新功能，过度依赖 this，无法 treeshaking   vue3升级了那些功能 1.creatApp / emits 2.多事件处理 @click="one($event), two($event)" 3.fragment 以前必须是单一根节点 4.移除 .sync使用v-model代替 / 移除filter 5.异步组件 defineAsyncComponent 6.teleport / suspense     Reflect 反射到代理对象上来 规范化 / 标准化 / 函数化 代替了许多 Object 上的函数   proxy 如何实现监听 也是需要深度监听，并不是和defineProperty一样需要一次性监听 只有在get的时候才递归，而defineProperty需要开始就递归。提高了性能 可以原声监听数组变化 可监听新增和删除   .sync 实现：this.$emit('update: title', value)   watch和watchEffect 都可以监听，watch需要给出具体监听的值，watchEffect 则不需要 watchEffect 初始化会执行一次，要收集需要监听的数据   setup如何获取组件的实例： 没有 this getCurrentInstance， data数据需要在 onMounted中才有，此时还没有完成初始化   vite为什么这么快 开发环境无需打包，启动很快，因为开发环境使用ES6 module 生产环境使用 rollup 并不会快很多   可以远程引入CDN包 可以动态引入 const add = await import('.....').default 点击按钮后才加载   组合式API 和 react hooks的区别 setup(相当于一个生命周期)只会被调用一次，后者会被多次调用 前者没有 useMemo/ useCallback ，因为只会被调用一次，数据已经是必包中 前者无需考虑调用顺序，后者需要保证hooks的顺序一致          

 

标签：vue,DOM,event,面试,组件,data,监听
From： https://www.cnblogs.com/escapist/p/18061424