“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”
写在前面: 前段时间是在找工作,一直在寻找些线上面试,电话面试,然后碰到了很多有意思的面试题,有些知道解法,有些还不知道答案,记录一下.
事关我对于前端面试题的收集--第一弹
说一下Vue2和Vue3的区别
- Options API ---> Composition API
- 响应式底层实现由Object.defineproperty变更为Object.proxy
- 生成BlockTree vue2的渲染跟组件大小有关,对于静态展示列表会有不必要的性能浪费,vue3里生成BlcokTree,它是将模板基于动态节点指令切割的嵌套区块,所以vue3的渲染指跟动态节点的数量有关系,因为本身静态数据就不需要响应式.
- 会在生成虚拟dom的时候新增一个静态标记patchflag,在每次数据更新的时候,只对比带有patchflag的节点
知道Vue里面的mixin吗,说一说
这是一个类似于组件的东西,mixin里面有生命周期,data以及methods等元素,可以通过混入的方式封装一些复用性代码.
同名数据以组件内数据优先,同名生命周期函数会进行合并,且混入的代码先执行,同名对象如methods等,先进行对象合并,若有同名对象,取组件内对象键值对.
vue.extend()也以同样的策略执行
//可以这样使用
import {mixin1} from './mixin.js'
export default{
mixins:[mixin1],
data(){
return{
}
}
}
//也可以全局注入
Vue.mixin({
data(){
return{}
},
methods:{
}
})
说一说$nexttick
作用
当在vue中操作dom之后,可以用set去修改响应式数据一样.
实现原理
判断浏览器的MutationObserve事件监听dom更新,vue用异步队列的方式来控制DOM更新和nextTick回调先后执行,让nextTick里的代码放在UI render步骤后面执行,就能访问到更新后的DOM了
Vuex的实现原理
基于vue的数据双向绑定实现,跟vue框架高度绑定
原理其实就是在vue实例上全局注册了一个store对象(通过vue的mixin机制) , 在每个组件的beforeCreated生命周期里添加到每个组件里面,用vue.mixin注入的方式.
store里面的state, 存入vue实例的data,具有响应式 , getter类似计算属性 , mutation 类似于 methods, 通过dispath可以触发actions里面的方法 , 通过commit可以触发mutation里面的方法
v-for和v-if的优先级
v-for跟v-if在编译时的过程
v-for的优先级比v-if高,因为在template编译的时候,会使用parse方法解析模板代码成AST树,接着在codegen过程中，会先解析AST树中的与v-for相关的属性，再解析与v-if相关的属性,在编译的过程中v-for的判断是在v-if的前面.
注意
避免一起使用,因为v-for的优先级更高,如果v-if判断为false,然后v-for遍历渲染完节点再删除掉,很浪费性能
父子组件的生命周期执行顺序
组件渲染:
父bc-> 父c-> 父bm-> 子bc-> 子c-> 子bm-> 子m-> 父m
组件更新:
父bu ->子bu ->子u ->父u
组件销毁
父bd-> 子bd-> 子d-> 父d
附
Vue的mixin(混入)的生命周期跟父子组件生命周期执行顺序一致
End
