执行代码看生命周期函数的执行顺序
<!-- 根组件 -->
<!-- vue的模板内，所有内容要被一个根节点包含起来 App.vue -->
<template>
<div id="app">
<h2>这是vue的根目录</h2>
<button @click="flag=!flag">挂载和卸载lify组件</button>
<v-lify v-if="flag"></v-lify> </div>
</template> <script>
// 1.引入组件；2.挂载组件；3.在模板中使用
import Lify from './components/Lify.vue';
export default {
name: 'app', data () { // data是业务逻辑里面定义的数据
return {
flag:true, }
},
components:{
'v-lify':Lify,
}, }
</script>
<style type="text/css"> </style>
<!-- Lify.vue -->
<template>
<div>
<br>
<div>我是一个生命周期函数__Lify组件</div>
<button @click="setMeg()">改变数据/触发beforeUpdate()及updated()</button>
<div>{{msg}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'这是条数据',
} },
methods:{
setMeg(){
this.msg='我是改变后的数据'
}
},
beforeCreate(){
console.log('实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成'); // 请求数据，操作dom 放在mounted里
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
} }
</script>