详解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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
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
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python 实现归并排序算法
2012/06/05 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python使用进程Process模块管理资源
2020/03/05 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
python自动化发送邮件实例讲解
2021/01/04 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
歌唱比赛策划方案
2014/06/06 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
出差报告格式模板
2014/11/06 职场文书
英文升职感谢信
2015/01/23 职场文书
教师师德表现自我评价
2015/03/05 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js