知识点

2020-02-04 本文已影响0人 jocode

一、props特性

传入对象形式进行props校验，
required：true 必须要有值
props不可以直接修改，用 $emit()修改非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

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

七、动态路由

八、导航守卫

全局守卫
全局前置 beforeEach
全局后置 afterEach
全局解析 beforeResolve
路由独享守卫
进入之前 beforeEnter
组件级别的守卫
进入之前 beforeRouteEnter
更新之前 beforeRouteUpdate
离开之前 beforeRouteLeave

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

其实就是一个发布订阅模式。是通过一个空的vue实例对象，然后调用这个对象的 $on去做订阅。再通过$ 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对象
1. getters 自动接收到的当前state的getters对象
1. 必须有返回值
1. 它也不能直接修改
  mutations: 修改 state 的唯一操作就是提交 mutation。
唯一能修改仓库state数据的地方
1. state 是自动接收到的当前的state对象
1. payload 是提交这个 mutation 时，传递过来的参数
  actions: 类似于 mutations , 用来处理异步。
存放异步的动作，它也不能直接去修改state的。而是在里面调用了mutation
1. context 是自动接收到的当前的 store 实例对象（上下文）它里面有 state、getters、commit、dispatch 等。
1. payload 是派发这个 action 时，传递过来的参数
  modules: 对仓库分割成模块

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

十一、vue 的组件库

elementui PC端
mintui mobile端
vant mobile端有赞
vux mobile端
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 不可以。

知识点