vue生命周期

生命周期?何为生命周期?表示一个程序的初始化以及程序结束经过的流程!接下来看一下Vue官方实例的声明周期图示!

上面的流程展示了8个不同时段的函数,都是在响应时刻自动执行的!

<div id="app">
    {{desc}}
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            desc:"这是用于学习"
        },
        beforeCreate:function(){
            console.log('beforeCreate')
        },
        created:function(){
            console.log('created')
        },
        beforeMount:function(){
            console.log('beforeMount')
        },
        mounted:function(){
            console.log('mounted')
        },
        beforeDestroy:function(){
            console.log('beforeDestory')
        },
        destroyed:function(){
            console.log('destoryed')
        },
        beforeUpdate:function(){
            console.log('beforeUpdate')
        },
        updated:function(){
            console.log('updated')
        }

    })
</script>

程序运行结构如下图

发现前四个函数以及被自动执行,那么剩余的为何不自动执行呢?

beforeDestroy,和destroyed表示在实例销毁的时候执行,

使用app.$destroy()可以销毁vue实例,但是此时页面不会更新数据!但是app.desc改变model层则无法改变视图层,因为此时的vue实例已经被销毁了,实例销毁则会触发这两个事件!

beforUpdate和updated是数据层被改变时候触发!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(53):利用FMS快速创建一个文本聊天室

先来看客户端fla的构成: 第一帧:登录界面 ? 第一帧的代码: import flash.events.MouseEvent; import com.adob...

21290
来自专栏沃趣科技

看各路神仙如何大战MySQL insecure warning报警有感

一、问题由来 mysql在5.6.5上开始在命令行中直接填入用户密码会提示错误,例如: $./mysql -h10.10.30.18 -uwoqutech -p...

47980
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》四、配置模板(提高代码编写效率)

上一篇博文,我们学习了idea的一些实用配置,相信大家也对idea这个开发工具有了一个大概的了解。今天我们来学习模板的配置,idea提供很多模板从而提高编写代码...

1K70
来自专栏杨建荣的学习笔记

MySQL 5.7安装部署总结(r10笔记第77天)

之前搭建MySQL环境都是使用公司内部使用的脚本,其实说实话屏蔽了很多细节,对MySQL的安装还是了解比较肤浅,今天有个MySQL 5.7的数据迁移的任务,也...

374140
来自专栏菩提树下的杨过

FluorineFx:认证与授权

对认证与授权没啥概念的新同学,建议先看下 .net中的认证(authentication)与授权(authorization),然后再继续。 Flash/Fle...

27080
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件 v2.0.0.2版本。

下载地址:http://files.cnblogs.com/jyk/Page2.0.0.2_080701.rar 这回只有 dll文件。请把包里的文件拷贝到...

21660
来自专栏代码GG之家

SDL系列讲解(十一) SDL_QUIT流程

明天会将自己的很早的一部小说发出,一次发出写的所有的六章,如果时间,或者某天突然觉得可以续写了,那么就是它又一次起航了。 工作期间,码了一个记录工作的小说,有兴...

25250
来自专栏草根专栏

Entity Framework Core 2.0 入门

LearnEf.Console依赖LearnEf.Domains和LearnEf.Data:

878140
来自专栏落影的专栏

编译与链接过程的思考

前言 最近遇到一个错误,如下 ? 在解决过程中,回顾了很多知识,于是有了这篇文章。 关键词:预处理、编译、汇编、链接、动态链接库、静态链接库、真机调...

53690
来自专栏林德熙的博客

win2d 图片水印

首先需要使用 Nuget 安装 win2d ,安装参见win10 uwp win2d

10220

扫码关注云+社区

领取腾讯云代金券