Vue 生命周期

最新推荐文章于 2024-06-16 12:11:30 发布

aysfbctcu511961230

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/r-mp/p/11224410.html

版权

生命周期-->生命周期钩子函数：一个组件从创建到销毁的一个过程就是生命周期

beforeCreate：创建前

1、组件创建会执行的一个生命周期函数，我们可以在当前生命周期中创建一个loading.当页面加载完成的时候讲loading移除

2、在当前生命周期函数中是访问不到其他生命周期函数以及data身上的属性

created:创建后(重)

1、当create生命周期函数执行的时候，会将data以及methods身上所有的属性和方法添加到vm的实例身上

2、created执行的时候会遍历data身上所有的属性，给这些属性添加一个getter/setter方法

3、我们可以在当前生命周期函数中进行前后端数据的请求(发起ajax)

beforeMount 挂载前

1、当前生命周期函数可以对data中的数据做最后的修改

2、如果在当前生命周期函数中添加的属性是没有getter和setter方法的。如果需要拥有的情况则用$set

3、当前生命周期函数中是模板和数据还未进行结合

mounted: 挂载后(重)

1、当前生命周期函数是数据和模板进行相结合，生成了真正的DOM结构

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

3、我们可以在当期生命周期函数中做一些插件的实例化(Swiper better-scroll echarts....)

ref：

定义: ref="名称"(名称必须是当前组件中独一无二的)

获取: this.$refs.名称

beforeDestroy: 销毁前(重)

1、在当前生命周期函数中我们依旧是可以访问到真实的DOM结构，因此我们可以在当前生命周期函数中做

事件的解绑,以及监听的移除等操作

destroyed:销毁后

1、当前生命周期函数执行的时候会将vm与模板之间的关联进行断开

2、在当前生命周期函数中我们无法通过ref来访问到真实的DOM结构了

beforeUpdate:更新前 (多次执行)

1、当数据更新前会执行的生命周期函数

2、当前生命周期是更新的数据还未和模板进行相结合，因此我们可以在当期生命周期函数中做更新数据的最后修改

updated:更新后 (多次执行)

1、当前函数是更新的数据和模板进行了相结合。

2、我们可以在当前生命周期函数中获取到数据更新后最新的DOM结构

3、我们一般情况下会在这里做插件的实例化，但是需要条件的判断。如果不加判断的情况下会非常耗费性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 ref="h2" id="box">{{msg}}</h2>
        <h2>{{obj.age}}</h2>
        <button @click="handleUpdate">数据更新</button>
    </div>


    <button οnclick="handleDestroy()">销毁</button>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        beforeCreate(){
            console.log("beforeCreate----");
            console.log(this.msg)
            console.log(this)
        },
        created(){
            console.log("created-----")
        },
        data:{
            msg:"1905",
            obj:{}
        },
        methods:{
            handleUpdate(){
                this.msg = "1902";
                // console.log(this.msg);
                // console.log(1);

                this.$nextTick(()=>{
                    console.log(document.getElementById("box").innerText);
                })
                
               
            }
        },
        beforeMount(){
            console.log("beforeMount----");
            // this.msg = "1902";
           // this.age = 20;
            this.$set(this.obj,"age",20)
          console.log(document.getElementById("app").innerHTML)
        },
        mounted(){
            console.log("mounted----")
            console.log(document.getElementById("app").innerHTML)
            console.log(this.$refs.h2);
        },
        beforeUpdate(){
            console.log("beforeUpdate ---")
            console.log(document.getElementById("app").innerHTML)
            this.msg = "不让你变成1902";
        },
        updated(){
            console.log("updated ---")


            // if(!this.swiper){
                
            //     this.swiper = new Swiper();
            // }


        },
        beforeDestroy(){
            console.log("beforeDestroy----")
            console.log(document.getElementById("app").innerHTML)
            console.log(this.$refs.h2);
        },
        destroyed(){
            console.log("destroyed")
            console.log(document.getElementById("app").innerHTML)
            console.log(this.$refs.h2);
        }
    })


    function handleDestroy() {
        vm.$destroy();
    }


/*
    $nextTick()：获取数据更新后最新的DOM结构

    面试题：
        nextTicke是同步的还是异步的?   
        同步的 而nextTick中的函数是 异步的


    我可以在当前函数中获取到数据更新后最新的DOM结构


    如何获取到数据更新后最新的DOM结构
        1、nextTick  (底层原理类似一个setTimeout 时间为20ms)
        2、wacth
        3、updated

*/
</script>

转载于:https://www.cnblogs.com/r-mp/p/11224410.html

aysfbctcu511961230

关注

0
点赞
踩
0

收藏

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

生命周期-->生命周期钩子函数：一个组件从创建到销毁的一个过程就是生命周期 beforeCreate：创建前 1、组件创建会执行的一个生命周期函数，我们可以在当前生命周期中创建一个loading.当页面加载完成的时候讲loading移除 2、在当前生命周期函数中是访问不到其他生命周期函数以及data身上的属性 ...
复制链接

扫一扫