Vue2知识总结

vue作为数据驱动型框架，通过组件实现html代码的复用。对其核心知识的掌握有利于更好的编写vue项目和对框架的理解和认知。

1、插槽

插槽是为了组件更好的复用，可以传节点。在组件的templent里面放<slot></slot>标签定义了一个插槽，在使用组件的时候直接传文本或节点信息就会渲染到插槽的位置。一般使用时用<template>标签包起来，当有多个插槽的时候使用<slot name='xxx'></slot>,使用<template v-slot:xxx></template>。需要接收 prop 的插槽。声明时<slot name='xxx' :scrop='xxx'></slot>使用<template v-slot:xxx='scrop'></template>

2、mixins

mixins混入，复用业务逻辑。声明：mixins = {}，相当于组件的配置项.使用：在组件中通过mixins: [mixins],配置项引入。vue会自动把相同的配置信息合并。

3、vuex

vuex是状态管理仓库，存储公共数据的地方。有以下5个内容。
state：单一状态树，就是一个对象，用来存放数据的地方。
getters：从state 中派生出一些状态。
mutations：更改state状态必须提交mutation，只能同步代码。
actions：Action 提交的是 mutation，而不是直接变更状态。可以是异步操作。
modules：将 store 分割成模块，一个模块就是一个js文件，都包含state、getters、mutations、actions

注：vuex的缺陷，当页面刷新的时候state里面的数据会重置，造成数据丢失，可以通过存储到storage里面解决，一般会使用vuex的插件vuex-persistedstate。

4、路由传参的方式

1. 查询字符串query，在url上?key=value&key=value；
   
2. 动态路由，通过this.$route.params获取；
   
3. eventBus,通过vue.prototype.$bus = new vue绑定事件和触发事件的实例相同，通过$on绑定事件，$off移除事件，$emit触发事件;
4. storage和vuex；
5. 配置meta元信息。

5、组件传参的方式

1. 父组件传子组件props，子组件传父组件$emit('自定义事件',params);
2. 直接访问，通过$root,$parent,$children,$refs.xxx(组件添加ref='xxx'属性)；
3. eventBus,通过vue.prototype.$bus = new vue绑定事件和触发事件的实例相同，通过$on绑定事件，$off移除事件，$emit触发事件;
4. 依赖注入，provide和inject；
5. storage和vuex；

6、vue的常用指令

1. v-for 遍历节点
2. v-if 创建/销毁节点
3. v-show 显示/隐藏节点
4. v-bind 把变量赋值给属性，简写:
5. v-on 绑定事件，简写@
6. v-model 表单数据的双向绑定
7. v-once 只渲染元素和组件一次
8. v-html 更新元素的 innerHTML
9. v-slot 提供具名插槽或需要接收prop的插槽
10. v-else 为v-if提供else模块
11. v-else-if 为v-if提供多选模块

7、vue常用的指令修饰符

1. lazy 把输入框的input事件改为change事件
2. trim 去掉空格
3. number 转换为数字，同parseFloat()函数效果
4. stop 阻止冒泡
5. sync 父子组件传值，子组件更新数据
6. once 事件只执行一次
7. self 只有事件绑定的本身才触发事件
8. prevent 阻止默认事件
9. passive 减少onscroll事件触发频率
10. left right middle 鼠标的按键

8、v-if和v-show的区别

v-if是通过创建/销毁节点的方式显示隐藏节点，v-show通过css的display:none;来隐藏节点。v-if有更高的切换性能消耗，v-show有更高的初始化性能消耗，且不能和template共用。

9、页面跳转的方式

1. 模板导航，<router-link>标签的to="url";
2. js跳转，this.$router.push()、this.$router.replace()、this.$router.go()，replace()不会产生历史记录，一般用于登录页验证后跳转。

10、$route和$router的区别

1. $route是路由实例，可以获取当前页面的参数name、path、params、query等信息；
2. $router是全局路由对象，提供路由跳转的方法。

知识总结，多多益善，经常回顾，温故而知新。