vue常见**MS题

高逼格答案：提升 vue渲染性能

父传子

子传父

非父子组件

核心：四个阶段8个勾子

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1）beforeCreate**

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2）created**

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3）beforeMount**

在挂载开始之前被调用：相关的 render 函数首次被调用。

4）mounted**

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5）beforeUpdate**

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6）updated**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7）activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8）deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9）beforeDestroy**

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10）destroyed**

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11）errorCaptured（2.5.0+ 新增）**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

1.路径不同
hash有#, history没有#
2.工作模式不同
hash : 修改当前页面hash,不需要服务器额外配置
history: 会给服务器发送请求，需要服务器配置

1.hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
2.history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

1操作data中的数据，发现没有响应式
- 原因：数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）
- 解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的
2.在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载
- 解决方案：Vue.nextTick(回调函数进行获取
3.其他的可以自由发挥，只要不是太低级就可以（比如，单词写错，代码位置写错，这种就是低级问题。其他的都可以说，千万别说这两个)

1为什么需要 nextTick
- Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
2.知识储备（可以不说，但是自己要知道，以防不测）
- 事件循环中宏任务和微任务这两个概念
- 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）
- 常见的微任务有 ,Promise.then(), async
3.最终答案：
- nextTick 的原理是 vue 通过异步队列控制 DOM 更新
- nextTick底层是promise，所以是微任务。这个一定要知道
- （官方语言) ： nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
4.小科普：其实vue在版本更新的时候。时而将nextTick封装成宏任务，时而将nextTick封装成微任务。不过目前vue2最新的版本，nextTick底层是微任务
- 课外阅读nextTick源码：https://juejin.cn/post/6875492931726376974