【学习笔记04】生命周期的钩子函数

news2024/11/19 0:44:18

一、生命周期的钩子函数

在组件的生命周期的过程中自动的调用的函数，叫做生命周期的钩子函数

二、创建阶段

beforeCreate ：组件实例初始化之后，自动调用
created ：组件实例完成所有状态相关的处理之后会自动调用，可以拿到数据

    <div id="box">
        {{a}}
        <input type="text" id="abc" ref="txt">
        <!-- ref既可以标识节点，也可以标识组件,标识组件后，就可以访问组件的数据，调用组件的方法 -->
        <Child ref="child"></Child>
    </div>

    <script>
        let Child = {
            template: `
            <div>
                child<input type='text' v-model="str"  />
            </div>`,
            data() {
                return {
                    str: "init"
                }
            },
        }
        Vue.createApp({
            components: {
                Child
            },
            data() {
                return {
                    a: 123
                }
            },
            beforeCreate() {  //拿不到任何数据
                console.log("beforeCreate:", this.a);
            },
            created() {  //可以拿到数据
                console.log("created:", this.a)
            },
        }).mount("#box")
    </script>

在这里插入图片描述

三、挂载阶段

boforeMount：组件挂载前自动调用
mounted：组件挂载后自动调用 ,不但可以拿到数据，还可以拿到真实的dom节点

    <div id="box">
        {{a}}
        <input type="text" id="abc" ref="txt">
        <!-- ref既可以标识节点，也可以标识组件  标识组件后，就可以访问组件的数据，调用组件的方法 -->
        <Child ref="child"></Child>
    </div>

    <script>
        let Child = {
            template: `<div>child
                    <input type='text' v-model="str"  />
                </div>`,
            data() {
                return {
                    str: "init"
                }
            },
            methods: {
                fun() {
                    console.log("Fun")
                }
            }
        }
        Vue.createApp({
            components: {
                Child
            },
            data() {
                return {
                    a: 123
                }
            },
            beforeMount() {
                console.log("app beforeMount:", this.a, this)
            },
            mounted() {
                console.log("app mounted:", this.a, this)
                //拿到文本框节点
                // let txt = document.getElementById("abc");
                let txt = this.$refs.txt;
                console.log(txt);
                txt.focus();
                console.log(this.$refs.child.str)  //父组件通过ref标识访问子组件的数据
                this.$refs.child.str = this.a      //父组件通过ref修改子组件的数据
                this.$refs.child.fun()             //父组件通过ref调用子组件的方法
            }

        }).mount("#box")
    </script>

在这里插入图片描述

ref可以标识组件 ，父组件可以读写子组件里的数据，也可以访问子组件里的方法
<input type="text"  ref="txt">
this.$refs.ref的标识  就可以拿到节点了

四、父子组件创建和挂载阶段钩子函数的执行次序

app beforeCreate
app created
app beforeMount
child beforeCreate
child created
child beforeMount
child mounted
app mounted

    <div id="box">
        <Child></Child>
    </div>

    <script>
        let Child = {
            template: `<div>child</div>`,
            beforeCreate() {
                console.log("child beforeCreate")
            },
            created() {
                console.log("child created")
            },
            beforeMount() {
                console.log("child beforeMount");
            },
            mounted() {
                console.log("child mounted");
            },
        }
        Vue.createApp({
            components: {
                Child
            },
            beforeCreate() {
                console.log("app beforeCreate")
            },
            created() {
                console.log("app created")
            },
            beforeMount() {
                console.log("app beforeMount");
            },
            mounted() {
                console.log("app mounted");
            },
            data() {
                return {
                }
            },
        }).mount("#box")
    </script>

在这里插入图片描述

五、更新阶段

