19_生命周期

作者: CHENPEIHUANG | 来源:发表于2018-02-09 00:44 被阅读0次

19_生命周期
Android Chart框架 MPAndroidChart学习
第01天(基本类型、流程控制)_04
19_ 类型转换
亲子日记19_
19_加密解密
梓伊的21天生命故事疗愈日记（第10天）
第04天(面对对象编程)_04
第02天(函数、工程管理)_04
19_编译过程简介

Vue生命周期图示

Vue的生命周期：
1）创建Vue空对象
2）初始化Vue的数据·方法·计算属性等，在之前调用beforeCreate钩子函数，之后调用created钩子函数
3）判断是否设置el属性
如果没有设置过则判断Vue实例是否调用了$mount方法
如果设置过el属性或调用$mount方法则判断是否设置template属性
如果有则将template指定视图作为模板，如果没有则就将el所在的元素作为模板
4）编译模板，即根据所获取到的模板生成虚拟DOM，并且解析模板内的插值及指令
5）将虚拟DOM挂载在真实DOM中，在挂载前调用beforeMount钩子函数，在挂载后调用mounted钩子函数
6）如果数据有更新，则重新触发虚拟DOM更新，同时触发真实DOM也更新，更新前调用beforeUpdate钩子函数，更新后调用updated钩子函数
7）调用vm.$destroy()销毁Vue实例

设置数据监听(beforeCreate和created) ->
编译模板-> 挂载实例到DOM(beforeMount和mounted) ->
数据变化是更新DOM(beforeUpdate和updated) ->
销毁(beforeDestory和destroyed)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="msg" v-model="msg"/>
            <p class="box">{{msg}}</p>
            <p>{{newMsg}}</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello"
                },
                methods:{
                    show(){
                        
                    }
                },
                computed:{
                    newMsg(){
                        console.log("计算属性被调用")
                        return this.msg.toUpperCase()
                    }
                },
                beforeCreate(){
                    console.log("Vue实例数据初始化前调用。。。")
                    console.log(this.msg)//undefined
                    console.log(this.show)//undefined
                },
                created(){
                    console.log("Vue实例创建了，数据初始化完成。。。")
                    console.log(this.msg)//hello
                    console.log(this.show)//Object
                    //created方法中可以请求后台数据，对data属性进行初始化
                },
                //template:"<h1>Hello</h1>"
                beforeMount(){
                    console.log("befotMount钩子函数被调用。。。")
                    console.log(this.$el)
                    //console.log(document.getElementById('app'));
                },
                mounted(){
                    console.log("mount钩子函数被调用。。。")
                    console.log(this.$el)
                    //console.log(document.getElementById('app'))
                    //在mounted方法中,进行DOM操作
                },
                beforeUpdate(){
                
                    console.log("数据更新导致DOM更新前"+document.getElementsByClassName('box')[0].innerHTML)
                    
                    
                },
                updated(){
                    console.log("数据更新导致DOM更新后"+document.getElementsByClassName('box')[0].innerHTML)
                    //updated方法中进行数据更新后的DOM操作
                }
            });
            //Vue的生命周期：
            //1.创建Vue空对象
            //2.初始化Vue的数据·方法·计算属性等，在之前调用beforeCreate钩子函数，之后调用created钩子函数
            //3.判断是否设置el属性
            //      如果没有设置过则判断Vue实例是否调用了$mount方法
            //      如果设置过el属性或调用$mount方法则判断是否设置template属性
            //      如果有则将template指定视图作为模板，如果没有则就将el所在的元素作为模板
            //4.编译模板，即根据所获取到的模板生成虚拟DOM，并且解析模板内的插值及指令
            //5.将虚拟DOM挂载在真实DOM中，在挂载前调用beforeMount钩子函数，在挂载后调用mounted钩子函数
            //6.如果数据有更新，则重新触发虚拟DOM更新，同时触发真实DOM也更新，更新前调用beforeUpdate钩子函数，更新后调用updated钩子函数
            //7.调用vm.$destroy()销毁Vue实例
            
            vm.$mount("#app")//可以替代el属性
            
            //设置数据监听(beforeCreate和created) -> 编译模板-> 挂载实例到DOM(beforeMount和mounted)-> 数据变化是更新DOM(beforeUpdate和updated)-> 销毁(beforeDestory和destroyed)
        </script>
    </body>
</html>