这是vue的生命图示
一共有八个生命周期函数。
new Vue()
创建Vue实例 相当于以下代码
var vm = new Vue({})??之后就是init Event 和 LifeCycle 初始化事件和生命周期函数
beforeCreate()
首先字面意思在创建之前，那么Vue会发生什么呢？
- 初始化data里面的数据
- 初始化方法事件
- 将data里面的数据交给观察者实例 （watch）
此时若在代码中打印data里面的数据将undifined 因为是在初始化之前打印的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'hello world'
},
// new vue创建vue实例 -> init初始化生命周期函数 -> beforeCreated()
beforeCreate() {
console.log(this.$el)
console.log(this.message)
console.log('----beforeCreate----')
}
})
</script>
</body>
</html>created()
这时候数据初始化完毕，也已经有了methods里面的方法
在这个阶段，因为获得了data，那么我们就可以对后端接口发起请求，获取数据，这时候我们常常会写这样的代码：
created() {
this.getData()
}
methods() {
async getData(){
awati xxx() //具体的请求方法
}
}接下来他会判断是否有挂载了el，其实就是在vue中需要这么一行代码
var vm = new Vue({
el: '#app' //你html上的id 找到一个节点挂载
})??如果没挂载，那么等待挂载当有事件触发挂载
就是类似于以下这种写法
var vm = new Vue({})
vm.$mount('#app') //需要挂载上去接下来vue会判断有没有vue实例里面参数是否含有tempate模板
如果有则编译template并渲染成dom
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
data: {
message: 'hello world'
},
template: '<div>我是模板内的{{message}}</div>',
beforeMount(){
console.log(this.$el)
}
})
vm.$mount('#app')
</script>
</body>
</html>运行结果?
那此时我们如果有外部的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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>我是span里的{{message}</span>
</div>
<script>
var vm = new Vue({
data: {
message:'hello world'
},
template: '<div>我是模板内的{{message}}</div>',
})
vm.$mount('#app')
</script>
</body>
</html>为啥呢
beforemount()
这个函数运行的时候我们已经初始化了dom，也已经渲染上去了，但是数据呢没有绑定在模板之中就是相当于#app获取的dom结构，里面的数据依旧是{{xxx}}这种形式
接下来要做的就是data中的数据渲染到dom结构中，经过vue里面的一系列操作，数据就实现了双向绑定。
再回到之前的话题，为啥外部有html结构，内部有template页面最终渲染的确是template呢
在这个函数执行之后，就要渲染成render函数，他呢直接将vue内部的template的转化成render函数，生命周期会执行 replace el ,所以vue会替换掉之前的(#app) dom结构，渲染成内部template。
然后呢render
mounted()
数据已经绑定成功，dom完全渲染，此时可以操作dom了。
下面给出总图以及代码
<!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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
data: {
message:'hello world'
},
template: '<div>我是模板内的{{message}}</div>',
beforeCreate() {
console.log(this.$el)
console.log(this.message)
console.log('----beforeCreate----')
},
created() {
console.log(this.$el)
console.log(this.message)
console.log('----created----')
},
beforeMount () {
console.log(this.$el)
console.log(this.message)
console.log('----beforeMount----')
},
mounted () {
console.log(this.$el)
console.log(this.message)
console.log('----mounted----')
},
beforeDestroy(){
console.log(this.$el)
console.log(this.message)
console.log('----beforeDestroy----')
}
})
vm.$mount('#app')
</script>
</body>
</html>
beforeUpdate()
数据的更新之前会new新得结点与之前节点比较并且查找到指定范围，最后更新里面的数据，并render渲染。
updated()
在updated也可以操作dom
不足之处希望大家批评指正
参考文章https://blog.csdn.net/weixin_42707287/article/details/111641286