lovecoding
/
VIP32


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="main">{{msg}}</div>
        <button @click="changeMain">修改</button>
        <button @click="des">销毁</button>
        <!-- 
            Vue的diff算法 => 虚拟DOM树 真实DOM树 
            生命周期 生命周期钩子  生命周期的回调函数
            三个阶段：
                初始阶段：
                    1.beforeCreate()  创建前:方法（methods）和 数据（data）都是无法被调用
                    2.created()       创建后:方法（methods）和 数据（data）都是被调用
                运行阶段：
                    3.beforeMount()   挂载前:页面数据并没有更新到视图上（并没有被vue编译）对DOM操作无效
                    4.mounted()       挂载后:页面渲染数据，DOM操作生效
                    5.beforeUpdate()    更新前：视图改变 数据未更新
                    6.updated()         更新后：数据改变 视图更新
                销毁阶段:
                    7.beforeDestroy()   销毁前：对DOM操作无效
                    8.destroyed()       销毁后：彻底销毁
        -->
    </div>
    <script src="../vue初阶/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"生命周期"
            },
            methods: {
                changeMain() {
                    this.msg = '新的'
                },
                des() {
                    this.$destroy()
                }  
            },
            computed: {

            },
            beforeCreate() {
                console.log(this.msg,'创建前');
            },
            created() {
                
                console.log(this.msg,'创建后');
            },
            beforeMount() {
                console.log(this.$el,'挂载前')
            },
            mounted() {
                console.log(this.$el,'挂载后')
            },
            beforeUpdate() {
                console.log(this.$el,document.querySelector(".main").innerHTML,'更新前')
            },
            updated() {
                console.log(this.$el,document.querySelector(".main").innerHTML,'更新后')
            },
            beforeDestroy() {
                console.log(this.$el,'销毁前')
            },
            destroyed() {
                console.log(this.$el,'销毁后')
            },
            watch: {

            },
            components:{

            }
        });
    </script>
</body>
</html>