1.beforeCreate
After instance initialization, data observation and event/watcher event configuration are called before.
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"this is message"
},
methods:{
init:function(){
console.log("This is the initialization method");
}
},
watch:{
message:function(){
console.log("watch","message Changed");
}
},
beforeCreate:function(){
console.log("beforeCreate",this.message);
this.init()
}
})
</script>
</body>
</html>
You can see that the data and methods in Vue cannot be accessed and are executed before the watch
2.created
Called immediately after the instance is created. In this step, the instance has completed the following configuration: data observation, operation of properties and methods, and callback of watch/event events. However, the mount phase has not yet started and the $el attribute is not yet available.
Main applications: calling data, calling methods and calling asynchronous functions
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}---{{message}}</li>
</ul>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"this is message",
list:['aaa','bbb','ccc']
},
methods:{
init:function(){
console.log("created:This is the initialization method");
}
},
watch:{
message:function(){
console.log("watch","message Changed");
}
},
created:function(){
console.log("created:",this.message);
this.init()
//Because li is traversed through the v-for loop, the mount phase has not started before created, and the number of li cannot be obtained
console.log("li quantity:",document.getElementsByTagName("li").length);
//The DOM loaded directly can be obtained directly
console.log("p quantity:",document.getElementsByTagName("p").length)
}
})
</script>
</body>
</html>
3.beforeMount
Called before the mount starts: the relevant render function is called for the first time.
This hook is not called during server-side rendering.
4.mounted
The instance is called after being mounted, when el is newly created vm..
e
l
for
change
Yes
.
as
fruit
root
real
example
hang
load
reach
Yes
one
individual
writing
files
within
of
element
element
upper
，
When
m
o
u
n
t
e
d
cover
transfer
use
Time
v
m
.
el replaced. If the root instance is mounted on an element in a document, when mounted is called, vm
el replaced. If the root instance is mounted on an element in a document, when mounted is called, VM el is also in the document.
DOM rendering with initial values, such as our initial data list and rendered li, can only be obtained here
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}---{{message}}</li>
</ul>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"this is message",
list:['aaa','bbb','ccc']
},
methods:{
init:function(){
console.log("mounted:This is the initialization method");
}
},
watch:{
message:function(){
console.log("watch","message Changed");
}
},
mounted:function(){
console.log("mounted:",this.message);
this.init()
//Because li is traversed through the v-for loop, the mount phase has not started before created, and the number of li cannot be obtained
console.log("li quantity:",document.getElementsByTagName("li").length);
//The DOM loaded directly can be obtained directly
console.log("p quantity:",document.getElementsByTagName("p").length)
}
})
</script>
</body>
</html>
You can see that so far, the instance has been mounted, and we can get the number of li
Note that mounted does not guarantee that all sub components are mounted together. If you want to wait until the whole view is rendered, you can use VM inside mounted$ nextTick:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
This hook is not called during server-side rendering.
5.beforeUpdate
Called during data update, which occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing the added event listener.
This hook is not called during server-side rendering, because only the first rendering will be performed on the server-side.
6.updated
The hook is called after the virtual DOM is re rendered and patched due to data changes.
When this hook is called, the component DOM has been updated, so you can now perform DOM dependent operations. However, in most cases, you should avoid changing the state during this period, as this may lead to an infinite cycle of updates. If you want to change the state accordingly, it is usually best to use the calculated attribute or watcher instead.
Note that updated does not guarantee that all sub components will be redrawn together. If you want to wait until the whole view is redrawn, you can use VM in updated$ nextTick:
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
This hook is not called during server-side rendering.
7.beforeDestroy
Before the instance is destroyed, it is called. At this step, the instance is still fully available.
This hook is not called during server-side rendering.
8.destroyed
After the instance is destroyed, it is called. After the hook is called, all instructions corresponding to Vue instances are unbound, all event listeners are removed, and all sub instances are destroyed.
This hook is not called during server-side rendering.