生命周期组件
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="life">
生命周期函数的演示 ---{{msg}}
<br data-tomark-pass> <button @click="setMsg()">执行方法改变msg</button>
</div>
</template>
<script>
/*
生命周期函数/生命周期钩子：
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
*/
export default{
data(){
return{
msg:'msg'
}
},
methods:{
setMsg(){
this.msg="我是改变后的数据"
}
},
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据，操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>
生命周期
var vue = new Vue({
el: '#app',
data: {
msg: '页面渲染完毕'
},
methods: {
},
filters: {
},
beforeCreate() {
// 这是我们第一个遇到的生命周期函数，实例被创建出来，还没有data、methods等时，会执行它
let content = document.getElementById('divId')
console.log('beforeCreate：', content.innerText)
// 在js中，null和undefined是不同的含义。null表示有这个对象，但是这个对象的值是null。undefined表示压根就没有这个对象
console.log('beforeCreate', this.msg)
},
created() {
// Vue实例创建完毕，methods、data、filters等已经挂载到vue实例上。如果需要调用methods，使用data，最早只能在这里操作
let content = document.getElementById('divId')
console.log('created', content.innerText)
console.log('created', this.msg)
},
beforeMount() {
// Vue实例创建完毕，页面尚未重新渲染
let content = document.getElementById('divId')
console.log('beforeMounte', content.innerText)
console.log('beforeMounte', this.msg)
},
mounted() {
// 页面渲染完毕
let content = document.getElementById('divId')
console.log('mounted', content.innerText)
console.log('mounted', this.msg)
}
})
beforeCreate
初始化界面前.
这个时候只是一个空的Vue()对象 , 并且只有默认的生命周期函数和默认事件.
<body>
<div id="app">
<div id="divId">页面还没有渲染 --- {{msg}}</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "页面渲染完毕"
},
methods: {
},
filters: {
},
beforeCreate() {
// 这是我们第一个遇到的生命周期函数，实例被创建出来，
// 还没有data、methods等时，会执行它
let content = document.getElementById('divId')
console.log('beforeCreate：', content.innerText)
// 在js中，null和undefined是不同的含义。null表示有这个对象，
// 但是这个对象的值是null。undefined表示压根就没有这个对象
console.log('beforeCreate', this.msg)
}
})
</script>
</body>
create
初始化界面后
这时的data和method已经被初始化完成.
<body>
<div id="app">
<div id="divId">页面还没有渲染 --- {{msg}}</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "页面渲染完毕"
},
methods: {
},
filters: {
},
created() {
// 这是我们第一个遇到的生命周期函数，实例被创建出来，
// 还没有data、methods等时，会执行它
let content = document.getElementById('divId')
console.log('beforeCreate：', content.innerText)
// 在js中，null和undefined是不同的含义。null表示有这个对象，
// 但是这个对象的值是null。undefined表示压根就没有这个对象
console.log('beforeCreate', this.msg)
}
})
</script>
</body>
beforMount
渲染dom前
这时模板已经在内存中编译完成 , 但没有加载到页面中去.
<body>
<div id="app">
<div id="divId">页面还没有渲染 --- {{msg}}</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "页面渲染完毕"
},
methods: {
},
filters: {
},
beforeMount() {
// Vue实例创建完毕，页面尚未重新渲染
let content = document.getElementById('divId')
console.log('beforeMounte', content.innerText)
console.log('beforeMounte', this.msg)
}
})
</script>
</body>
mounted
dom渲染后
这时的页面编译并且替换完毕.
<body>
<div id="app">
<div id="divId">页面还没有渲染 --- {{msg}}</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
msg: "页面渲染完毕"
},
methods: {
},
filters: {
},
mounted() {
// 页面渲染完毕
let content = document.getElementById('divId')
console.log('mounted', content.innerText)
console.log('mounted', this.msg)
}
})
</script>
</body>
beforeUpdate
更新数据前
当data数据被修改后会进行触发
update
更新数据后
当update被执行到的时候 , 页面中的数据已经和data保持同步
beforeDestroy
卸载组件前
这时Vue的实例已经从运行阶段变成了销毁阶段. 而这时实例身上所有的data , methods , 过滤器 , 指令都处于可用状态
destroyed
卸载组件后
这是Vue的所有组件都不可用了