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: <div v-text=”name”></div> （和{{ }}成果一样，只将变量值作为文本显示）
(3)v-html:<div v-html=”name”></div>（将变量值作为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 一个语法糖
<mycomp :foo.sync=”bar”></mycomp>会被扩大为
<mycomp :foo=”bar” @update:bar=”(val) => bar = val”>
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节点之外。