vue学习之路------生命周期 钩子

官网地址：

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

代码：

<div id="app">
        <div class="home-page" ref="homepage">
            {{a}}
            <button @click="go">离开页面</button>
        </div>
    </div>

 <script>
        var vm = new Vue({
            el: '#app',
            data: {
               a: 1,
               b: 2
            },
            methods: {
                go() {
                    // debugger
                    location.href = "https://cn.vuejs.org/v2/guide/components.html"
                }
            },
            beforeCreate() {
                console.log("beforeCreate===========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);
            },
            created() {
                console.log("created==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            },
            beforeMount() {
                console.log("beforeMount==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            },
            mounted() {
                console.log("mounted==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);
            },
            beforeUpdate() {
                console.log("beforeUpdate==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            },
            updated() {
                console.log("updated==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            },
            beforeDestroy() {
                alert('hhh')
                console.log("beforeDestroy==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            },
            destroyed() {
                // debugger
                alert('hhh')
                console.log("destroyed==========>");
                console.log('el------------>', this.$el);
                console.log('homepage----------->', this.$refs.homepage);
                console.log('data========>', this.b);

            }
        })
    </script>

运行结果：el是vue实例，homepage是最外层div  data是data里的值

总结：1、el在beforeMount才能取到

2、dom在mounted才能取到，故要操作dom必须在这个生命周期

3、data在created才能取到，调接口、赋值在created和beforeMounted,mounted均可

4、关于beforeUpdate、和updated在data里的值变化时会走到，如图

改变了data的值，走到这两个生命周期，这两个生命周期打印出来的值均相同

5、关于beforeDestroy、和destroyed这两个生命周期据说是在组件被销毁是调用，但是目前还没有想到办法验证