#vue生命周期

生命周期

1.什么是生命周期函数

生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发

1.1 生命周期函数有哪些

创建阶段

• beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this

• created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了

• beforeMount 组件挂载之前

• mounted 组件挂载之后 这个时候能拿到 dom 节点使用

运行阶段 只要修改 data 就会触发

• beforeUpdate 数据变了 视图还没变
• updated 数据变了 视图也变了

销毁阶段

• beforeDestory 组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
• destoryed 组件销毁之后

除了这八个 还有 三个 如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数 activated 组件激活 deactivated 组件停用 errorCaptured 子组件出错的时候会触发这个钩子函数

1.2 项目开发中 在生命周期里都做过什么功能

我在写效果的过程中 会在 created 或者 mounted 中发送 http 请求

created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求 mounted 的特点是可以操作 dom 节点

还会用 created 钩子函数 获取 本地存储的数据

1.3 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

自己试一试 把顺序写一下

页面—beforeCreate

页面—created

页面—beforeMount

组件—beforeCreate

组件—created

组件—beforeMount

组件—mounted

页面—mounted

2.vuex 的理解

vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用 一共有五大核心 state 存放公共数据的地方 通过 this.store.state.xxx调用mutations修改state的地方只有这里能修改通过this.store.state.xxx调用mutations修改state的地方只有这里能修改通过this.store.commit 调用 getters 相当于是之前的计算属性 通过 this.store.getters调用actions执行异步操作的地方通过this.store.getters调用actions执行异步操作的地方通过this.store.dispatch 调用 modules 模块化

vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储

vuex 的执行机制

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

三.路由的模式 以及原理 区别

⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的.以上就是我对 vue 路由模式的理解