1.生命周期函数

1.1 什么是生命周期函数

所谓的 vue ⽣命周期就是 vue 实例从创建到销毁的整个过程我们称之为 vue 的 ⽣命周期,通过 vue 的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作. vue ⽣命周期常⽤的钩⼦函数⼀共有 8 个,分别是创 建前后、挂载前后、更新前后以及销毁前后. 分别对应的钩⼦函数为 beforeCreate 创建前、 created 创建后、beforeMount 挂载 前、mounted 挂载后、beforeUpdate 更新前、updated 更新后、beforeDestory 销毁前、 destoryed 销毁后,

除了以上八个 还有三个 activated 激活 deactivated 停用 以上两个跟 keep-alive 有关的 组件的激活和组件的停用 errorCapture 子组件加载错误时触发

1.2 用的最多的是 created

用它来发送 http 请求 还可以获取本地存储里的数据

1.3 created 和 mounted 的区别

created 执行的时机更早 mounted 可以获取到 dom 元素

1.4 如果想在 created 中获取到 dom 元素

使用 nextTick

1.5. 父子组件执行的顺序

父组件 beforeCreate 父组件 created 父组件 beforeMount 子组件 beforeCreate 子组件 created 子组件 beforeMount 子组件 mounted 父组件 mounted

2.nextTick

在 dom 更新之后执行的异步回调 在 vue 中 dom 更新是异步 如果在 dom 还没更新的时候我们想要拿到 dom 节点来用的时候 就要把 代码放在 nextTick 中

3.vuex

3.1 什么是 vuex

vue 的状态管理工具 管理公共数据 放在 vuex 里的数据 能够被所有的组件共享

3.2 vuex 的五大核心 以及 如何调用

state 状态 this.$store.state 调用的时候会通过计算属性computed 把state return出去再用 mutations 方法 this.$store.commit actions 异步操作 this.$store.dispatch getters 相当于是计算属性 this.$store.getters modules 模块化

3.3 vuex 的辅助函数 是 vuex 的语法糖

mapState 展开在计算属性里 mapGetters 展开在计算属性里 mapMutation 展开在方法里 mapAction 展开在方法里

用的时候都先 import 引入

import { mapState, mapMutations } from "vuex";
​
computed: {
    // name() {
    //   return this.$store.state.name;
    // },
​
    ...mapState(["name", "age"]),
  },
  methods: {
    // change() {
    //   this.$store.commit("change")
    // },
    ...mapMutations(["change"]),
    //调用mutation修改name
  },

3.4 modules 怎么使用

当 vuex 里数据很多的时候我们可以分模块管理数据 建立不同的 js 文件 作为我们的模块文件 每一个模块里都有 state 等其他的四大核心 把这个 js 文件引入到 store/index.js 中 在 modules 中注册

使用模块里的数据的时候 this.$store.state.xx(模块名字).arr(state 数据名字)

如果使用模块里的 mutations 方法 首先在模块里跟 state 同级的地方开启一个命名空间 namespaced:true 使用的时候 this.$store.commit("a(模块名字)/add（模块里方法的名字）")