老板说做个网站我要怎么做,快速生成网站程序,在网站里文本链接怎么做,光效网站生命周期
生命周期 vue 组件实例都有自己的一个生命周期 从创建-初始化数据-编译模版-挂载实例到 DOM-数据变更后更新 DOM -卸载组件 生命周期简单说就是 vue 实例从创建到销毁的过程
生命周期钩子
在各个周期运行时#xff0c;会执行钩子函数…生命周期
生命周期 vue 组件实例都有自己的一个生命周期 从创建-初始化数据-编译模版-挂载实例到 DOM-数据变更后更新 DOM -卸载组件 生命周期简单说就是 vue 实例从创建到销毁的过程
生命周期钩子
在各个周期运行时会执行钩子函数让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子
官方示意图 生命周期钩子函数
钩子函数说明beforeCreate在实例初始化之后 调用created实例已经创建完成之后调用beforeMount在挂载开始之前被调用mounted在组件挂载完成后执行beforeUpdate在组件即将因为响应式状态变更而更新其 DOM 树之前调用updated在组件因为响应式状态变更而更新其 DOM 树之后调用beforeDestroy实例销毁之前调用destroyed实例销毁后调用
script langts setup
import {ref,reactive,onBeforeMount, // 在组件挂载之前执行的函数onMounted,onBeforeUpdate, // 在组件修改之前执行的函数onUpdated,onBeforeUnmount, // 在组件卸载之前执行的函数onUnmounted
} from vue// setup 替代了 beforeCreate setup// reactive 创建响应式对象
let data reactive({// 定义响应式数据count: 0
})const clickMe () {data.countalert(hi)
}console.log(1-开始创建组件-----setup())onBeforeMount(() {console.log(2-组件挂载到页面之前执行-----onBeforeMount())
})onMounted(() {console.log(3-组件挂载到页面之后执行-----onMounted())
})
onBeforeUpdate(() {console.log(4-组件更新之前-----onBeforeUpdate())
})onUpdated(() {console.log(5-组件更新之后-----onUpdated())
})onBeforeUnmount(() {console.log(6-组件卸载之前-----onBeforeUnmount())
})
onUnmounted(() {console.log(7-组件卸载之后-----onUnmounted())
})
/scripttemplatediv classcontainerp数字为{{ data.count }}/pbutton clickclickMe修改数据/button/div
/templatestyle langscss scoped
.container {
}
/styleVUE3 与 VUE2 生命周期的对比
setup 方式 vue2 vue3beforeCreate - setup()
created - setup()
beforeMount - onBeforeMount
mounted - onMounted
beforeUpdate - onBeforeUpdate
updated - onUpdated
beforeDestroy - onBeforeUnmount
destroyed - onUnmounted
activated - onActivated
deactivated - onDeactivated
errorCaptured - onErrorCaptured通过这样对比 可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。 BeforeDestroy 变成了 onBeforeUnmount destroyed 变成了 onUnmounted
尤大的介绍是 mount 比 Destroy 更形象也和 beforeMount 相对应。
onServerPrefetch() (ssr) 在组件实例在服务器上被渲染之前调用
