vue生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

vision_seven7

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量139

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/vision_seven7/article/details/108215079

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

生命周期图示

在这里插入图片描述

生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;

<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <ul>
            <li v-for="a in arr"></li>
        </ul>
        <button @click="fn">点击</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
        	el:"#app"
            data: {
                msg: "小王子",
                arr: [1, 2, 3, 4]
            },
            // 1. 在这个钩子函数执行之前初始化事件以及生命周期
            beforeCreate() {
                // 1. 在这个钩子函数中，不能获取data中的数据
                // console.log(this.msg);
                // 2. 这个函数不能操作DOM；
                // console.log(document.getElementsByTagName("li"))
            },
            // 给Vue的实例注入数据，进行数据监听
            created() {
                // 在created发送请求
                // 1. 可以获取到data中的数据
                // 2. 不能操作DOM的
                //console.log(this.msg);
                // console.log(document.getElementsByTagName("li"))

                axios.get("./carts.json").then(data => {
                    // 异步的；
                    this.arr = data.data;
                    console.log(2);

                })
            },
            methods: {
                getData() {

                },
                fn() {
                    this.msg = "world"
                }
            },
            // 执行之前，判断是否有el,template;编译
            beforeMount() {
                // console.log(document.getElementsByTagName("li"))
            },
            // 挂载完毕
            mounted() {
                // debugger
                // 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
                // 编译出的DOM把原有的DOM替换完毕；
                // 可以获取最终的DOM元素
                // let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}
                console.log(document.getElementsByTagName("li"));
                //console.log("mounted","初始化");
            },
            // 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
            beforeUpdate() {
                console.log("beforeUpdate", "更新之前");
                console.log(this.msg)
                // 更新数据之前执行
            },
            updated() {
                console.log("beforeUpdate", "更新之后");
                // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
            },
            // 销毁之前
            beforeDestroy() {
                // 销毁之前
                // 清除定时器
                console.log("beforeDestroy");

            },
            // 销毁之后
            destroyed() {
                console.log("destroyed");
                // 销毁子组件，销毁观察者，事件监听者
                // 元素的事件还在，但是更改数据不会再让视图进行更新了；
            }
        })
    </script>
</body>

</html>

vue第一次页面加载会触发哪几个钩子函数？

beforeCreate

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，
el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created

在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），
实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期

这里写自定义目录标题生命周期图示生命周期生命周期钩子函数vue第一次页面加载会触发哪几个钩子函数？生命周期图示生命周期生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；生命周期钩子函数生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；生命周期的钩子函数中的this，会默认指向
复制链接

扫一扫