v-show和v-if的区别
- v-show通过CSS display控制显示和隐藏
- v-if组件真正的渲染和销毁,而不是显示和隐藏
- 频繁切换显示状态用v-show,否则用v-if
为何在v-for中用key
- 必须用key,且不能时index和random
- diff算法中通过tag和key来判断,是否是sameNode
- 减少渲染次数,提升渲染性能
描述Vue组件生命周期(父子组件)
- 单组件生命周期图
- 父子组件生命周期关系
* Vue组件如何通讯
- 父子组件props和this.$emit
- 自定义事件event.$no event.$off event.$emit
- vuex
描述组件渲染和更新的过程
双向数据绑定v-model的实现原理
- input元素的value=this.name
- 绑定input事件this.name=$event.target.value
- data更新触发re-render
对MVVM的理解
computed有何特点
- 缓存,data不变不会重新计算
- 提高性能
为何组件data必须是个函数?
因为,vue其实是个class,如何不是函数的话每个组件的数据都共享了
ajax请求应放在那个生命周期
- mounted
- JS是单线程,ajax异步获取数据
- 放mounted之前没用,只会让逻辑更加混乱
如何将组件所有props传递给子组件
- $props
- <User v-bind="$props"/>
如何自己实现 v-model
多个组件有相同逻辑,如何抽离
- mixin
何时要使用异步组件
- 加载大组件
- 路由异步加载
何时使用keep-alive
- 缓存组件,不需重复渲染
- 如多个静态tab页的切换
- 优化性能
何时用deforeDestory
- 接触自定义事件event.$off
- 清除定时器
- 解绑自定义的DOM事件,如window scroll等
什么是作用域插槽
Vuex中action和mutation有何区别
- action中处理异步,mutation不可以
- mutation做原子操作
- action可以整合多个mutation
Vue-router常用的路由模式
- hash默认
- H5 history(需要服务端支持)
- 两者比较
如何配置Vue-router异步加载
用vnode描述一个DOM结构
监听data变化的核心API是什么
- Object.defineProperty
- 以及深度监听,监听数组
- 有何缺点
Vue如何监听数组变化
- Object.defineProperty不能监听数组变化
- 重新定义原型,重写push pop等方法,实现监听
- Proxy可原生支持监听数组变化
描述响应式原理
- 监听data变化
- 组件渲染和更新的流程
diff算法的时间复杂度
- O(n)
- 在O(n^3)基础上做一些调整
简述diff算法过程
- patch(elem,vnode)和patch(vnode,newVnode)
- patchVnode和addVnodes和removeVnodes
- updataChildren(key重要性)
Vue为何是异步渲染,$nextTick何用?
- 异步渲染(以及合并data修改),以提高渲染性能
- $nextTick在DOM更新完之后,触发回调
Vue常见性能优化方式
- 合理使用v-show和v-if
- 合理使用computed
- v-for时加key,以及避免和v-if同时使用
- 自定义事件,DOM事件及时销毁
- 合理使用异步组件
- 合理使用keep-alive
- data层级不要太深
- 使用vue-loader在开发环境做模板编译(预编译)
- webpack层面的优化
- 前端通用性能优化,如图片懒加载
- 使用SSR
Vue 3
- 全部用TS重写(响应式,vdom,模板编译等)
- 性能提升,代码量减少
- 调整部分API