MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是view和model层的桥梁，数据会绑定到viewmodel层并自动将数据渲染到页面中，视图变化的通知viewmodel层更新数据。
Vue在初始化数据时，会使用object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作（发布订阅）。
Vue3.x改用Proxy替代object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，那么Vue3又是怎么处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理。这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？
我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。
使用了函数劫持的方式，重写了数组的方法，vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用API时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组的变化。
在下次DOM更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
PromiseMutationObserversetImmediate如果以上都不行则采用setTimeout 定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。beforeCreate：是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据、更改数据，在这里更改数据不会触发updatad函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问DOM
beforeMount：发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟DOM已经创建完成，即将开始渲染。而此时也可以对数据进行更改，不会触发updated
mounted:在挂载完成后发生，在当前阶段，真实的DOM挂载完毕，数据完成双向绑定，可以访问到dom节点，可以使用$refs属性对dom进行操作。
beforeupdate：发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重污染。
updated：发生在更新之后，当前阶段组件dom已完成更新。要注意的是避免在此期间更改数据，因为这可能导致无限循环的更新。
beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
destroyed：发生在实例销毁之后，这个时候只剩下dmo空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁
接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created
computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。
watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式的监听，如果没有写到组件中，不要忘记使用unwatch手动注销哦。
当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式（display），切换当前DOM的显示与隐藏。
一个组件被多次复用的话也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有实例。所以为了保证组件不同实例之间data不冲突，data必须是一个函数。
v-model本质上就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性进行自定义。原生的v-model会根据标签的不同生成不同的事件和属性。
原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过vue自定义的$on实现的。
简单说，vue的编译过程就是将template转化为render函数的过程，会经历以下阶段： 1.将模板字符串转换成element ASTS（解析器） 2.对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器） 3.使用element ASTs生成render函数代码字符串（代码生成器）
首先解析模板，生成AST语法树（一种用JavaScript对象的形式来描述整个模板）。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子函数进行相关的处理。
vue的数据时响应式的，但真实模板中并不是所有的数据都是响应式的，有一些数据首次渲染后就不会再变化，对应的DOM也不会变化，那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点（静态节点）我们就可以跳过对它们的对比，对运行的模板起到很大的优化作用。 编译的最后一步是将优化后的AST数转换为可执行的代码。
由于在浏览器中操作dom是很昂贵的。频繁的操作dom，会产生一定的性能问题，这就是虚拟dom产生的原因。 Virtual DOM本质就是用一个原生的js对象去描述一个dom节点，是对真实dom的一层抽象。Virtual DOM映射到真实dom要经历VNode的create、diff、patch等阶段。 key的作用是尽可能的复用DOM元素 新旧children中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。 需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。
keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。 常用的两个属性include/exclude，允许组件有条件的进行缓存 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态
组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父.
加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted 子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated 父组件更新过程 父 beforeUpdate -> 父 updated 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed父->子 props，子->父 o n 、 on、 on、emit 获取父子组件实例 $ parent、$ children ref获取实例的方法调用组件的属性或者方法 provide、inject官方不推荐使用，但是写组件库时很常用
兄弟组件通信Event Bus实现跨组件通信 vue.prototype.$bus = new vue vuex
跨级组件通信vuex $ attrs、$listeners provide、inject
SSR也就是服务端渲染，也就是将vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把HTML直接返回给客户端 SSR有着更好的SEO，并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部拓展库时需要特殊处理，服务端渲染应有程序也需要处于node.js的运行环境。还有就是服务端会有更大的负载需求。
SEO优化
1.预渲染 2.服务端渲染SSR打包优化
1.压缩代码 2.Tree Shaking/Scope Hoisting 3.使用cdn加载第三方模块 4.多线程打包happypack 5.splitChunks抽离公共文件 6.sourceMap优化用户体验
1.骨架屏 2.PWAlocation.hash的值实际就是URL中的#后面的东西 history实际采用了HTML5中提供的API来实现，主要有history.pushState（）和history.replaceState（）
工作原理
vue做到了数据和视图完全分离开，它首先把值和js对象进行绑定，然后修改js对象的值，vue框架就会自动把dom的值进行更新。对数据进行操作不再需要引用相应的dom对象进行操作，他们通过vue对象实现数据和视图的相互绑定。 jquery则是要先使用选择器$来选取dom对象，然后对dom对象进行操作（如赋值、取值、事件绑定等）侧重
vue侧重数据绑定，可以应用于复杂数据操作的后台页面。如：表单填写页面 jQuery则是侧重于样式操作，动画效果等；可以应用于一些html5的动画页面，一些需要js来操作页面样式的页面中。$(document).ready(function)==$(function(){});//等待页面中所有的DOM结构加载完成才会执行这个方法 window.onload=function(){}:等待页面中的所有资源（DOM结构、内容、其他资源等）都加载完成才会执行函数
1.全局的导航钩子 beforeEach、afterEach 2.单个路由独享的 beforeEnter 3.组件内的导航钩子 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeava
1.beforeEach（前置守卫）、afterEach（后置钩子） beforeEach（to,from,next） 三个参数的作用： to：Router，代表要进入的目标，他是一个路由对象 from：Router，代表当前正要离开的路由，同样也是一个路由对象 next：Function，这是一个必须需要调用的方法（否则钩子函数无法resolved），而具体的执行效果则依赖next方法调用的参数 afterEach，没有next函数，也不会改变导航本身 单个路由独享的钩子beforeEnter：是在路由配置上直接进行定义的，参数的使用和前置守卫一样 组件内的导航钩子：直接在路由组件内部直接进行定义的 const File = { template: `<div>This is file</div>`, beforeRouteEnter(to, from, next) { // do someting // 在渲染该组件的对应路由被 confirm 前调用 }, beforeRouteUpdate(to, from, next) { // do someting // 在当前路由改变，但是依然渲染该组件时调用 }, beforeRouteLeave(to, from ,next) { // do someting // 导航离开该组件的对应路由时被调用 } }element:指一个整体必不可少或固有的部分，强调一个复杂整体中最简单、最基本的元件、元素或成分等。 component：指一个整体的组成部分
原因：没有在生成vue实例的时候放进watcher收集依赖 解决方法: 1.运用this. f o r c e U p d a t e ( ) 强 制 刷 新 2. 使 用 v m . forceUpdate()强制刷新 2.使用vm. forceUpdate()强制刷新2.使用vm.set(vm.items,indexOfItem,newValue)
注意： 详情可看原作者的20+Vue面试题整理
