Vue总结

Vue3有什么新特性

1、性能优化：在原本的Vue2中，每次DOM某个地方需要更新都需要遍历整个虚拟DOM，然后判断哪个地方需要进行更新，然后再重新渲染。而Vue3选择了一种新的渲染策略，即采用通过标记来追踪动态数据的绑定，从而节约遍历虚拟dom的大部分开销，使得每次需要更新DOM时，无需遍历整个虚拟DOM树就可以检测到改变而进行DOM更新。
2、按需打包：Vue框架里有很多的API和模块，但是一个项目中不可能用到所有的API和模块，所以该功能就可以实现在打包时去除掉Vue中没有被用到的模块和API，使得整个项目大小大幅度减小。
3、更好的TS代码支持：Vue3使用了TS重新对Vue框架进行了重写，实现对TS更好的支持。
4、Composition API：解决原本Vue项目中代码逻辑分散而导致不易维护的问题
5、Vue2要求组件模板中只能有一个根节点，而不可以有多个根节点，Vue3不再限于模板中的单个根节点
6、Custom Renderer API 也算是Vue3一个很不错的亮点了，它的作用就是将我们的代码绘制到 canvas 画布上

Vue不同组件之间是怎么通信的?

父子组件用Props通信
非父子组件用Event Bus通信
如果项目够复杂,可能需要Vuex等全局状态管理库通信

理解Vue生命周期

实例从创建到销毁的过程就叫生命周期，从开始创建，初始化数据，编译解析模板，挂载DOM并渲染，循环监听更新渲染，销毁实例等一系列过程。

1. beforeCreate创建前，数据观测和初始化事件未开始；
2. create创建后完成数据观测属性和方法的运算，初始化事件，$属性没有被挂载渲染出来；
3. beforeMount挂载前，实例挂载el对象前被调用，render函数首次被调用，完成模板编译，data里面数据和模板生成fragment片段，但是还没有被挂载到html文档上去，尚不能操作进程DOM节点获取操作；
4. mounted挂载后，替换原来el并挂载到实例上去，以及可以获取到DOM节点，可进行ajax交互，节点进行实践监听等操作；
5. beforeUpdate更新前，数据更新前调用，发生在虚拟DOM重新渲染和打好补丁之前，不会触发附加的重渲染过程；
6. updated更新后，数据更新导致虚拟DOM重新渲染，数据以及更新完毕；
7. beforeDestroy销毁前，vue实例销毁前调用，此时仍然可以访问使用；
8. destroyed销毁后，vue实例销毁后调用，事件监听以及组件实例都被销毁；

说说vue路由有哪些模式和区别以及history出现404的原因和解决方法

hash —— 即地址栏 URL 中的 # 符号
history —— 利用了 HTML5中新增的 pushState() 和 replaceState() 方法。
调用 history.pushState() 相比于直接修改 hash，存在以下优势：
1、pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
2、pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
3、pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
4、pushState() 可额外设置 title 属性供后续使用。
hash对于history的优势
1、hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2、history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。
解决办法：Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
参考链接：https://juejin.cn/post/6844903552519766029

数据劫持的方法有哪些？除了defineproperty和proxy还有啥

Reflect

讲讲Object.definProperty() 和 ES6中的Proxy？或者说 Proxy有哪些好处

Object.definProperty()与ES6中的Proxy都可以数据劫持。
Object.definProperty()监听的是属性，不能监听数组的变化
Proxy可以直接监听对象并返回新对象，可以直接监听数组的变化

vue双向绑定原理？

vue是