vue2.自我笔记

1.vue2 的生命周期函数

指的是 vue 实例从创建到销毁的过程中 在特定的时间会自动 触发的函数 生命周期函数又叫钩子函数

1.1 生命周期函数都有哪些

创建阶段的四个 beforeCreate 创建前 不能拿到 data 和 methods 来用 created 创建后 是最早可以拿到 data 和 methods 来用的 beforeMount 组件挂载前 mounted 组件挂载后 才能拿到 dom 来操作

运行阶段的两个 数据更新会触发 beforeUpdate 视图更新前 updated 视图更新后

销毁阶段的两个 beforeDestory 销毁前 最后可以拿到 data 和 methods 来用的钩子函数 destoryed 销毁后

除了这八个常用的还有三个不常用的 跟 keep-alive 相关的两个钩子函数 activated 组件激活 deactivated 组件销毁

errorCaptured 子组件报错 时候会触发

1.2 使用的场景

在项目开发的过程中 我会在 created 中发送 http 请求 或者获取本地存储的数据 除了 created 外还能在 mounted 中发送请求 created 用的比较多是因为 created 会更早执行 在 mounted 中可以操作 dom 元素

1.3 父子组件的生命周期函数的执行顺序

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

二：vuex

2.1 什么是 vuex 能解决什么问题

vuex 是 vue 的状态管理工具，用来存放公共数据，解决组件之间数据共享的问题

2.2 vuex 的五大核心

state 存放状态的地方 调用方法：this.$store.state.xxx mutations 修改 state 的地方 调用方法：this.$store.commit actions 执行异步操作的地方 调用方法：this.$store.dispatch getters 相当于是计算属性 调用方法：this.$store.getters modules 模块化

2.3 vuex 的运行机制

我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions ⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

2.4vuex 的弊端是什么?怎么解决?

vuex 数据刷新会丢失 我们需要存在本地存储里 或者使用持久化插件 vuex-persist 保持数据不丢失

2.5 vuex 的严格模式

跟 data 同级定义 trict: true,就是开启严格模式 在严格模式下 只能通过 nutations 修改 state 要不就会报错 只适合在开发环境下开启 生产环境下不适合开启

2.6 modules

是模块化的意思 把 vuex 仓库里的公共数据分模块管理