详解Vue生命周期的示例


Posted in Javascript onMarch 10, 2017

一 vue的生命周期如下图所示(很清晰)

 详解Vue生命周期的示例

二 vue生命周期的栗子

 注意触发vue的created事件以后,this便指向vue实例,这点很重要

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue生命周期</title>
    <script src="../js/vue.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
    <div class="test" style="border: 1px black dashed;padding: 8px;">
      {{a}}
    </div>
    <div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
      我是内容二
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          a: "我是内容,在控制台输入myVue.a=123456,可以改变我的值"
        },
        created: function () { 
          //在实例创建之后同步调用。此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调。
          //但是还没有开始 DOM 编译,$el 还不存在,但是实例存在,即this.a存在,可打印出来 。
          console.log("建立");
        },
        beforeCompile: function () {
          console.log("未开始编译");
        },
        compiled: function () { 
          //在编译结束后调用。此时所有的指令已生效,因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
          console.log("编译完成");
        },
        ready: function () { 
          //在编译结束和 $el 第一次插入文档之后调用,如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入(如 vm.$appendTo() 等方法或指令更新)才触发 ready 钩子。
          console.log("一切准备好了");
        },
        attached :function () { //myVue.$appendTo(".test2")暂时触发不了,不知道怎么解决
          //在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法(如 $appendTo())插入,直接操作 vm.$el 不会 触发这个钩子。
          console.log("插入DOM成功");
        },
        detached :function () { //触发事件 myVue.$destroy(true),其中参数true控制是否删除DOM节点或者myVue.$remove()
          //在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除,直接操作 vm.$el 不会 触发这个钩子。
          console.log("删除DOM成功");
        },
        beforeDestroy: function () { //触发方式,在console里面打myVue.$destroy();
          //在开始销毁实例时调用。此时实例仍然有功能。
          console.log("销毁前");
        },
        destroyed: function () {  //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
          //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑,注意是解绑不是销毁,所有的子实例也已经被销毁。
          console.log("已销毁");
        }
    });
    </script>
  </body>
</html>

将上面代码贴入后,在chrome控制台进行控制,刚开始载入页面的时候触发的事件是:

 详解Vue生命周期的示例

在控制台触发detached 事件如下(注意DOM已删除,但是实例仍然存在):

详解Vue生命周期的示例

 在控制台触发beforeDestroy和destroyed事件如下:(注意destroyed事件触发后,是解绑实例,不是删除实例)

详解Vue生命周期的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 #Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 #Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 #Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
keras 多gpu并行运行案例
2020/06/10 Python
python 实现表情识别
2020/11/21 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
王老吉广告词
2014/03/20 职场文书
学校欢迎标语
2014/06/18 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
企业整改报告范文
2014/11/08 职场文书
微观世界观后感
2015/06/10 职场文书
永远是春天观后感
2015/06/12 职场文书
古诗之感恩老师
2019/10/24 职场文书