vue部分
watch、computed、methods区别是什么
- watch是侦听属性；computed是计算属性；methods是方法。
- computed有缓存；如果computed属性依赖的属性没有发生变化，计算属性会立即返回之前的计算结果。而methods里面的函数在每次调用时都要执行。
- watch和computed都是以Vue的依赖追踪机制为基础的。
- methods里面是用来定义函数的，很显然，它需要手动调用才能执行。
v-show与v-if区别是什么
- v-show 没有移除dom节点。只是隐藏起来了，visible：hidden。
- v-if 移除dom节点。display:none。
列表遍历时key作用？
- 用唯一标识标记每个节点，可以高效渲染虚拟DOM树。
Vue有哪些生命周期钩子函数？有什么用？
- beforeCreadted：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。加loading事件。
- created：vue实例的数据对象data有了，$el还没有。结束loading、请求数据为mounted渲染做准备
- beforeMount：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
- mounted：vue实例挂载完成，data.filter成功渲染。配合路由钩子使用
- beforeUpdate：data更新时触发。
- updated：data更新时触发。数据更新时，做一些处理（此处也可以用watch进行观测）
- beforeDestroy：组件销毁时触发
- destroyed：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。组件销毁时进行提示
Vue父子组件生命周期调用顺序
- 父子组件加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新：父beforeUpdate->父updated
- 销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
Vue如何实现组件通信
- 父 -> 子 组件通信： 父 v-bind:变量名；子props接受，this.变量名。
- 子 -> 父 组件通信：子用this.$emit('事件名',参数)；父 v-on:事件名。
- 兄弟之间通信可以用bus和vuex。
data为什么是函数
- 每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。
Vue数据响应式原理
- 侦测数据的变化
- 收集视图依赖了哪些数据
- 数据变化时，自动“通知”需要更新的视图部分，并进行更新
- 数据劫持
- 依赖收集
- 发布订阅模式
nextTick怎么用？原理是什么
- this.$nextTick(()={ // ... })
- 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
diff算法和时间复杂度
- 什么是虚拟dom？
- 它是一个object对象模型 用来模拟真实的dom
作用是高效的渲染页面 减少不必要的dom操作 提高渲染效率
什么是diff算法？
用来比较新旧vnode结构的。
Vue中的keep-alive有什么用
- 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。
keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。
include定义缓存白名单，keep-alive会缓存命中的组件；
exclude定义缓存黑名单，被命中的组件将不会被缓存；
max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。
源码解析：
1、props中接收三个参数：include、exclude、max。
2、created：初始化缓存VNode（虚拟dom）和键集合变量（cache - kashi、keys）。
3、destroyed：循环cache删除所有缓存的VNode实例。
4、mounted：监听include和exclude变化进行实时更新this.cache对象数据。
5、render：(1)、找到第一个子组件对象，在黑白名单中匹配组件name，不在缓存内直接return VNode（虚拟DOM）(2)、在缓存内，拿组件的key判断是否已经缓存过该组件，存在即调整key的排序。(3)、否的话先缓存组件对象，push key到键集合中，然后判断max是否超过限制，超过将键中第一个删除。(4)、将该组件实例的keepAlive设置为true。
render 详细解析
第一步：获取keep-alive包裹着的第一个子组件对象及其组件名；
第二步：根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例（VNode），否则执行第三步；
第三步：根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在this.keys中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步。
第四步：在this.cache对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）;
第五步：最后并且很重要，将该组件实例的keepAlive属性值设置为true。
Vuex怎么用
- 1、安装引用Vuex
- 2、实例化Vuex并抛出。在入库main.js中引用并注入。
- 3、通过this.$store访问Vuex中state的数据。
const store = new Vuex.Store({
state: {}, //状态管理
mutations: {}, //修改state
actions: {}, //异步操作
getters:{}, //计算属性
modules: {} //模块
})
this.$store.state // 获取state
this.$store.commit('mutations name',params) // 通过commit触发mutations更改state
this.$store.dispatch('action name',params) // 通过dispatch触发action并传参
this.$store.getters.'getters name'
VueRouter怎么用
- 1、安装引用vue-router
- 2、实例化Router并抛出。在入库main.js中引用并注入。
- 3、实例参数，mode:'hash',routes:'挂载路由文件'
vue-router的model有两种模式：hash模式和history模式。
hash —— 即地址栏 URL 中的 # 符号。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
VueRouter如何做登录跳转
用路由拦截-路由守卫(router.beforeEach)判断token。
Vuex的原理，有哪些概念
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
Vue3用过吗，有哪些让你觉得好用的变化
- v-if 和 v-for。3.x 版本中 v-if 总是优先于 v-for 生效。
- 3.x 版本中数据和方法定义在setup函数中，return {}
- 在 setup 中，emit 已经不再用 this.$emit 了，而是 setup 的第二个参数 context 上下文来获取 emit 。
以上是 vue部分 的全部内容， 来源链接： utcz.com/z/380389.html
