微信视频网站建设多少钱长春网络建设公司

微信视频网站建设多少钱,长春网络建设公司,wordpress中介模板,wordpress 配置价格表vue的生命周期到底是什么#xff1f;这里举一个例子#xff0c;人的一生有出生到死亡的过程#xff0c;vue也有产生到销毁的过程vue的生命周期就是vue组件创建到销毁的过程#xff0c;即vue的一生在vue中#xff0c;主要包含8个生命周期钩子生命周期钩子生命周期函数生命周…vue的生命周期到底是什么这里举一个例子人的一生有出生到死亡的过程vue也有产生到销毁的过程vue的生命周期就是vue组件创建到销毁的过程即vue的一生在vue中主要包含8个生命周期钩子生命周期钩子生命周期函数生命周期事件在此之前了解data的数据el是DOM即浏览器页面内容beforeCreate创建前在 Vue 实例初始化后数据观测和事件配置前调用此时 el 和 data 并未初始化因此无法访问 methods、computed 等方法和数据。el和data都没有created创建后Vue 实例创建后被立即调用即 HTML 加载完成前。此时Vue 实例已完成数据观测、属性和方法的运算、watch/event 事件回调、data 数据的初始化。然而挂载阶段还没有开始el 属性目前不可见。这是一个常用的生命周期钩子函数可以调用 methods 中的方法、改变 data 中的数据、获取 computed 中的计算属性等通常在此钩子函数中对实例进行预处理。有data无elbeforeMount载入前挂载开始前被调用Vue 实例已完成编译模板、把 data 里面的数据和模板生成 HTML、el 和 data 初始化注意此时还没有挂载 HTML 到页面上。有data无elmounted载入后页面加载后调用该函数这是一个常用的生命周期钩子函数一般是第一个业务逻辑在此钩子开始mounted 只会执行一次。data和el都有beforeUpdate更新前在数据更新前被调用发生在虚拟 DOM 重新渲染和打补丁之前可以在该钩子中进一步更改状态不会触发附加的重渲染过程。data和el都有updated更新后在由数据更改导致虚拟 DOM 重新渲染和打补丁时调用调用时DOM 已经更新所以可以执行依赖于 DOM 的操作应该避免在此期间更改状态这可能会导致更新无限循环。data和el都有beforeUnmount/beforeDestory销毁前Vue 实例销毁前调用离开页面前调用这是一个常用的生命周期钩子函数一般在此时做一些重置的操作例如清除定时器和监听的 DOM 事件。data和el都有unmounted/Destoryed销毁后在实例销毁后调用调用后事件监听器被移出所有子实例也被销毁。data和el都有beforeCreate实例创建前此时el和data都未初始化created实例创建后data已初始化但el未挂载beforeMount挂载前el已编译为虚拟DOM但未挂载到页面mounted挂载后el已挂载到页面可访问真实DOMbeforeUpdate数据更新前el和data都是旧值updated数据更新后el和data都是新值beforeUnmount卸载前el和data都还可用unmounted卸载后el和data都不可用代码示例在vue中输入以下代码进行测试template div v-ifisShow classhook-test p当前计数{{ count }}/p button clickcount更新数据/button button clickisShow false销毁组件/button /div /template script export default { name: Vue3HookTest, data() { return { count: 0, // 测试更新的响应式数据 isShow: true // 控制组件挂载/卸载 }; }, // 1. 创建前 beforeCreate() { console.log( beforeCreate ); console.log(el, this.$el); console.log(data, this.$data); }, // 2. 创建后 created() { console.log( created ); console.log(el, this.$el); console.log(data, this.$data); }, // 3. 挂载前 beforeMount() { console.log( beforeMount ); console.log(el, this.$el); console.log(data, this.$data); }, // 4. 挂载后 mounted() { console.log( mounted ); console.log(el, this.$el); console.log(data, this.$data); }, // 5. 更新前 beforeUpdate() { console.log( beforeUpdate ); console.log(el, this.$el); console.log(data, this.$data); }, // 6. 更新后 updated() { console.log( updated ); console.log(el, this.$el); console.log(data, this.$data); }, // 7. 卸载前Vue3 替换 beforeDestroy beforeUnmount() { console.log( beforeUnmount ); console.log(el, this.$el); console.log(data, this.$data); }, // 8. 卸载后Vue3 替换 destroyed unmounted() { console.log( unmounted ); console.log(el, this.$el); console.log(data, this.$data); } }; /script style scoped .hook-test { padding: 20px; border: 1px solid #eee; margin: 20px; } button { margin: 0 10px; padding: 5px 10px; cursor: pointer; } /style代码运行后浏览器页面如下此时我们可以看出el直到mounted后才出现data在created后才出现现在让数字1发现el改变即el进行了更新之后进行销毁发现组件消失页面el和data已经清除但仍然存在el不再指向任何对象data还可以访问到数据对象但组件实例已销毁数据不再具有响应式能力也不再触发更新钩子代码输出总结1.beforeCreate创建前执行时机Vue 实例初始化之后数据观测响应式处理、方法 / 事件配置之前。输出结果elundefined此时还未开始处理 DOM没有根元素。dataundefineddata 还未被初始化响应式系统未启动。阶段特征实例仅完成最基础的初始化核心的响应式数据、方法、DOM 都未就绪。2.created创建后执行时机Vue 实例创建完成后已完成数据观测、方法 / 事件配置但 DOM 挂载还未开始。输出结果elundefined仍未处理 DOM模板还未编译渲染。data{ count: 0, isShow: true }data 已初始化响应式系统生效可访问 / 修改数据。阶段特征可操作数据和方法但不能操作 DOM因为 DOM 还未生成。3.beforeMount挂载前执行时机模板编译完成虚拟 DOM 已生成即将挂载到页面真实 DOM 中。输出结果elVue3 中此处为undefined与 Vue2 不同Vue3 在beforeMount阶段还未创建真实 DOM 根元素虚拟 DOM 尚未渲染为真实 DOM。data{ count: 0, isShow: true }数据保持正常无变化。阶段特征模板已解析等待将虚拟 DOM 挂载为真实 DOM。4.mounted挂载后执行时机虚拟 DOM 已渲染为真实 DOM且挂载到页面中$el指向真实根 DOM 元素。输出结果eldiv classhook-test.../div真实的 DOM 元素可通过$el操作 DOM。data{ count: 0, isShow: true }数据正常。阶段特征DOM 已就绪可执行 DOM 操作如获取元素、绑定事件、发起异步请求等是最常用的钩子之一。5.beforeUpdate更新前执行时机响应式数据发生变化后虚拟 DOM 重新渲染之前仅在mounted之后数据更新时触发。触发方式点击 “更新数据” 按钮count自增触发该钩子。输出结果el当前的真实 DOM 元素但 DOM 内容还是更新前的旧数据如p当前计数0/p。data更新后的新数据如{ count: 1, isShow: true }。阶段特征数据已更新DOM 尚未同步更新可在此时获取更新前的 DOM 状态。6.updated更新后执行时机虚拟 DOM 重新渲染并完成 DOM 打补丁更新之后。输出结果el更新后的真实 DOM 元素DOM 内容已同步新数据如p当前计数1/p。data更新后的新数据如{ count: 1, isShow: true }。阶段特征DOM 已与新数据同步可在此处处理更新后的 DOM 逻辑注意避免在这修改数据否则会触发无限更新循环。7.beforeUnmount卸载前执行时机组件即将被卸载销毁之前仅在isShow设为false组件即将从 DOM 中移除时触发。触发方式点击 “销毁组件” 按钮isShow变为false触发该钩子。输出结果el仍为组件的真实 DOM 元素DOM 还未被移除。data{ count: n, isShow: false }数据仍可访问。阶段特征组件实例仍完全可用可在此处清理资源如清除定时器、解绑自定义事件、取消异步请求等。8.unmounted卸载后执行时机组件已被完全卸载从 DOM 中移除之后。输出结果elundefinedDOM 元素已被移除$el不再指向任何元素。data仍可访问到数据对象但组件实例已销毁数据不再具有响应式能力也不再触发更新钩子。阶段特征组件的所有指令解绑、事件监听器移除、子实例销毁资源已全部清理。组件的一生至此我们可以概括vue生命周期就是组件从产生到灭亡的过程。在其中要关注到$el和$data。1.初始化阶段首次渲染beforeCreate → created → beforeMount → mounted2.数据更新阶段beforeUpdate → updated可多次触发每次数据更新都会执行3.组件卸载阶段beforeUnmount → unmounted仅触发一次组件销毁时执行