一文带你吃透Vue生命周期（结合案例通俗易懂） |
您所在的位置：网站首页 › vue生命周期作用是什么,有哪些作用 › 一文带你吃透Vue生命周期（结合案例通俗易懂） |
一文带你吃透Vue生命周期（结合案例通俗易懂）
|
文章目录
本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段
2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置
3.
n
e
x
t
T
i
c
k
和
nextTick和
nextTick和refs知识3.0 $refs-获取DOM3.1 $refs-获取组件对象3.2 $nextTick使用Vue更新DOM-异步的
3.3 $nextTick使用场景3.4 组件name属性使用
4. 案例 - 购物车4.0 案例-购物车-项目初始化4.1 案例-购物车-头部自定义4.2 案例-购物车-请求数据4.3 案例-购物车-数据渲染4.4 案例-购物车-商品选中4.5 案例-购物车-数量控制4.6 案例-购物车-全选功能4.7 案例-购物车-总数量4.8 案例-购物车-总价
面试题1、Vue 的 nextTick 的原理是什么? （高薪常问）2、vue生命周期总共分为几个阶段？（必会）3、第一次加载页面会触发哪几个钩子函数？（必会）
写在最后
本篇学习目标
掌握vue组件生命周期掌握axios的使用了解$refs, $nextTick使用和name使用能够完成购物车案例开发
1. vue生命周期
1.0_人的-生命周期
一组件从 创建 到 销毁 的整个过程就是生命周期
Vue_生命周期
目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行 作用: 特定的时间点，执行特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 分类: 4大阶段8个方法 初始化挂载更新销毁 阶段方法名方法名初始化beforeCreatecreated挂载beforeMountmounted更新beforeUpdateupdated销毁beforeDestroydestroyed官网文档 下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
目标: 掌握初始化阶段2个钩子函数作用和执行时机 含义讲解: 1.new Vue() – Vue实例化(组件也是一个小的Vue实例) 2.Init Events & Lifecycle – 初始化事件和生命周期函数 3.beforeCreate – 生命周期钩子函数被执行 4.Init injections&reactivity – Vue内部添加data和methods等 5.created – 生命周期钩子函数被执行, 实例创建 6.接下来是编译模板阶段 –开始分析 7.Has el option? – 是否有el选项 – 检查要挂到哪里 没有. 调用$mount()方法 有, 继续检查template选项
components/Life.vue - 创建一个文件 export default { data(){ return { msg: "hello, Vue" } }, // 一. 初始化 // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前" beforeCreate(){ console.log("beforeCreate -- 执行"); console.log(this.msg); // undefined }, // data和methods初始化以后 // 场景: 网络请求, 注册全局事件 created(){ console.log("created -- 执行"); console.log(this.msg); // hello, Vue this.timer = setInterval(() => { console.log("哈哈哈"); }, 1000) } }App.vue - 引入使用 1. 生命周期 import Life from './components/Life' export default { components: { Life } } 1.3_挂载阶段目标: 掌握挂载阶段2个钩子函数作用和执行时机 含义讲解: 1.template选项检查 有 - 编译template返回render渲染函数 无 – 编译el选项对应标签作为template(要渲染的模板) 2.虚拟DOM挂载成真实DOM之前 3.beforeMount – 生命周期钩子函数被执行 4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上 5.真实DOM挂载完毕 6.mounted – 生命周期钩子函数被执行
components/Life.vue - 创建一个文件 学习生命周期 - 看控制台打印 {{ msg }} export default { // ...省略其他代码 // 二. 挂载 // 真实DOM挂载之前 // 场景: 预处理data, 不会触发updated钩子函数 beforeMount(){ console.log("beforeMount -- 执行"); console.log(document.getElementById("myP")); // null this.msg = "重新值" }, // 真实DOM挂载以后 // 场景: 挂载后真实DOM mounted(){ console.log("mounted -- 执行"); console.log(document.getElementById("myP")); // p } } 1.4_更新阶段目标: 掌握更新阶段2个钩子函数作用和执行时机 含义讲解: 1.当data里数据改变, 更新DOM之前 2.beforeUpdate – 生命周期钩子函数被执行 3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM 4.updated – 生命周期钩子函数被执行 5.当有data数据改变 – 重复这个循环
components/Life.vue - 创建一个文件 准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始 学习生命周期 - 看控制台打印 {{ msg }} {{ val }} 点击末尾加值 export default { data(){ return { msg: "hello, Vue", arr: [5, 8, 2, 1] } }, // ...省略其他代码 // 三. 更新 // 前提: data数据改变才执行 // 更新之前 beforeUpdate(){ console.log("beforeUpdate -- 执行"); console.log(document.querySelectorAll("#myUL>li")[4]); // undefined }, // 更新之后 // 场景: 获取更新后的真实DOM updated(){ console.log("updated -- 执行"); console.log(document.querySelectorAll("#myUL>li")[4]); // li } } 1.5_销毁阶段目标: 掌握销毁阶段2个钩子函数作用和执行时机 含义讲解: 1.当$destroy()被调用 – 比如组件DOM被移除(例v-if) 2.beforeDestroy – 生命周期钩子函数被执行 3.拆卸数据监视器、子组件和事件侦听器 4.实例销毁后, 最后触发一个钩子函数 5.destroyed – 生命周期钩子函数被执行
components/Life.vue - 准备生命周期方法(Life组件即将要被删除) export default { // ...省略其他代码 // 四. 销毁 // 前提: v-if="false" 销毁Vue实例 // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法 beforeDestroy(){ // console.log('beforeDestroy -- 执行'); clearInterval(this.timer) }, destroyed(){ // console.log("destroyed -- 执行"); } }主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段 销毁组件 data(){ return { show: true } }, 2. axios 2.0_axios基本使用axios文档 特点 支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现, 内部通过Promise封装的axios的基本使用 axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx: xxx } }).then(res => { console.log(res.data) // 后台返回的结果 }).catch(err => { console.log(err) // 后台报错返回 }) 2.1_axios基本使用-获取数据目标: 调用文档最后_获取所有图书信息接口 功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台 接口: 参考预习资料.md – 接口文档 引入: 下载axios, 引入后才能使用 效果:
例子如下: components/UseAxios.vue 1. 获取所有图书信息 点击-查看控制台 // 目标1: 获取所有图书信息 // 1. 下载axios // 2. 引入axios // 3. 发起axios请求 import axios from "axios"; export default { methods: { getAllFn() { axios({ url: "http://123.57.109.30:3006/api/getbooks", method: "GET", // 默认就是GET方式请求, 可以省略不写 }).then((res) => { console.log(res); }); // axios()-原地得到Promise对象 }, } }; 2.2_axios基本使用-传参目标: 调用接口-获取某本书籍信息 功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台 接口: 参考预习资料.md – 接口文档 效果:
例子如下: components/UseAxios.vue 2. 查询某本书籍信息 查询 import axios from "axios"; export default { data() { return { bName: "" }; }, methods: { // ...省略了查询所有的代码 findFn() { axios({ url: "/api/getbooks", method: "GET", params: { // 都会axios最终拼接到url?后面 bookname: this.bName } }).then(res => { console.log(res); }) } }, }; 2.3_axios基本使用-发布书籍目标: 完成发布书籍功能 功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台 接口: 参考预习资料.md – 接口文档 效果:
例子如下: components/UseAxios.vue 3. 新增图书信息 发布 import axios from "axios"; export default { data() { return { bName: "", bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了 bookname: "", author: "", publisher: "" } }; }, methods: { // ...省略了其他代码 sendFn(){ axios({ url: "/api/addbook", method: "POST", data: { appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a", ...this.bookObj // 等同于下面 // bookname: this.bookObj.bookname, // author: this.bookObj.author, // publisher: this.bookObj.publisher } }) } }, }; 2.4_axios基本使用-全局配置目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置 axios.defaults.baseURL = "http://123.57.109.30:3006" // 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面 getAllFn() { axios({ url: "/api/getbooks", method: "GET", // 默认就是GET方式请求, 可以省略不写 }).then((res) => { console.log(res); }); // axios()-原地得到Promise对象 }, 3. n e x t T i c k 和 nextTick和 nextTick和refs知识 3.0 $refs-获取DOM目标: 利用 ref 和 $refs 可以用于获取 dom 元素 components/More.vue 1. 获取原生DOM元素 我是一个孤独可怜又能吃的h1 // 目标: 获取组件对象 // 1. 创建组件/引入组件/注册组件/使用组件 // 2. 组件起别名ref // 3. 恰当时机, 获取组件对象 export default { mounted(){ console.log(document.getElementById("h")); // h1 console.log(this.$refs.myH); // h1 } }总结: 通过id / ref, 都可以获取原生DOM标签 3.1 $refs-获取组件对象目标: 获取组件对象, 调用组件里方法 components/Child/Demo.vue 我是Demo组件 export default { methods: { fn(){ console.log("demo组件内的方法被调用了"); } } }More.vue - 获取组件对象 - 调用组件方法 1. 获取原生DOM元素 我是一个孤独可怜又能吃的h12. 获取组件对象 - 可调用组件内一切 // 目标: 获取组件对象 // 1. 创建组件/引入组件/注册组件/使用组件 // 2. 组件起别名ref // 3. 恰当时机, 获取组件对象 import Demo from './Child/Demo' export default { mounted(){ console.log(document.getElementById("h")); // h1 console.log(this.$refs.myH); // h1 let demoObj = this.$refs.de; demoObj.fn() }, components: { Demo } }总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量 3.2 $nextTick使用 Vue更新DOM-异步的目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值 components/Move.vue - 继续新增第三套代码 1. 获取原生DOM元素 我是一个孤独可怜又能吃的h12. 获取组件对象 - 可调用组件内一切 3. vue更新DOM是异步的 {{ count }} 点击count+1, 马上提取p标签内容 // 目标: 获取组件对象 // 1. 创建组件/引入组件/注册组件/使用组件 // 2. 组件起别名ref // 3. 恰当时机, 获取组件对象 import Demo from './Child/Demo' export default { mounted(){ console.log(document.getElementById("h")); // h1 console.log(this.$refs.myH); // h1 let demoObj = this.$refs.de; demoObj.fn() }, components: { Demo }, data(){ return { count: 0 } }, methods: { btn(){ this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务) console.log(this.$refs.myP.innerHTML); // 0 // 原因: Vue更新DOM异步 // 解决: this.$nextTick() // 过程: DOM更新完会挨个触发$nextTick里的函数体 this.$nextTick(() => { console.log(this.$refs.myP.innerHTML); // 1 }) } } }总结: 因为DOM更新是异步的 3.3 $nextTick使用场景目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失 ![ n e x t T i c k 使 用 ] ( i m a g e s / nextTick使用](images/ nextTick使用](images/nextTick使用.gif) components/Tick.vue 点击我进行搜索 // 目标: 点按钮(消失) - 输入框出现并聚焦 // 1. 获取到输入框 // 2. 输入框调用事件方法focus()达到聚焦行为 export default { data(){ return { isShow: false } }, methods: { async btn(){ this.isShow = true; // this.$refs.myInp.focus() // 原因: data变化更新DOM是异步的 // 输入框还没有挂载到真实DOM上 // 解决: // this.$nextTick(() => { // this.$refs.myInp.focus() // }) // 扩展: await取代回调函数 // $nextTick()原地返回Promise对象 await this.$nextTick() this.$refs.myInp.focus() } } } 3.4 组件name属性使用目标: 可以用组件的name属性值, 来注册组件名字 问题: 组件名不是可以随便写的? 答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格 components/Com.vue 我是一个Com组件 export default { name: "ComNameHaHa" // 注册时可以定义自己的名字 }App.vue - 注册和使用 1. 生命周期 销毁组件 2. axios使用 3. $refs的使用 4. $nextTick使用场景 5. 组件对象里name属性 import Life from './components/Life' import UseAxios from './components/UseAxios' import More from './components/More' import Tick from './components/Tick' import Com from './components/Com' export default { data(){ return { show: true } }, components: { Life, UseAxios, More, Tick, [Com.name]: Com // 对象里的key是变量的话[]属性名表达式 // "ComNameHaHa": Com } } 4. 案例 - 购物车
目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块 vue create shopcar yarn add bootstrap yarn add less [email protected] -D图示:
MyHeader组件 MyFooter组件 MyGoods组件 - 商品 MyCount组件 然后引入到App.vue上注册 在main.js中引入bootStrap库 import "bootstrap/dist/css/bootstrap.css" // 引入第三方包里的某个css文件MyHeader.vue 购物车案例 export default { } .my-header { height: 45px; line-height: 45px; text-align: center; background-color: #1d7bff; color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 2; }MyGoods.vue 
商品名字
¥ 100
数量组件
export default {
}
.my-goods-item {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
.left {
img {
width: 120px;
height: 120px;
margin-right: 8px;
border-radius: 10px;
}
.custom-control-label::before,
.custom-control-label::after {
top: 50px;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.top{
font-size: 14px;
font-weight: 700;
}
.bottom {
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
.price {
color: red;
font-weight: bold;
}
}
}
}
目标: 完成商品组件右下角商品组件的开发
components/MyCount.vue - + export default { } .my-counter { display: flex; .inp { width: 45px; text-align: center; margin: 0 10px; } .btn, .inp{ transform: scale(0.9); } }components/MyFooter.vue 全选 合计: ¥ 0 结算 ( 0 ) export default { } .my-footer { position: fixed; z-index: 2; bottom: 0; width: 100%; height: 50px; border-top: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; background: #fff; .price { color: red; font-weight: bold; font-size: 15px; } .footer-btn { min-width: 80px; height: 30px; line-height: 30px; border-radius: 25px; padding: 0; } } 4.1 案例-购物车-头部自定义目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验 思路 在MyHeader.vue中准备props里变量, 然后使用在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)MyHeader.vue {{ title }} // 目标: 让Header组件支持不同的项目 - 自定义 // 1. 分析哪些可以自定义 (背景色, 文字颜色, 文字内容) // 2. (新) 可以对props的变量的值 进行校验 // 3. 内部使用props变量的值 // 4. 外部使用时, 遵守变量名作为属性名, 值的类型遵守 export default { props: { background: String, // 外部插入此变量的值, 必须是字符串类型, 否则报错 color: { type: String, // 约束color值的类型 default: "#fff" // color变量默认值(外部不给 我color传值, 使用默认值) }, title: { type: String, required: true // 必须传入此变量的值 } } } .my-header { height: 45px; line-height: 45px; text-align: center; background-color: #1d7bff; color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 2; }App.vue传入相应自定义的值 总结: props: [] - 只能声明变量和接收, 不能类型校验 props: {} - 声明变量和校验类型规则 - 外部传入值不对则报错 4.2 案例-购物车-请求数据目标: 使用axios把数据请求回来 数据地址: https://www.escook.cn/api/cart (get方式) 下载axios yarn add axios main.js - 原型上挂载 // 目标: 请求数据 - 打印 // 1. 下载axios库, main.js - 全局绑定属性 (确保任意.vue文件可以都访问到这个axios方法) import axios from 'axios' // 2. 基础地址 axios.defaults.baseURL = "https://www.escook.cn" // 3. axios方法添加到Vue的原型上 Vue.prototype.$axios = axios new Vue({ render: h => h(App), }).$mount('#app') App.vue请求使用 export default { data(){ return { list: [] // 商品所有数据 } }, created(){ // 不必在自己引入axios变量, 而是直接使用全局属性$axios this.$axios({ url: "/api/cart" }).then(res => { console.log(res); this.list = res.data.list }) } }总结: 利用axios, 调用接口, 把数据请求回来 4.3 案例-购物车-数据渲染目标: 把上面请求的数据, 铺设到页面上 App.vue MyGoods.vue MyCount.vue - + export default { props: { obj: Object // 商品对象 } }总结: 把各个组件关联起来, 把数据都铺设到页面上 4.4 案例-购物车-商品选中问题: 点击发现总是第一个被选中 原来id和for都是"input" 但是id是唯一的啊, 所以用数据的id来作为标签的id, 分别独立, 为了兼容label点击图片也能选中的效果 总结: lable的for值对应input的id, 点击label就能让对应input处于激活 4.5 案例-购物车-数量控制目标: 点击+和-或者直接修改输入框的值影响商品购买的数量 - + // 目标: 商品数量 - 控制 // 1. 外部传入数据对象 // 2. v-model关联对象的goods_count属性和输入框 (双向绑定) // 3. 商品按钮 +和-, 商品数量最少1件 // 4. 侦听数量改变, 小于1, 直接强制覆盖1 export default { props: { obj: Object // 商品对象 }, // 因为数量控制要通过对象"互相引用的关系"来影响外面对象里的数量值, 所以最好传 对象进来 watch: { obj: { deep: true, handler(){ // 拿到商品数量, 判断小于1, 强制修改成1 if (this.obj.goods_count < 1) { this.obj.goods_count = 1 } } } } } 4.6 案例-购物车-全选功能目标: 在底部组件上, 完成全选功能
思路: 点击获取它的选中状态同步给上面每个小选框 - 而小选框的选中状态又在数组里把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的MyFooter.vue 全选 合计: ¥ {{ allPrice }} 结算 ( {{ allCount }} ) // 目标: 全选 // 1. v-model关联全选-复选框(v-model后变量计算属性) // 2. 页面(视频层)v(true) -> 数据层(变量-) 计算属性(完整写法) // 3. 把全选 true/false同步给所有小选框选中状态上 // 小选 -> 全选 // App.vue里list数组 -> MyFooter.vue // isAll的get方法里, 统计状态影响全选框 // 目标: 总数量统计 // 1. allCount计算属性用 数组reduce+判断统计数量并返回 // 目标: 总价 // allPrice计算属性, 数组reduce+单价*数量, 判断选中, 才累加后返回 export default { props: { arr: Array }, computed: { isAll: { set(val){ // val就是关联表单的值(true/false) this.$emit('changeAll', val) }, get(){ // 查找小选框关联的属性有没有不符合勾选的条件 // 直接原地false return this.arr.every(obj => obj.goods_state === true) } }, } }App.vue methods: { allFn(bool){ this.list.forEach(obj => obj.goods_state = bool) // 把MyFooter内的全选状态true/false同步给所有小选框的关联属性上 } }总结: 全选的v-model的值, 使用计算属性完整写法 4.7 案例-购物车-总数量目标: 完成底部组件, 显示选中的商品的总数量 MyFooter.vue allCount(){ return this.arr.reduce((sum, obj) => { if (obj.goods_state === true) { // 选中商品才累加数量 sum += obj.goods_count; } return sum; }, 0) },总结: 对象之间是引用关系, 对象值改变, 所有用到的地方都跟着改变 4.8 案例-购物车-总价目标: 完成选中商品计算价格 components/MyFooter.vue allPrice(){ return this.arr.reduce((sum, obj) => { if (obj.goods_state){ sum += obj.goods_count * obj.goods_price } return sum; }, 0) }总结: 把数组传给了MyFooter组件, 统计总价 面试题 1、Vue 的 nextTick 的原理是什么? （高薪常问） \1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。 \2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver; \3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。 2、vue生命周期总共分为几个阶段？（必会）Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 1**）beforeCreate** 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2**）created** 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3**）beforeMount** 在挂载开始之前被调用：相关的 render 函数首次被调用。 4**）mounted** el 被新创建的 vm. e l 替 换 ， 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm. el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。 5**）beforeUpdate** 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。 6**）updated** 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 7**）activated** keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。 8**）deactivated** keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。 9**）beforeDestroy** 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。 10**）destroyed** Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。 11**）errorCaptured（2.5.0+ 新增）** 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 3、第一次加载页面会触发哪几个钩子函数？（必会）当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数 写在最后✨ 原 创 不 易 ， 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下 👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！ ⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！ ✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！ |
【本文地址】
今日新闻 |
推荐新闻 |