详解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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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语法(2)
2006/10/09 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP如何使用Memcached
2016/04/05 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
puppeteer库入门初探
2019/01/09 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
python之随机数函数的实现示例
2020/12/30 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
手机被没收的检讨书
2014/10/04 职场文书
小学安全教育主题班会
2015/08/12 职场文书