|
所谓的生命周期函数就是在某一时刻会自动执行的函数
外部vue的链接地址：https://unpkg.com/vue@next
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期函数</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 生命周期函数---在某一时刻会自动执行的函数！ -->
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
name: "小盖同学"
}
},
// 在组件内容被渲染到页面之前自动执行的函数
beforeMount() {
console.log(document.getElementById("root").innerHTML, 'beforeMount');
},
//在组件内容被渲染到页面之后执行的函数
mounted() {
console.log(document.getElementById("root").innerHTML, 'mount');
},
// beforeCreate在实例生成之前执行的函数
beforeCreate() {
console.log("beforeCreate")
},
// created在实例生成之后执行的函数
created() {
console.log("created")
},
// 在data数据改变之前执行的函数
beforeUpdate() {
console.log(document.getElementById("root").innerHTML, "beforeUpdate")
},
// 当data数据改变之后执行的函数
updated() {
console.log(document.getElementById("root").innerHTML, "update")
},
// 在vue应用失效之前执行的函数
beforeUnmount() {
console.log(document.getElementById("root").innerHTML, "beforeUnmont")
},
// 在vue应用失效之后执行的函数,并且dom元素完全被销毁的时候执行的函数
unmounted() {
console.log(document.getElementById("root").innerHTML, "Unmonted")
},
template: "<b>{{name}}</b>"
});
const vm = app.mount("#root");
</script>
</html>
|