vue的响应系统
vue的mvvm框架，当数据模型data变化时，页面视图会响应更新
原理对data的·getter/setter方法进行拦截，
利用发布订阅的设计模式。
在getter中进行订阅，在setter方法中发布通知，让所有订阅者
完成响应。在响应式系统中，Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者，
而监听器watch、计算属性computed、视图渲染template/render三个角色同时
作为订阅者。
对于监听器watch，会直接订阅观察监听的属性，对于计算属性
computed和视图渲染template/render，如果内部执行获取了data的某个属性，
就会执行该属性的getter方法，然后自动完成对该属性的订阅，
当属性被修改时，就会执行该属性的setter方法，从而完成该属性的发布通知，
通知所有订阅者进行更新。

computed与watch的区别
计算属性computed和监听器watch都可以观察属性的变化从而做出响应
不同的是：计算属性computed更多是作为缓存功能的观察者，它可以将一个或
者多个data的属性进行复杂的计算生成一个新的值，提供给渲染函数使用
，当依赖的属性变化时，computed不会立即重新计算生成新的值，
而是先标记为脏数据，当下次computed被获取时候，才会进行重新计算并返回
而监听器watch并不具备缓存性，监听器watch提供一个监听函数，
当监听的属性发生变化时，会立即执行该函数。
Vue的生命周期
beforeCreate：是new Vue()之后触发的第一个钩子，
在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
created：在实例创建完成后发生，当前阶段已经完成了数据观测，
也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数
可以通过vm.$nextTick来访问Dom
beforeMount：发生在挂载之前，在这之前template模板已导入渲染函数编译。
而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，
不会触发updated
mounted：在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，
beforeUpdate：发生在更新之前，也就是响应式数据发生更新，
虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染
updated：发生在更新完成之后，当前阶段组件Dom已完成更新
beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用
destroyed：发生在实例销毁之后，这个时候只剩下了dom空壳。
组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
Vue事件绑定原理说一下
每一个Vue实例都是一个Event Bus，当子组件被创建的时候，
父组件将事件传递给子组件，子组件初始化的时候是有$on方法将事件注册到内部
，在需要的时候使用$emit触发函数，而对于原生native事件，
使用addEventListener绑定到真实的DOM元素
Vue模板渲染的原理是什么？
vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，
不是正确的HTML语法，所有需要将template转化成一个JavaScript函数
，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，
就可以让视图跑起来了，这一个转化的过程，就成为模板编译。
模板编译又分三个阶段，解析parse，优化optimize，
生成generate，最终生成可执行函数render。
parse阶段：使用大量的正则表达式对template字符串进行解析，
将标签、指令、属性等转化为抽象语法树AST。
optimize阶段：遍历AST，找到其中的一些静态节点并进行标记，
方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，
优化runtime的性能。
generate阶段：将最终的AST转化为render函数字符串。
template预编译是什么？
对于 Vue 组件来说，模板编译只会在组件实例化的时候编译一次，
生成渲染函数之后在也不会进行编译。因此，编译对组件的 
runtime 是一种性能损耗。而模板编译的目的仅仅是将template转化为render function，
这个过程，正好可以在项目构建的过程中完成，这样可以让实际组件在
 runtime 时直接跳过模板渲染，进而提升性能，这个在项目构建的
 编译template的过程，就是预编译。
 key属性的作用是什么
在对节点进行diff的过程中，判断是否为相同节点的一个很重要的条件
是key是否相等，如果是相同节点，则会尽可能的复用原有的DOM节点。
所以key属性是提供给框架在diff的时候使用的，而非开发者。
说说Vue2.0和Vue3.0有什么区别
重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：

可直接监听数组类型的数据变化
监听的目标为对象本身，不需要像Object.defineProperty一样遍
历每个属性，有一定的性能提升
可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
直接实现对象属性的新增/删除
新增Composition API，更好的逻辑复用和代码组织
为什么要新增Composition API，它能解决什么问题
Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，
而难以维护的根本原因是Vue的API设计迫使开发者使用watch，
computed，methods选项组织代码，而不是实际的业务逻辑
。另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，
虽然可以minxis完成逻辑复用，但是当mixin变多的时候，
会使得难以找到对应的data、computed或者method来源于哪个mixin，
使得类型推断难以进行。所以Composition API的出现，
主要是也是为了解决Option API带来的问题，第一个是代码组织问题，
Compostion API可以让开发者根据业务逻辑组织自己的代码，
让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接
触这一段不是他自己写的代码时，他可以更好的利用代码的组
织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码
。第二个是实现代码的逻辑提取与复用，当然mixin也可以实现
逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个
组件时，很难看出property是来源于哪个mixin，来源不清楚，
另外，多个mixin的property存在变量命名冲突的风险
。而Composition API刚好解决了这两个问题。
SR有了解吗？原理是什么？
在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，
并且在服务器内部将Vue组件渲染成HTML，并且将数据、
HTML一并返回给客户端，这个在服务器将数据和组件转化
为HTML的过程，叫做服务端渲染SSR
而当客户端拿到服务器渲染的HTML和数据之后，
由于数据已经有了，客户端不需要再一次请求数据，
而只需要将数据同步到组件或者Vuex内部即可。
除了数据意外，HTML也结构已经有了，客户端在渲染组件的时候，
也只需要将HTML的DOM节点映射到Virtual DOM即可，
不需要重新创建DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活