想找人做公司网站要注意什么,网站开发加盟,17做网站联系,运城公司做网站目录 一、引言
1.1. Vue生命周期的具体阶段
1.2. 每个阶段的具体作用和常用场景
1.3. 生命周期钩子函数
二、代码示例
三、运行效果 一、引言
Vue生命周期是指Vue组件实例从创建到销毁的整个过程。在这个过程中#xff0c;组件经历了一系列的阶段#xff0c;每个阶段…目录 一、引言
1.1. Vue生命周期的具体阶段
1.2. 每个阶段的具体作用和常用场景
1.3. 生命周期钩子函数
二、代码示例
三、运行效果 一、引言
Vue生命周期是指Vue组件实例从创建到销毁的整个过程。在这个过程中组件经历了一系列的阶段每个阶段都有其特定的生命周期钩子函数这些钩子函数允许在不同的阶段插入开发人员自定义的代码逻辑。理解Vue生命周期有助于更好地管理组件的状态和行为特别是在数据管理和DOM渲染方面。
1.1. Vue生命周期的具体阶段
生命周期四个阶段① 创建 ② 挂载 ③ 更新 ④ 销毁 1. 创建 beforeCreate在实例创建之前调用此时还没有调用data和methods中的方法。 created实例创建后调用此时已经完成了数据的观测但是尚未挂载DOM$el属性尚不可用。 2. 挂载 beforeMount在挂载之前调用相关的render函数首次被调用可以在此时对实例进行渲染。 mounted实例已经挂载到DOM上后调用此时期已经和DOM进行了关联可以用$el访问到挂载的DOM元素。 3. 更新 beforeUpdate数据更新时调用发生在虚拟DOM打补丁之前。 updated数据更新后调用虚拟DOM已经打补丁之后。 4. 销毁 beforeDestroy实例销毁之前调用。 destroyed实例已销毁后调用。 1.2. 每个阶段的具体作用和常用场景
created常用于发起网络请求因为此时已经完成了数据的观测但尚未挂载DOM。mounted常用于操作DOM元素因为此时实例已经挂载到DOM上。updated常用于执行依赖于DOM的操作因为此时虚拟DOM已经更新。beforeDestroy常用于进行清理工作如移除事件监听器等因为实例即将销毁。
1.3. 生命周期钩子函数
Vue生命周期过程中会自动运行一些函数被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。 二、代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},// 1. 创建阶段准备数据beforeCreate () {console.log(beforeCreate 响应式数据准备好之前, this.count)},created () {console.log(created 响应式数据准备好之后, this.count)// this.数据名 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段渲染模板beforeMount () {console.log(beforeMount 模版渲染之前, document.querySelector(h3.innerHTML))},mounted () {console.log(mounted 模板渲染之后, document.querySelector(h3.innerHTML))// 可以开始操作dom了},// 3. 更新阶段beforeUpdate () {console.log(beforeUpdate 数据改了视图还没更新, document.querySelector(span).innerHTML)},updated () {console.log(updated 数据改了视图已经更新, document.querySelector(span).innerHTML)},// 4. 销毁阶段beforeDestroy () {console.log(beforeDestroy销毁前)console.log(清除掉一些Vue以外的资源占用如定时器、延时器等等)},destroyed () {console.log(destroyed销毁后)}})/script
/body/html
三、运行效果 注因为销毁阶段涉及到浏览器的关闭这里为了演示销毁在浏览器的控制台里通过调用Vue app实例的destroy()方法。
