vue基础梳理（基础部分，后续更新路由传参，路由守卫和vuex）

vue梳理

Vue的特点：

（vue是一个MVVM框架，单向数据流，双向绑定，还有跟多便利的指令，提供了v-dom，能够高效渲染）

​ 1.Vue是一个MVVM框架

​ M模型 model数据

​ V视图 view

​ VM C->P->M 视图模型 ->处理逻辑

2.单向数据流

​ 数据由父级传递给子级

3.Vue是JS渐进式框架

​ 渐进式：越学越难

4.Vue是使用了虚拟DOM技术

5.Vue拥有便利性的指令

• 指令： 操作dom的一种方式

  6.Vue拥有组件系统

• 组件： 组件是一个html、css、js的一个聚合体

Vue的响应式原理：

​ vue通过订阅者发布者模式，利用es5的 Object.DefineProperty中的getter和setter进行数据劫持和修改

​ 这个数据劫持的对象是Vue中的data选项

​ 如果在data对象以外的数据，不响应

Vue的指令

1. v-text
2. v-html
3. v-if
4. v-else-if
5. v-else
6. v-show (和v-if的区别 v-if直接让项目消失 v-show 让项目隐藏)
7. v-model (.lazy (在change事件下才能同步数据) .number .trim)
8. v-once
9. v-on （事件修饰符：self prevent stop once capture）
10. v-bind
11. v-for

列表渲染的key的重要性

1.绑定Key后，列表有唯一的标识，在进行Diff算法的时候，可以提高效率，进行同级比较，提高渲染的效率

列表渲染 - 数据不响应情况

在利用下标索引或者length改变原数组的时候，会造成数据改变，视图不更新的情况，因为这些方法都没进行处理，没办法set方法监听到，要手动利用this.$set进行重修改

watch vs computed vs methods vs update

• watch 是对数据进行监听，更多完成的是异步数据请求，数据改变了就会触发，watch的方法 ，方法名为数据的名字，可以监听到vue的内置属性
• methods 它是事件处理程序
• computed 它是对数据进行重计算，并且有缓存的机制
• update 当视图更新的时候回触发的一个钩子函数

自定义指令

​ 全局定义 Vue.directive(指令的名称，options)

​ 局部定义 directives

组件的通信

​ 1.父子通信：父组件通过 自定义一个属性 传值给子组件 ，子组件通过props：[ ]接受传进来的数据 ，第一次得到的参数是undefined，因为组件要先加载完，父组件才能给子组件绑定自定义属性

​ 2.子父通信：父组件在子组件身上定义一个方法，子组件通过this.$emit去调用，后面可以传参

​ 3.非父子通信，利用ref ，ref可以取到一个子组件上面的属性，然后传给另外个组件

​ 4.跨组件通信：用eventbus实例化一个全局的vue实例，然后通过eventbus.$on定义一个事件，通过$emit去调用

为什么说VUE的性能很好

​ 1.因为vue用了V-dom:因为V-DOM可以减少对真实DOM的操作，大大缩短了事件，减少内存的消耗

2.VDOM是什么：V-DOM是一个JS的对象模型，用于模拟真实DOM的结构

3.jsx是什么：jsx是对js的语法的一种拓展，就是可以让我们在JS中可以书写XML

VODM的渲染过程

1.先通过数据渲染成V-DON---->通过render函数渲染成真实DOM----->当数据发生改变的时候，生成新的V-DOM---->通过diff算法，对比新旧的vdom，获得patch补丁对象------->根据patch补丁对象再次渲染真实dom

Diff算法：

​ 在数据更新的时候会产生一个新的V-DOM，通过KEY来进行同级比较比较上一个VDOM和新的VDOM，

产生一个补丁对象，然后进行真实DOM的渲染

生命周期：

​ 三个阶段：初始阶段，更新阶段，销毁阶段----------生命周期一共有11个，常用的有8个

​ 初始阶段：beforeCreate：为初始化做准备

​ create:初始化数据 （这个阶段就可以做数据请求）

​ beforemounte:挂载前，这个阶段会产生V-dom

​ mounted：挂载阶段，会产生真实dom，（一般都是挂载的时候做数据请求）

​ 初始化阶段在组件挂载的时候会自动执行，并且只执行一次，这四个生命周期都提供了一次修改数据的机会

​

​ 更新阶段：beforeUpdate：更新数据前

​ updated：更新阶段

​ （执行的次数，只要视图发生变化就会执行，应用的场景：可以进行第三方库的实例化，但是要加一个判断的开关，否则每次视图更新都会触发实例化）

​ 销毁阶段：beforedestroy

​ destroyed

​ （可以多次执行，执行条件v-if(外部)/$destory(内部销毁)）

​ （作用：可以做一些善后处理。比如定时器的销毁，高频的自定义事件等）

​ 另外三个钩子函数：keep-alive里面有两个 （activated,deactivated） errorCaptured

Vue-router实现的三种方式：

 Hash模式、History模式、abstract模式

Hash: 使用URL的hash值来作为路由。支持所有浏览器。

History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。