创建阶段和挂载阶段
第一篇：解释篇
<!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>Document</title>
<script src="./../../js/vue.global.js"></script>
</head>
<body>
<div id="box">
{{a}}
<input type="text" id="ipt" ref="txt">
<child ref="child"></child>
</div>
<script>
// 定义一个子组件
let child = {
template: `
<div>
<input type="text">
</div>
`,
data(){
return{
str:"ninhao "
}
},
methods:{
fun(){
console.log(1235);
}
},
}
Vue.createApp({
components:{
child
},
data() {
return {
a:123
}
},
// 创建阶段常用的两个钩子函数
beforeCreate(){ //这个钩子函数是最早的生命周期的钩子函数 使用频率不高 拿不到任何数据
console.log("app beforeCreate",this.a);
},
created(){ //可以拿到数据 常用
console.log("app create",this.a);
},
// 挂载阶段
beforeMounted(){
console.log("app beforeMounted",this.a , this);
},
mounted(){
console.log("app mounted",this.a,this);
let res = this.$refs.txt // 可以用ref去标识节点 可以用ref去表示组件
res.focus();
console.log(this.$refs.child.str.focus); // 父组件通过ref标识访问子组件的数值
console.log(this.$refs.child.fun); //父组件通过ref标识访问子组件的方法
}
}).mount("#box")
</script>
<!--
生命周期的钩子函数
在组建的生命周期的过程中自动调用的函数
四个阶段
创建阶段
beforeCreate组件实例初始化之后 自动调用
created 组件实例完成所有状态相关的处理之后会自动调用
挂载阶段
beforeMount 组件挂载前自动调用 无真实的Dom节点
mounted 组件挂载之后 可以拿到真实的Dom节点
更新阶段
销毁阶段
-->
</body>
</html>
第二篇：简洁版
<!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>Document</title>
<script src="./../../js/vue.global.js"></script>
</head>
<body>
<div id="box">
<input type="text" ref="txt">
<!-- 定义一个方法ref标识组件 -->
<child ref="child"></child>
</div>
<script>
// 子组件 第一步：用来父组件获取子组件的方法
let child = {
template: `<div>hello child</div>`,
data(){
return {
k:12345
}
},
methods:{
fn(){
console.log("我是一个函数");
}
}
}
Vue.createApp({
components:{
child
},
// 生命周期创建阶段
beforeCreate(){ // 拿不到数据 打印的a是undefined 在组件createApp创建之前调用
console.log("app beforeCreate",this.a);
},
created(){ // 能拿到数据 打印的是111 在组件创建之后才能拿到数据
console.log("app created",this.a);
},
// 生命周期挂载阶段
beforeMount(){
console.log("app beforeMount" , this.a); // 能拿到数据
console.log(this.$refs.txt); // 不能拿到节点 是undefined
},
mounted(){
console.log("app mounted" , this.a , this.$refs.txt.focus()); // 能拿到数据和节点
console.log(this.$refs.child.k); // 父组件访问子组件里的数据
console.log(this.$refs.child.fn); // 父组件访问子组件里的方法
},
data() {
return {
a:111
}
},
}).mount("#box")
</script>
</body>
</html>
