vue开发之生命周期

vue开发之生命周期templatediv class=hello{{msg}}/div/templatescriptexport default {name: HelloWorld,component:{}, //组件mixins:[], //混入computed:{}, //计算属性watch:{}, //监听器data ...

vue开发之生命周期

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  component:{}, //组件
  mixins:[], //混入
  computed:{}, //计算属性
  watch:{}, //监听器
  data () {  //数据
    return {
      msg:"HelloWorld"
    }
  },
  beforeCreate(){
    console.log("组件实例刚被创建，组件属性被计算之前（如data等）")
  },
  created(){
    console.log("组件实例创建完成，属性已绑定，但DOm还未生成，$el 还没有")
  },
  beforeMount(){
    console.log('编译模板挂载之前， 在beforeMount执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串')
  },
  mounted(){
    console.log('编译模板挂载之后')
  },
  beforeDestroy(){
    console.log('实例销毁之前调用。')
  },
  destroyed(){
    console.log('Vue 实例销毁后调用。')
  },
  methods:{ //事件

  }
}
</script>