beforeUpdate：组件因为一个响应式状态改变后，更新dom树之前自动调用
updated：组件因为一个响应式状态改变后，更新 dom树之后自动调用

    <div id="box">
        <Child v-if="flag"></Child>
        {{k}} <button @click="k++">+k</button> <br>
        {{n}} <button @click="n++">+n</button> <br>
        {{obj.a}} <button @click="obj.a++">obj.a++</button> <br>
    </div>

    <script>
        let Child = {
            template: `<div>child</div>`,
        }
        let app = Vue.createApp({
            components: {
                Child
            },
            beforeUpdate() {    //监控组件里的所有数据变化
                console.log("app beforeUpdate", this.k)
            },
            updated() {
                console.log("app updated", this.k)
            },
            beforeUnmount() {
                console.log("app beforeUnmount")
            },
            unmounted() {
                console.log("app unmounted")
            },
            watch: {  //监听组件里特定数据的变化
                k(n, o) {
                    console.log(n, o)
                },
                obj: {
                    handler(n) {  //对象的监控要用handler处理
                        console.log(n)
                    },
                    deep: true,  //对象必须是深度监控
                    immediate: true //立即监控
                }
            },
            data() {
                return {
                    k: 1,
                    n: 2,
                    obj: {
                        a: 1
                    },
                    flag: true  //true 渲染Child组件
                }
            },
        })
        app.mount("#box")
    </script>

六、销毁阶段

beforeUnmount：组件卸载前调用，清理资源，防止内存泄露
unmounted：组件卸载后调用

    <div id="box">
        <Child v-if="flag"></Child>
        {{k}} <button @click="k++">+k</button> <br>
        {{n}} <button @click="n++">+n</button> <br>
        {{obj.a}} <button @click="obj.a++">obj.a++</button> <br>
        <button @click="kill">kill</button> <br>
        <button @click="flag=false">卸载子组件</button> <br>
    </div>

    <script>
        let Child = {
            template: `<div>child</div>`,
            beforeCreate() {
                console.log("child beforeCreate")
            },
            created() {
                console.log("child created")
            },
            beforeMount() {
                console.log("child beforeMount");
            },
            mounted() {
                console.log("child mounted");
                this.timer = setInterval(() => {
                    console.log(111)
                }, 1000)
            },
            beforeUnmount() {
                console.log("child beforeUnmount")
                clearInterval(this.timer)
            },
            unmounted() {
                console.log("child unmounted");
            }
        }
        let app = Vue.createApp({
            components: {
                Child
            },
            methods: {
                kill() {
                    app.unmount();  //卸载组件
                }
            },
            beforeCreate() {
                console.log("app beforeCreate")
            },
            created() {
                console.log("app created")
            },
            beforeMount() {
                console.log("app beforeMount");
            },
            mounted() {
                console.log("app mounted");
            },
            beforeUpdate() {    //监控组件里的所有数据变化
                console.log("app beforeUpdate", this.k)
            },
            updated() {
                console.log("app updated", this.k)
            },
            beforeUnmount() {
                console.log("app beforeUnmount")
            },
            unmounted() {
                console.log("app unmounted")
            },
            watch: {  //监听组件里特定数据的变化
                k(n, o) {
                    console.log(n, o)
                },
                obj: {
                    handler(n) {  //对象的监控要用handler处理
                        console.log(n)
                    },
                    deep: true,  //对象必须是深度监控
                    immediate: true //立即监控
                }
            },
            data() {
                return {
                    k: 1,
                    n: 2,
                    obj: {
                        a: 1
                    },
                    flag: true  //true 渲染Child组件
                }
            },
        })
        app.mount("#box")
    </script>

七、复习和补充

1、MVVM

M（model）：模型层数据
V（view）：视图，渲染数据展示数据
m （viewModel）：视图模型，视图和模型沟通的桥梁，模型数据变化了，视图也会变化

2、v-for中的key值

vfor 中的key值得作用，为了找到修改数据的那个对应的虚拟dom节点的条件之一，能提高比对效率

3、$nextTick

延迟执行回调函数，知道下一次循环dom更新后执行

    <div id="box">
        <ul>
            <!-- 根据key值找到变化前的对应的虚拟dom节点 patch -->
            <!-- 虚拟dom 和 diff算法-->
            <li v-for="item in list" :key="item">
                <input type="checkbox" />
                <span ref="liitem">{{item}}</span>
            </li>
        </ul>
        <button @click="add">insert</button>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    list: ["aa", "bb", 'cc']
                }
            },
            methods: {
                add() {

                    this.list.unshift("dddd")
                    //延迟执行回到。到下一次循环，dom就绪后再执行
                    this.$nextTick(() => {
                        //数据更新后，dom结构并没有立即更新
                        //通过nextTick 下一次循环，dom就更新了
                        console.log(this.$refs.liitem);
                    })

                }
            }
        }).mount("#box")
    </script>