beforeCreate: 是new Vue() 之后触发的第一个钩子，data,methods,computed 以及watch 上的数据和方法都不能被访问

created: 在实例创建完成后发生，可以做一些初始化数据的获取，在当前阶段无法与Dom 进行交互，如果非要可以通过vm.$nextTick 来访问。

beforeMounted: 发生在挂载之前，template模版导入渲染函数编译，虚拟Dom已经创建完成，即将开始渲染

mounted:在挂载完成后发生，在当前阶段，真实的Dom 挂载完毕，数据完成双向绑定，可以访问到Dom 节点，使用$ref属性对Dom 进行操作。

beforeUpdate: 发生在更新之前，也就是响应数据发生更新，虚拟Dom 重新渲染之前被触发，可以在当前阶段进行更改数据，不会造成重新渲染。

updated: 发生在更新完成之后，组件Dom 已完成更新，避免在此期间更改数据，可能会导致数据的万县循环更新。

beforeDestroy : 发生在实例销毁之前，在当前阶段实例完全可以被使用，在这个阶段可以完成善后工作，比如清除定时器。

destroyed: 发生在销毁之后，这个阶段只剩下Dom空壳，组件已经被拆解，数据绑定陪卸除，监听被移除，子实例被销毁。

 

vue 在初始化的时候会使用Object.defineProperty 重新定义data中的所有属性，当页面调用对应的属性的时候，会进行依赖收集

如果属性发生变化会通知相关的依赖进行更新操作(发布订阅)。

Vue3.x 改用Proxy 替代Object.definedProperty,Proxy 可以直接监听对象和数组的变化。

 

源码组织方式变化：使用TS 重新。

支持Composition API 基于函数的API 更加灵活组织组件逻辑。

响应式系统提升:Vue3 采用的是proxy,可动态新增删除属性，及数据变化

编译优化：vue2通过标记静态跟节点优化diff,vue3标记和提升所有静态根节点，diff 的时候只需对比动态节点内容。

打包体积的优化：移除了一些不常用的api,例如：filter

生命周期的优化：使用setup代替了之前的beforeCreate和created

vue3的template 标签支持多个根标签。

vuex 状态 管理：创建实例的方式不同，vue2为new Store,vue3为createStore

Route 获取页面实例与路由信息：vue2 通过this 获取router 获取 实例，vue3 通过使用getCurrentInstance/userRoute和userRouter获取当前组件实例

Props 的变化；vue2 通过this 获取props 里面的内容，vue3直接通过props

 

就是把MVC 中的Controller 演变成了ViewModel ,Model 层代表数据模型，View代表UI组件，viewModel 是view和model 层的桥梁

数据会绑定到viewModel 并自动渲染到页面中，视图的变化时会通知viewModel 层更新数据。

 

v-model 本质是一个语法糖，可以看成是value+input 方法的语法糖，可以通过model 属性的prop 和envent 属性进行自定义，原生的

标签会根据生成不同的事件和属性。

 

diff 算法有以下过程

同级比较，在比较子节点

先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将就的子节点移除)比较都有子几点的情况

递归比较子节点

vue2 的核心Diff 算法采用了双端比较算法。

vue3 借鉴了 ivi 算法和inferno 算法。

 

父子组件通信，

父->子 props 子->父 $on,$emit 获取父子组件的实例$parent,$children

Ref 获取实例的方式调用组件的属性或者方法。

Provide,inject 依赖注入的形式，兄弟组件的方式 Bus 跨级组件通信 Vuex

 

location.hash 的值实际上就是 # 后面的

history 实际上是采用了HTML5中提供的api 来实现的 主要有history.pushState() 和history.replaceState()

 

keep-alive 可以实现组件缓存 ，当组件切换时不会对当前组件进行卸载

常用的两个属性 include/exclude 允许组件有条件的进行缓存

两个声明周期 activated/deactivated 用来得知当前组件是否处于活跃状态

keep-alive 还运用了LRU 算法

 

在下次DOM 更新循环结束之后执行延迟回调，nextTick 主要是使用了宏观任务和微观任务。

定义了一个异步方法，多次调用nextTick 会将方法存入队列中，通过这个异步方法情况当前队列。

 

complier 的主要作用是解析模版，生成渲染模版的render,而render 的主要作用是为了生成VNode

complier 主要分为3 大块

parse: 接授template 原始模版，按着模版的节点和数据生成对应的ast

optimize: 遍历ast的每一个节点，标记静态节点，这样就知道哪部分不会变化，于是在页面需要更新时，通过diff 减少去对比DOM ，提升性能。

generate:把前两步生成完善的ast,组成render 字符串，然后将render 字符串通过new Function 的方式转换成渲染函数。

 

都是观察数据变化的

计算属性将会混入到 vue 的实例中，所需要监听自定义变量；watch 监听data,props 里面的数据的变化

computed 有缓存，他依赖的值变了才会重新计算 watch 没有。

watch 支持异步，computed 不支持；

watch 是一对多（监听某一个值变化，执行对应操作），computed 是多对一（监听属性依赖与其他属性）

watch 监听函数接收两个参数，第一个是最新值，第二个是输入之前的值。

computed 属性是函数的时，都有get和set 方法，默认走get方法 get 必须有返回值。

 

事件修饰符	.stop:防止冒泡，.prevent: 防止默认事件，.capture:使用事件捕获模式，.self 只在当前元素本身触发，.once：只出一次，.passlve: 默认行为将会立即触发
按键修饰符	.left,.right,.moddle,.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right,.ctrl,.alt,.shift,.meta
表单修饰符	.lazy,.number,trim

 

编码阶段	尽量减少data 中的数据 ，data中的数据会增加 getter 和setter ,v-if 和v-for 不能连用 spa 页面尽量采用 keep-alive 缓存组件 ，key 保证唯一，使用懒加载路由异步组件，第三方模块按需导入，长列表滚动到可视区动态加载，图片懒加载。
打包阶段	压缩代码，Tree Shaking/Scope Holsting 使用cdn 加载第三方模块， 多线程打包 happypack splitChunks 抽离公共文件，sourceMap 优化
用户体验	骨架屏 PWA

 

请求优化	将第三方的库放到CDN 上，能够大幅度减少生产环境中的项目体积，CDN 能够实时根据网络流量和各个节点的连接，负载均衡及到用户的距离。
缓存	将长时间不会改变的的第三方库或者静态资源设置为强缓存，将max-age 设置为一个非常长的时间，好的缓存策略有助于减轻服务器的压力。
gzip	开启gzip 压缩，通常开始前gzip 压缩能够有效的缩小传输资源的大小
http2	如果首屏加载的静态资源非常的多，浏览器对同域名的tcp 连接数量是有限的 chrome为6个
懒加载	当url 匹配到相应的路径的时候，通过import 动态加载页面组件，这样首屏的代码量会大幅度减少
预渲染	可以添加loading,或者骨架屏幕尽可能的减少白屏对用户的影响体验
合理使用第三方库	对于一些第三方ui 框架，类库，尽量使用按需加载，减少打包体积
提升代码使用率	利用代码分割，将脚本中无需立即调用的代码在代码构建是转变为异步加载的过程
封装	构建良好的项目架构，按照项目需求惊醒全局组件，插件，过滤器，指令，utils 等做一些公共封装
图片懒加载	使用图片懒加载可以优化同一时间减少http 请求开销
压缩图片	可以使用image-webpack-loader