1、MVC模型（Model-View-Controller）
(1)model是模型，负责接受控制器传来的请求并返回数据
(2)View是视图，就是用户看到的交互界面
(3)Controller是控制器，接受用户的输入并调用模型和视图去完成用户的需求，负责接受请求并选择调用哪个模型来处理请求。
(4)优单：多个视图能共享一个模型
(5)缺点: 一些视图和控制器联系紧密，不利于视图或控制器的独立复用。
2、MVVM模型(Model-View-ViewModel)
当初设计这个模型的思想就是：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而开发者可以从繁琐的DOM操作中解放出来。
M是数据、V是视图。
ViewModel通过双向数据绑定将Model和View联系起来，并专门进行数据解析。
Vue就是基于MVVM模型实现的一套框架，Model就是JS的数组，对象等数据部分。
View是页面视图部分，ViewModel是指Vue实例化对象
3、Vue的生命周期
每个Vue实例都有一个被创建到被销毁的过程，这个过程就是Vue的生命周期。Vue的生命周期有好几个阶段，Vue也提供了钩子函数供我们在Vue生命周期不同阶段运行（以Vue的属性的形式添加，不能用箭头函数，涉及到this）
(1)beforeCreate:在实例刚被创建出来，还没有初始化好data和methods。
(2)create: 初始化好data和methods之后，挂载阶段开始之前，还没开始编译模板
(3)beforeMount:挂载阶段开始的时候，已经编译好模板，还没放入页面(还不能访问真实的DOM结构)
(4)mounted：已经挂载到了指定的容器。（已经创建好了vm.$el，可以访问真实的DOM结构）
(5)beforeUpdate:数据更新
(6)updated:数据更新
(7)beforeDestroy:实例销毁前
(8)destroy:实例销毁后
4、Vue条件渲染
(1)v-if:用于条件性的渲染一块内容，如果v-if的表达式的值为false 则该内容不被渲染。对template标签也试用。使用v-if渲染切换开销大。
(2)v-show:始终渲染指定的内容，如果v-show的表达式为false,则该内容仍被渲染，只是display为none，但对template标签不适用（template标签的内容仍然显示在页面上，后台DOM中没有template标签）只有v-show初始渲染开销大.
当对一个组件绑定一个条件渲染时，若为v-if,切换时候会触发mounted,而若为v-show则不会（可以使用keep-alive，使得v-if绑定的组件切换也不触发mounted）
5、Vue列表渲染
(1)v-for可以渲染一个数组，格式：v-for=”item,index in items”(index可以省略，items是在vue实例声明的数组)，对数据操作的时候，不要直接使用下标，而用pop/push/splice/shift/sort/slice/reverse这七个方法或者直接改变数组的引用,或者使用set方法：Vue.set(vm.arr,index,value)或vm.$set(vm.arr,index,value)。
(2)v-for 还可以渲染一个对象，格式：v-for=”value,key,index in object”(key,index 可以省略，object是在vue实例声明的一个对象)，直接对一个对象的属性进行修改可以实时显示，但直接添加或删除一个对象属性，不会更新显示。（得直接改变引用，或者使用Vue.set(vm.obj,”key”,value)或vm.$set(vm.obj,”key”,value)方法）
(3)增删或切换列表顺序时提高性能，常常给每一项提供一个唯一key属性，渲染数组的 时候可以绑定index: v-bind:key=”index”，渲染对象的时候可以绑定key(健值)： v-bind:key=”key”。
6、Vue的模板语法：
(1)插值表达式 {{ }}，只接受表达式（加减、三元等），不接受语句（赋值，判断等）
(2)v-text:
(3)v-html:（将变量值作为html格式显示）
7、计算属性：vue属性中的computed属性,计算属性自带一个缓存机制，当该计算属性涉及到的变量没有发生变化的时候，它的值不会重新计算。date属性中，date的值不能是几个date变量的运算。想要求几个变量的和，可以使用methods的定义的函数，（在插值表达式中要加（）进行执行），而用computed定义的函数也可以，插值表达式中加不加()都行。computed属性有一个get属性和一个set属性，get属性就是当fullname依赖的name1和name2发生变化时，进行更新。set（x）是当fullname发生变化时，得到变化后的x并执行set函数。
8、监听属性：vue属性中的watch属性，以函数的形式，和computed类似，但是只能监一个变量。
9、Vue在用v-if进行条件渲染时候，在进行DOM切换时，会进行DOM元素的复用（可以设置key=“aaa”给元素绑定它独特的标识符，就不会被复用了）
10.Vue的引用：ref 有时候也得用vue操作DOM，就需要给一个div绑定一个ref=”div1”,
然后使用this.$refs.div1就可以获得该DOM结点了，如果这个div换成一个组件，那么这个结点可以直接引用子组件的属性。
10、Vue父子组件传值，父组件向子组件传值可以通过v-bind绑定一个属性，然后子组件中用props属性接受这个属性（子组件不要随便改动父组件的值，要改的话，拷贝一个副本，然后改动这个副本）; 子组件向父组件传值可以通过触发自定义事件的方式（this.$emit(“mythings”),x,y），在事件中可以传多个值。
11、Vue非父子组件之前传值：
(1)vuex
(2)bus使用总线，给所有的Vue原型绑定一个总线bus,通过给这个总线传事件和监听事件可以达到非父子组件间传值的效果。
12、Vue原生事件与自定义事件：
给vue组件绑定的监听事件永远是自定义事件，其实是click，即便点击都不会触发函数，而使用.native修饰符可以使得这个事件转换为原生事件，即点击就会触发函数。而给HTML原生绑定的事件一般都是原生事件。
12、Vue表单 input type=radio,checkbox,select,text select(option) textarea
13、插槽；当一个组件有定义模板template时，如果希望外部调用这个组件的时候，也能在内部嵌套一些组件，就可以用插槽了。
14、组件命名以及组件监听事件名：用中划线连接的会比较好
15、(1)vue直接引入element-ui组件改变样式不行，得在自定义类前面加“<<<”。
(2)vue空格: 一个中文宽度: 半个中文宽度：
16、Vue双向绑定v-model
Vue主要通过Object.defineProperty()来实现数据劫持，Object中接受三个参数，第一个是对象，第二个是对象的一个属性，第三个是一个配置对象。有get,set等属性，get:当调用这个对象的属性时候的返回值，set当这个属性发生变化时候的回调函数。defineProperty添加的属性为不可枚举（let k in obj中不会出现），但打印对象会出现
以input为例实现双向绑定：给input进行监听，当数据改变时，同步修改到一个自定义的对象的一个属性中，再对这个属性进行数据劫持，当这个属性变化时，触发set,通过set中的方法，
实现数据同步更新视图
实现Vue的数据劫持：
17、vue路由
(1)路由的实现原理:
路由最初是由后端提出的，根据不同的路由来返回不同的页面，而vue路由是可以通过改变URL,在不刷新的情况下更新视图页面。
(1)hash模式：hash的值是URL中的#/和后面的东西，虽然出现在URL中，但不会被包含在HTTP请求中，对后端没有影响，只是用来指定浏览器动作的，所以不会刷新页面。（兼容性好）因为hash只可修改#后面内容，使用只可设置当前同文档的URL
(2)history模式：利用了HTML5中History Interface中新增的pushState和replaceState方法（新增一条历史记录、修改当前的历史记录）设置的新URL可以是与当前URL同源的任意URL。
(2)$route和$router的区别
（1）$router是VueRouter的实例，相当于一个全局的路由器对象，可以使用$router.push、replace、go等方法，导航到不同的URL。它可以用来控制路由去哪。
（2）$route是当前跳转到的路由的一个路由信息对象，里面可以获得到name,meta,path等属性
(3)params 和 query:
parmas更类似于post请求，由name引入，请求的参数不会显示在地址栏中，而query由path引入，请求的参数会显示在地址栏中
18、vuex
(1)vuex的实现原理；
为每个vue实例添加一个vuex.store的实例，储存了state,getter,action,mutation的相关数据，通过调用action、mutation来修改state中的值，通过vue的响应式来实现对state数据进行监听
(2)核心概念
①state: 就是共享的数据的存放地，内部的数据发生变化，依赖这个数据的组件也会发生更新
②getter: 就是store中的计算属性，他会对计算的结果进行缓存，仅当它的依赖发生变化时，才会重新计算，不然直接返回值这个缓存。
③mutation: 进行同步的操作，常用于改变state的数据
④action: 进行异步操作，可以用来commit执行一个mutation操作
⑤module: 将store分割成模块，让项目结构更清晰。
19、.sync 一个语法糖
20、单页面和多页面应用的对比
(1)单页面（SPA）只有一个外壳页面和多个页面片，每次跳转仅刷新局部资源，JS、CSS等资源是公用的（只需在外壳部分加载）用户体验好，页面片段间切换比较快
(2)多页面（MPA）由多个完整页面构成，每次跳转需要刷新所有资源，页面加载缓慢，用户体验不好
21、虚拟DOM:
(1)原理：改变一个真实的DOM比改变一个JS对象的花销要大很多。虚拟DOM是JS对象对真实DOM的一个映射，当一个元素的状态需要改变时，会创建新的虚拟DOM，然后计算与旧的虚拟DOM的差别，并把这些差别应用在真实DOM上。
(2)作用：用来提高页面的渲染速度
(3)diff算法: 利用JS生成虚拟的VDOM树，但元素要发生改变时，生成新的虚拟newVDOM, 再用VDOM和newVDOM进行比较（仅在同级进行比较），将差异直接修改在真实DOM上。https://www.cnblogs.com/dojo-...
(4)VDOM和newVDOM进行比较算法：分别给vDOM和newVDOM一个头指针和一个尾指针，然后两两相比（共四种），若相等就把真实DOM中相应结点移动到Vnode中指定的位置。若都不相等，则遍历oldChild,newVOM头指针依次与其匹配，若都没匹配到，则在真实的DOM结点中将newVDOM直接插入到vDOM头指针的位置。
22、vue3.0新特性
(1)节点打Tag，分成动态节点（有{{a}}这类的）和静态节点，每次更新DOM会跳过静态节点，直接定位到动态节点，提升了效率
(2)对节点监听事件设置缓存
(3)使用Proxy来实现响应式而不是object.defineProperty
①defineProperty的缺点：新增或删除属性无法监听；不支持class,array，map等类型
②Proxy原理：使用ES6的proxy代理，拦截对data的一系列操作。proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截。
③template中不需要用一个div包裹即没必要只有一个根节点，可以多个标签（节点）并列
④组件teleport：传送门，可以将vue实例中的数据应用到vue挂载的dom节点之外。