详解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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JavaScript数组操作详解
Feb 04 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 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
利用php_imagick实现复古效果的方法
2016/10/18 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
精选奢华:THE LIST
2019/09/05 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
学生安全责任协议书
2016/03/22 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python