vue 生命周期钩子的理解 watch computed

### 理解vue的生命周期，首先需要注意几个关键字

1. el :选择器

2. $el：对应选择器的template模板（html代码）

3. render：也是vue实例中的一项，其参数更接近vue解析器，按优先级，render参数 > vue实例对象中有template > 外部的HTML模板 后面两个也是将其编译成render函数

【注意】render选项参数比template更接近Vue解析器！所以优先级如下：

　　 render函数选项  > template参数  > 外部HTML

4. $mount ：当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中，假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：

new Vue({内部无el项}).$mount(‘#app‘)是延迟加载，同下面的语句相同

new Vue({el:"#app",***})

<template>
    <div id = "testhookapp">
        <input type="number" v-model="testhook">{{testhook}}
        <br>
        <input type="text" v-model="testhook2">{{testhook2}}
        <br>
        {{fullchange}}
    </div>
</template>
<script>
   var vm = {
        name:‘testhookapp‘,
        data:function(){
            return {
               testhook:1,
               testhook2:"hello"
            }
        },
        watch:{
            testhook:function(){
                console.log(‘watch监听到了testhook的变化‘)
            },
            testhook2:function(){
                console.log(‘watch监听到了testhook2222的变化‘)
            }
        },
        computed:{
            fullchange:function(){
                console.log(‘computed监听到了fullchange‘+this.testhook +‘,‘+this.teshhook2)
                return this.testhook +‘,‘+this.testhook2
            }
        },
        beforeCreate: function () {
            console.log(‘调用了beforeCreat钩子函数‘)
        },
        created: function () {
            console.log(‘调用了created钩子函数‘)
            console.log(this.$el)
            console.log(this)
        },
        beforeMount: function () {
            console.log(‘调用了beforeMount钩子函数‘)
        },
        mounted: function () {
            console.log(‘调用了mounted钩子函数‘)
            console.log(this.$el)
            console.log(this)
        },
        beforeUpdate: function () {
            console.log(‘调用了beforeUpdate钩子函数‘)
            console.log(this.$el)
            console.log(this)
        },
        updated: function () {
            console.log(‘调用了updated钩子函数‘)
        }
    }
 export default vm
</script>
<style>

</style>

可以分别注释一下代码看输出的结果；　

### 注意

> 1. vue实例中没有el时钩子，仅仅执行到了created ；有el时将可以按顺序执行beforeCreate  created  beforeMount mounted几个钩子，没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)

> 2. beforeUpdate 和 updated两个钩子会在data数据发生变化时进行调用，也就是说可以监听data里面的所有数据，只有要变化就执行钩子函数，重渲染（调用这两个钩子函数）的前提是被更改的数据已经被写入模板中！！

　　eg {{number}}在模板中显示，当只在js中对数据进行修改而没有显示在页面上时将不会进行重渲染调用对应的钩子函数

　　1. 对比watch：针对某一个数据进行监听实时的；

　　2. 对比computed：当依赖项不变化时不会进行重新的执行，只有变化时才会再次执行

> 3. 在各个钩子里面引用的this指向 vm 实例，即使在没有mounted挂载在具体元素上时mounted之前的钩子中打印this仍然有$el属性，而在其后包括mounted钩子里面单独打印this.$el时是未定义的，但是断点调试是符合的（此处有点不理解，希望有大神可以讨论下）

参考学习连接 ：

https://www.cnblogs.com/penghuwan/p/7192203.html

http://www.zhi-jie.net/vue2-study-mount/

原文地址：https://www.cnblogs.com/xhliang/p/8352367.html