初学Vue,对几个钩子函数还是比较模糊，有时候想在钩子函数中做一些事情，但什么时候做，在那个函数中做，还不是很清楚。

于是，开始探索:

生命周期函数：

<body>
    <div id="app">
        <h3 id="h3">{{msg}}</h3>
        <input type="button" value="修改msg" @click="msg='No'">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {msg:'ok'},
            },
            methods:{
                show(){
                    console.log('执行了show方法')
                }
            },
**一、组件创建期间的4个钩子函数**
 1、beforeCreate：表示实例完全被创建之前，会执行这个函数
     在beforeCreate生命周期函数执行的时候，data 和 methods 中的数据还没有被初始化,this也不能用

            beforeCreate() {   
                 console.log(this.msg)   //undefind
                 this.show()   //is not defind
            },

 2、created: 实例创建完成
     在 created 中，已完成数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化！
     如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。但此时还不能操作DOM

            created() {    
                console.log(this.msg)   //ok
                this.show()        //执行了show方法
            },

 3、beforeMount：表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
     在beforeMount执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串

            beforeMount() {  
                console.log(document.getElementById('h3').innerText)  //{{msg}}
            }, 

 4、mounted：表示内存中的模板已经真实的挂载到页面中，用户已经可以看到渲染好的页面，并且可以操作DOM
     当执行完 mounted 就表示，实例已经被完全创建好了，mounted在整个生命周期中只执行一次
            mounted() {    
                console.log(document.getElementById('h3').innerText)   //ok
            }, 

**二、组件运行阶段的2个钩子函数**
 5、beforeUpdate：表示 界面还没有被更新，但是数据肯定被更新了
     得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data 数据是 
     最新的，页面尚未和 最新的数据保持同步
            beforeUpdate() { 
                console.log('界面上元素的内容'+ document.getElementById('h3').innerText)  //没有执行，因为数据没改变
                console.log('data 中的msg数据是：' + this.msg)
            },

 6、updated：页面和 data 数据已经保持同步了，都是最新的
     updated() {
        console.log('界面上元素的内容'+ document.getElementById('h3').innerText)   //No
        console.log('data 中的msg数据是：' + this.msg)   //No
     },

**三、组件删除阶段**
 7、beforeDestroy：表示实例销毁前，此时 实例上所有data和methods，以及过滤器、指令....都 
      处于可用状态，此时，还没有真正执行销毁的过程。
 
 8、destroyed：当执行到destroyed函数的时候，组件已经被完全销毁了，此时 组件中所有的数据、方法、指令、过滤器...都已经不可用了。

  })
    </script>
</body>

其他钩子函数：

<body>
    <div id="app">
    {{fullName}}
    </div>
</body>

<script>
var var vm = new Vue({
  el: '#app',
  data() {
    return {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar',
        num: 2
    }
  },
  watch: {
    //监听数据必须是data中声明过或者父组件传递过来的props中的数据，且只能监听字符串，对字典或数组对象无效
    firstName: function (val, oldval) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  },

  computed: {
    //计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。
    //计算属性具有缓存，只有当所依赖的数据发生改变时，才会重新计算
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },


  methods: {
    add:function(num){
      this.num += num
    }
  }
})
</script>