vue对象的生命周期函数（钩子函数）

一个组件从创建到销毁的过程就是生命周期。

beforeCreate:vue对象创建成功前

1、当前vue实例化的时候会做一个初始化的操作，在这个生命周期函数里面我们可以做初始化的loading

2、在当前函数里面是访问不到data中的属性，但是可以通过vue的实例对象进行访问

created:vue对象创建成功后

1、当beforeCreate执行完毕以后，会执行created. 在当前函数中我们可以访问到data中的属性

2、当前生命周期函数执行的时候会将data中所以的属性和methods身上所以的方法添加到vue的实例身上，同时

会将data中所有的属性添加一个getter/setter方法

3、如果需要进行前后端上数据交互(ajax请求的时候) 需要在当前生命周期中使用

beforeMount:view与model绑定成功之前（挂载前）

(渲染)

render函数初次被调用---->数据和模板没有进行相结合，同时还没有渲染到html页面上

可以在此做渲染前data中数据最后的修改

mounted:view与model绑定成功之后（挂载后）

1、数据和模板进行相结合，渲染成真实的DOM结构

2、在当前生命周期函数里面我们可以访问到真实的DOM结构,

3、在vue中我们可以通过$refs来访问到真实的DOM结构

4、ref类似与id一样值必须是唯一的访问的时候我们可以通过this.$refs.属性

beforeDestroy:vue对象销毁前

销毁之前还可以访问到DOM结构以及相关的数据(data)

在这个生命周期函数中我们可以将绑定的事件进行移除

destroyed:vue对象销毁后

在这个生命周期函数中会将数据和模板之间的关系断开(不是你的做的)

在这个生命周期函数中我们还是可以访问到data中的属性

但是访问不到真实的DOM结构了

beforeUpdate:view与model数据更新之前

只要data中的属性发生了改变，那么这个生命周期就会执行，render函数再次会执行

在这个生命周期函数中我们可以对数据进行最后的修改，同时也可以访问到最新的DOM结构和数据

updated:view与model数据更新之后

在当前生命周期函数中我们可以访问到最新的DOM结构(数据更新后最新的DOM结构)和数据

案例代码：

<script src="../vue.demo.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    // 生命周期函数：在某一时刻会自动执行的函数
    const app = Vue.createApp({  // 创建一个vue应用实例
        data() {
            return {
                message : "hello"
            }
        },
        //在实例生成之前会自动执行的函数
        beforeCreate() {
            alert("beforeCreate")
        },
        //在实例生成之后会自动执行的函数
        created() {
            alert("created")
        },
        // 在组件内容被渲染到页面之前自动执行的函数
        beforeMount() {
            alert("beforeMount：" + document.getElementById("myDiv").innerHTML)
        },
        // 在组件内容被渲染到页面之后自动执行的函数
        mounted() { // 绑定后自动执行
            alert("mounted：" + document.getElementById("myDiv").innerHTML)
        },
        // 当data中的数据发生变化前执行
        beforeUpdate() {
            
            alert("beforeUpdate：" + document.getElementById("myDiv").innerHTML);
        },
        // 当data中的数据发生变化后执行
        updated() {
            alert("updated：" + document.getElementById("myDiv").innerHTML);
        },
        // 解除绑定前执行的函数
        beforeUnmount() {
            alert("beforeUnmount：" + document.getElementById("myDiv").innerHTML);
        },
        // 解除绑定后执行的函数
        unmounted() {
            alert("unmounted：" + document.getElementById("myDiv").innerHTML);
        },
        // 如果没有 template ，则取绑定元素下面的子元素作为 template
        template : "<div>{{message}}</div>"
    });

      // vm 就是vue应用的根组件
    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

    // 更新数据
    vm.$data.message = 'hello world!!!';

    // 解除绑定
    app.unmount();
</script>

posted @ 2022-05-12 11:17 谁有大饼阅读(107) 评论(0) 收藏举报

刷新页面返回顶部

vue对象的生命周期函数（钩子函数）

公告