关于前端:Vue基础

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 节点之外。