Vue学习笔记（生命周期） 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <title>生命周期函数</title>
</head>

<body>
    <a href="https://blog.csdn.net/haochangdi123/article/details/78358895">参考博客</a>
    <div id="app">
        <h1>{{ msg }}</h1>
        <button @click="change">修改值</button>
    </div>
    <script>
        const myApp = Vue.createApp({
            el:'app',
            name: 'gouzi',
            data() {
                return {
                    msg: '生命周期函数'
                }
            },
            methods: {
                change(){
                    let i=0;
                    i+=1;
                    this.msg=this.msg+i;
                }
            },
            watch:{
                msg(){
                    console.log('watch','msg已经改变')
                }
            },
            // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时无数据
            // 可以看到Vue中的data和方法都是去不到的，并且是在wath之前执行
            beforeCreate() {
                console.log("beforeCreate...." + this.msg)
                console.log("beforeCreate...." + this.$el)
            },
            // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 
            // 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
            //此时能够获取到msg的值
            // 主要应用：调用数据，调用方法，调用异步函数
            // 可以看到：created钩子可以获取Vue的data，调用Vue方法，
            // 获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM
            Created() {
                console.log("Created...." + this.msg)
                console.log("Created...." + this.$el)
            },
            // 在挂载开始之前被调用：相关的 render 函数首次被调用。
            // 也就是说由vue生成的dom还被加载为原生的dom
            beforeMount() {
                console.log("beforeMount...." + this.msg)
                console.log("beforeMount...." + this.$el)
            },
            //实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 myApp.$el 也在文档内。

            // 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 myApp.$nextTick：
           //由Vue生成的dom元素被挂载到html dom树中
            mounted() {
                console.log("Mounted...." + this.msg)
                console.log("Mounted...." + myApp.$el)
            },
            // 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
            beforeUpdate() {
                console.log("beforeUpdate...." + this.msg)
                console.log("beforeUpdate...." + this.$el)
            },
            // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

            // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

            // 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 myApp.$nextTick：
            updated() {
                console.log("updated...." + this.msg)
                console.log("updated...." + this.$el)
            }
        });
        myApp.mount("#app")
        </script>
</body>


</html>

效果如下图：

未更新数据时候的值

 

 更新之后

 

posted @ 2021-09-12 19:25  影随风舞  阅读(30)  评论(0)    收藏  举报