Vue_Vue的生命周期

ゝ一世哀愁。 2022-12-10 08:43 157阅读 0赞

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期  
8个阶段：  
beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化事件和生命周期，生命周期函数会自动执行。  
created():创建，获取到数据和methods,但页面没有元素，是假的HTML，初始化data,methods和props及所有的选项，并给数据对象添加劫持。  
beforeMount():挂载之前，获取data数据和方法，但页面仍没有元素，会编译el选项，对应的结构作为数据，通过complie函数结合为虚拟DOM对象。  
mounted():挂载，获取到data数据和方法，HTML是可以操作的结构，会根据虚拟的DOM创建vm.$el,可真正操作HTML结构，并把el选项的模板代替。  
beforeUpdate():更新之前，数据更新完成，能得到最新数据，页面还没更新。  
updated():更新后，数据更新完成，可以得到最新数据，页面更新完成。  
beforeDestory():销毁之前，可以获取data数据、方法、HTML是真正的HTML,还没真正销毁。  
destoryed():销毁后，可以获取data数据，vm提供的DOM操作失效。  
这些阶段可以给用户在不同阶段添加1自己代码的机会。  
生命周期钩子 = 生命周期函数 = 生命周期事件，三个说法一个意思。  
以上解释均来自官网的生命周期图。

每个vue实例都要经过一系列的初始化过程，如设置数据监听，编译模板，将实例  
挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命  
钩子的函数，给了用户在不同阶段添加自己代码的机会

1.初始化显示
        beforeCreate()
        created()
        beforMount()
        mounted()：说明页面准备好了
        2.更新显示
        beforeUpdate()
        updated()
        3.死亡
        beforeDestory()
        destoryed()
        常用的生命周期方法
        created()/mounted():发送ajax请求，启动定时器等异步任务
        bedoreDestory():做收尾工作：如：清除定时器

实例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                var app = new Vue({
                    el:"#app",
                    data() {
                        return {
                            isShow:true,
                        }
                    },
                 beforeCreate() {
                     console.log("beforeCreate()");
                 },
                 created() {
                    console.log("created()");
                 },
                 beforeMount() {
                     console.log("beforeMount()");
                 },
                    mounted() {//初始化显示之后立即调用，调用一次
                        console.log("mounted()");
                       this.timer = setInterval(() => {
                        this.isShow = !this.isShow;
                        //现在的this指向Vue,因为setInterval里面有箭头函数，this指向父元素的this
                        //因为mounted的this是Vue对象,所以现在的this仍然指向Vue
                        // alert(this.isShow);
                        // console.log(this);
                       }, 1000);
                    },
                    beforeUpdate() {
                        console.log("beforeUpdate()");
                    },
                    updated() {
                        console.log("updated()");
                    },
                    //清除定时器，如果不清除定时器，则标签内容不再变化，但计时器不会停止
                    beforeDestroy() {//死亡之前调用，调用一次
                    console.log("beforeDestroy()");
                        clearInterval(this.timer);
                    },
                    destroyed() {
                        console.log("destroyed()");
                    },
                    methods: {
                        destoryVue:function(){
                            this.$destroy();
                        }
                    },
                });
                
            };
        </script>
    </head>
    <body>
        <div id="app">
            <button @click="destoryVue">destory</button>
            <p v-show="isShow">热爱可抵岁月漫长</p>
            <p>{
       {isShow}}</p>
        </div>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bean的生命周期和BeanDefinition的生命周期

一、Bean的生命周期： ![format_png][] ![format_png 1][] 二、BeanDefinition的生命周期 [format_pn

Bertha 。/ 2022年11月25日 04:16/ 0 赞/ 200 阅读

相关生命周期

https://www.jianshu.com/p/b331d0e4b398 http://projects.wojtekmaj.pl/react-lifecycle-met

r囧r小猫/ 2022年11月25日 04:06/ 0 赞/ 196 阅读

相关 java session 生命周期_Session的生命周期

以前在学习的时候没怎么注意，今天又回过头来仔细研究研究了一下Session的生命周期。 Session存储在服务器端，一般为了防止在服务器的内存中(为了高速存取)，Sessi

野性酷女/ 2022年11月06日 09:50/ 0 赞/ 200 阅读

相关 python对象的生命周期_python对象的生命周期

引言碰到以下问题：代码1： from Tkinter import \ root = Tk() photo = PhotoImage(file=r'E:\\wor

清疚/ 2022年10月27日 14:56/ 0 赞/ 152 阅读

相关 uni-app 应用生命周期、页面生命周期、组件生命周期的区别

页面加载过程：加载=》显示=》加载完成=》页面隐藏=》页面卸载触发页面生命周期： onLoad:监听页面加载 =》 onShow:监听页面显示 =》 onReady:监听

亦凉/ 2022年10月18日 11:23/ 0 赞/ 275 阅读

相关生命周期

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

我就是我/ 2022年06月02日 11:16/ 0 赞/ 260 阅读

相关 React（6）生命周期（组件生命周期、state生命周期）

12、生命周期参考链接： [React组件生命周期小结][React] 两个生命周期，分别是组件的生命周期，和状态变更的声明周期组件结构：父组件套用子组件

桃扇骨/ 2022年05月31日 08:08/ 0 赞/ 395 阅读

相关 jvm的生命周期和java类的生命周期

1.jvm的生命周期一个运行时的的java虚拟机实例的天职就是运行一个java程序。 1.1.JVM实例的诞生当一个程序启动，伴随的就是一个jvm

「爱情、让人受尽委屈。」/ 2022年05月22日 03:14/ 0 赞/ 226 阅读

相关微信小程序生命周期、页面生命周期、组件生命周期

1. 生命周期 App（全局）位置：项目根目录app.js文件 App({ onLaunch (options) { //

浅浅的花香味﹌/ 2021年10月29日 07:36/ 0 赞/ 414 阅读

相关 View生命周期与Activity生命周期的关系

一、View相关的生命周期 1、`Creation`（创建） Constructors（构造函数） onFinishInflate()：该方法当View

青旅半醒/ 2021年06月26日 16:06/ 0 赞/ 540 阅读