vue.js（23）生命周期（构造函数）

 图片来源于vue官网，注释是我自己加的，另外，红色的函数，是和methods放在同一级的，而不是放在methods里面

现在配合代码讲一下，我们在Header.vue文件里面加上这些函数

<script>
export default {
  name: 'appheader',
  data () {
    return {
    	title:"vue.js demo"
    }
  },
  props:{
    sendhea:{
      type:String
    }
  },
  methods:{
    changetitle:function()
    {
      this.$emit("titlechange","子向父传值");
    }
  },
  beforeCreate:function(){
    alert("组件实例化之前执行的函数");
  },
  created:function(){
    alert("组件实例化化完毕，但页面还未显示");
  },
  beforeMount:function(){
    alert("组件挂载前，页面仍未展示，但虚拟dom已经配置");
  },
  mounted:function(){
    alert("组件挂载后，此方法执行后，页面显示");
  },
  beforeUpdate:function(){
    alert("组件更新前，页面仍未更新，但虚拟dom已经配置");
  },
  updated:function(){
    alert("组件更新，此方法执行后，页面显示");
  },
  beforeDestroy:function(){
    alert("组件销毁前");
  },
  destroyed:function(){
    alert("组件销毁");
  },
 
}
</script>

然后进入页面

beforeCreate：

created：

beforeMounted：

mounted：

（这个时候页面显示出来了）

beforeUpdate：

扫描二维码关注公众号，回复： 2192610 查看本文章

然后这个时候，并没有弹出任何对话框，因为我们没有点击任何Header.vue组件，现在，我们点击press按钮

它会告知你刚刚是组件未更新之前，并且press按钮所造成的影响还没有显示出来

updated：

组件变化的内容显示出来了