[vue] 生命周期钩子函数

<div id="app">
    <h1>{{message}}</h1>
  </div>
  <script>
    var vm=new Vue({
      //el: '#app',
      data: { 
        message:'生命周期'
      },
      //vue实例被创建之前被调用，实例和模板均未获取到
      beforeCreate() {
       console.log("beforeCreate() 被调用了",this.$el,this.$data);
      },
      //vue实例创建后，最早可以获取到data数据的钩子函数，但是模板没有获取到(有数据但是还未渲染)
      //建议在这里边发送ajax请求
      created() {
        console.log("created() 被调用了",this.$el,this.$data);
      },
      //数据挂载之前,获取到了模板，但是数据还未挂载到模板上
      beforeMount() {
        console.log("beforeMount() 被调用了",this.$el,this.$data);
      },
      //数据挂载之后,获取到了模板，数据已经挂载到模板上
      Mounted(){
        console.log("Mounted() 被调用了",this.$el,this.$data);
      },
      //当data的数据更新之后,去更新模板数据前调用
      beforeUpdate() {
        console.log("beforeUpdate() 被调用了",this.$el.innerHTML,this.$data);
      },
      //更新完成之后
      updated() {
        console.log("updated() 被调用了",this.$el.innerHTML,this.$data);
      },
      //销毁vue实例之前调用，主要做一些收尾的工作
      beforeDestroy() {
        console.log("beforeDestroy() 被调用了");
      },
      //销毁之后
      destroyed() {
        console.log("destroyed() 被调用了");
      }
    }).$mount('#app');//如果实例中没有el选项，可使用$mount()手动挂载
    //vm.$destroy()//销毁vue实例
  </script>