VUE3.0,DAY30
- 生命周期挂载流程
- 生命周期挂载流程的分支介绍
生命周期挂载流程
打开vue官网,点击教程、,vue实例找到生命周期图示。可以观看生命周期
由图看,vue首先进行的是一个init,初始化事件和生命周期。但数据代理还未开始,即还未出现vm._data。经过解释补充的第一小段图如下所示。
在执行init后调用了一个beforeCreat函数,这是第一个生命周期函数。通过代码展示该函数是否被使用。通过代码中的打印console.log输出,在网页中发现,一打开网页,什么也不点击的时候,控制台console就输出了beforeCreat函数。说明了调用。代码中使用了debugger进行加入断点调试。发现调用第一个生命周期函数后,打开控制台vue的详细内容,发现没有出现下划线data,即vm._data。验证了上图中蓝色框内此时无法通过vm访问到data中的数据,methods中的方法这一论断。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--插值语法,两组花括号,中间加入data中的变量名,则变量的内容就显示在此处-->
<h1>当前的n值是:{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
console.log('this')
debugger//加一个断点,一般用来调试代码,即代码只执行到这。
},
})
</script>
</body>
</html>
第二个周期函数created,经过如下代码,进行调试,最后在网页的控制台观察输出。此时居然观察到了add、数值n、有了下划线data,即_Data。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--插值语法,两组花括号,中间加入data中的变量名,则变量的内容就显示在此处-->
<h1>当前的n值是:{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
},
created() {
console.log('created');
console.log(this);
debugger
},
})
</script>
</body>
</html>
继续往下,这里说Vue里边是否传(写)了el这个选项。传了的话是否有template选项。
继续往下,没传template(与methods,data同级别的,即在代码中缩进程度相同),进入了编译外部HTML文件,作为template。这里的template就变成了上述代码中div标签以及div标签里的内容。
此阶段就是开始解析模板了,例如写的add啊、@click啊、计算属性啊等等。并且出现了虚拟DOM。
继续往下,进入了beforeMount环节
继续往下,把刚才的虚拟DOM,放到页面上,并且还备份了一份在vm.$el身上。
继续往下,进入了mounted第四个生命周期函数,挂载完毕
至此初始化流程结束。
生命周期挂载流程的分支介绍
当没有el时,我们通过把代码中的el注释掉,在网页控制台console打印观看输出,程序只执行到了created就卡住不动了。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--插值语法,两组花括号,中间加入data中的变量名,则变量的内容就显示在此处-->
<h1>当前的n值是:{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
// el: '#root',
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
})
</script>
</body>
</html>
当没有el,又去调用vm.$mount(el)时,修改代码如下,并在控制台输入下图所示的内容vm.mount(‘#root’)时,beforemount和mounted都走下去出现了。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--插值语法,两组花括号,中间加入data中的变量名,则变量的内容就显示在此处-->
<h1>当前的n值是:{{n}}</h1>
<button @click="add">点我n+1</button>
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
// el: '#root',
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
})
</script>
</body>
</html>
上述代码是没写template的,如果写了template应该是什么样的呢,如下代码所示,把body中的div里的内容,转移出来,到vue中。但是在网页中确报错了。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
//这里要用ES6.0里边的写法不换行才不会代码提示报错
template: '<h1>当前的n值是:{{n}}</h1><button @click="add" > 点我n + 1</button >',
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
})
</script>
</body>
</html>
上图报错的原因是,我们代码template中有两个根节点,h2一个,button一个。经过修改如下,就正常了。
<!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>
<!--引入vue-->
<script type="text/javascript" src="../vue.js">
Vue.config.productionTip = false
</script>
<!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>
<body>
<!--准备好一个容器-->
<div id="root">
</div>
<!--下边的vue.config选项关闭了启动时生成生产提示-->
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
//这里要用ES6.0里边的写法不换行才不会代码提示报错
template: `
<div>
<h1> 当前的n值是:{{ n }}</h1>
<button @click="add" > 点我n + 1</button >
</div>
`,
data() {
return {
n: 1
}
},
methods: {
add() {
this.n++
}
},
beforeCreate() {
console.log('beforeCrate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
})
</script>
</body>
</html>