知识点

一、props特性

传入对象形式进行props校验，
required：true 必须要有值
props不可以直接修改，用attrs 实例属性，可以获取到组件的非props特性的集合
可以设置 inheritAttrs 选项的值为 false 。来禁用非props特性的继承。

二、下面两种情况修改数组时，不会引起页面的更新：

1. 直接通过数组的下标去修改数组项目。
2. 直接通过数组的length去修改数组的长度时。

解决方法
针对第一种情况：
1. 全局方法 Vue.set(target, index, newValue)
2. 实例方法 vm.$set(target, index, newValue)
针对第二种情况：
1. 使用数组 splice

三、v-model

在组件上
<lv-input type="text" v-model="msg" /> //双向数据绑定
展开
<lv-input type="text" :value="msg" @input="msg = $event" />

四、.native

在组件上使用的事件默认都是自定义事件。
加.native修饰符变成原生事件，@focus.native="fn2"

五、依赖注入

谁提供数据，就给谁配置 provide 选项
provide () {
return {
color: this.color
}
}
谁要用这份数据，就给谁配置 inject 选项
inject: ['color']

六、keep-alive

1. include 通过设置这个属性，来控制需要缓存的组件
2. exclude 通过设置这个属性，来控制不需要缓存的组件
3. max 通过设置这个属性，来控制最多缓存几个组件

七、动态路由

八、导航守卫

1. 全局守卫
2. 全局前置 beforeEach
3. 全局后置 afterEach
4. 全局解析 beforeResolve
5. 路由独享守卫
6. 进入之前 beforeEnter
7. 组件级别的守卫
8. 进入之前 beforeRouteEnter
9. 更新之前 beforeRouteUpdate
10. 离开之前 beforeRouteLeave

九、中央事件管理器(事件总线)

其实就是一个发布订阅模式。是通过一个空的vue实例对象，然后调用这个对象的emit去做发布

let bus = new Vue()             //创建空对象
created () {
        bus.$on('abc', (name) => {  //创建时订阅一个点击事件，
        this.name = name
    })
}
methods: {
fn1 () {
        bus.$emit('abc', '张三')  //点击时触发发布事件
    }
}

十、store

state: 状态
getters: 对 state 的派生，可以理解为 store 的计算属性

• 存放针对store的state数据或者其他getter数据做的计算属性
• 1. state 自动接收到的当前store的state对象
• 2. getters 自动接收到的当前state的getters对象
• 3. 必须有返回值
• 4. 它也不能直接修改
     mutations: 修改 state 的唯一操作就是提交 mutation。
• 唯一能修改仓库state数据的地方
• 1. state 是自动接收到的当前的state对象
• 2. payload 是提交这个 mutation 时，传递过来的参数
     actions: 类似于 mutations , 用来处理异步。
• 存放异步的动作，它也不能直接去修改state的。而是在里面调用了mutation
• 1. context 是自动接收到的当前的 store 实例对象（上下文）它里面有 state、getters、commit、dispatch 等。
• 2. payload 是派发这个 action 时，传递过来的参数
     modules: 对仓库 分割成 模块

mapState(): sate的辅助函数
mapGetters(): getters的辅助函数
mapMutations(): mutations的辅助函数
mapActions(): actions的辅助函数

十一、vue 的组件库

1. elementui PC端
2. mintui mobile端
3. vant mobile端 有赞
4. vux mobile端
5. ant-design-vue PC端

十二、正向代理

代码的目标网站只有一个的时候：（vue.config.js）的配置文件

module.exports = {
  devServer: {
    proxy: 'https://m.maoyan.com' // 需要代理的目标网站的地址，只写域名就好。
  },
  prot: '9090'  //修改端口号
}

十二、全局组件

data: function() {
        return {
           //返回的数据是不同的数据
          msg: '',
        }
      }

十三、 template

1. template 是 vue 中内置的组件
2. 如果要同时对多个相邻元素做条件渲染时，可以将 v-if 写在 template 上。
3. template 元素不会渲染到页面上，也就不会去影响页面的布局，
    故加不了v-show属性

十四、v-if与v-show的区别

  1. v-if 才是真正的条件渲染，v-show 只是简单的控制元素的样式
  2. v-if 有更高的切换开销。v-show 有更高的初始渲染开销。
  3. 频繁切换使用 v-show 。否则 v-if
  4. v-if 有配套的 v-else v-else-if 。而 v-show 没有
  5. v-if 可以配合 template 使用，而 v-show 不可以。