详解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+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
jupyter notebook 多行输出实例
2020/04/09 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
国培教师自我鉴定
2014/02/12 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
学校开学标语
2014/10/06 职场文书
2014年就业工作总结
2014/11/26 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python