专栏首页sktjvue 生命周期

vue 生命周期

Vue.js 实例生命周期(原图出自于Vue.js 官网),如图2-2 所示。 init: 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2.0 中更名 为beforeCreate。 created :在实例创建之后调用。此时已完成数据绑定、事件方法,但尚未开始DOM 编 译,即未挂载到document 中。 beforeCompile: 在DOM 编译前调用。2.0 废弃了该方法,推荐使用created。 beforeMount: 2.0 新增的生命周期钩子,在mounted 之前运行。 compiled: 在编译结束时调用。此时所有指令已生效,数据变化已能触发DOM 更新,但 不保证

el 第一次插入文档之后调用。2.0 废弃了该方法,推荐使用mounted。这 个变化其实已经改变了ready这个生命周期状态,相当于取消了在

el 插入DOM 时调用,ready 会在第一次attached 后调用。操作

appendTo()),直接操作vm.

el 从DOM 删除时调用,而且必须是指令或 实例方法。2.0 中同样废弃了该方法。 beforeDestroy: 在开始销毁实例时调用,此刻实例仍然有效。 destroyed: 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑,子实例也被销毁。 beforeUpdate: 2.0 新增的生命周期钩子,在实例挂载之后,再次更新实例(例如更新 data)时会调用该方法,此时尚未更新DOM 结构。 updated:2.0 新增的生命周期钩子,在实例挂载之后,再次更新实例并更新完DOM 结构 后调用。 activated :2.0 新增的生命周期钩子,需要配合动态组件keep-live 属性使用。在动态 组件初始化渲染的过程中调用该方法。 deactivated :2.0 新增的生命周期钩子,需要配合动态组件keep-live 属性使用。在动 态组件移出的过程中调用该方法。

var vm = new Vue({   el : '#app',   init: function() {    console.log('init');   }, created: function() {    console.log('created');   },   beforeCompile: function() {    console.log('beforeCompile');   },   compiled: function() {    console.log('compiled');   },   attached: function() {    console.log('attached');   },   dettached: function() {    console.log('dettached');   },   beforeDestroy: function() {    console.log('beforeDestroy');   },   destroyed: function() {    console.log('destroyed');   },   ready: function() {    console.log('ready');    // 组件完成后调用

destroy();   } });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flask 鼠标进入时显示弹窗(flask 99)

    $(function () { var default_error_message = 'Server error, please try again lat...

    用户5760343
  • python 元组的列表排序

    random = [(2, 2), (3, 4), (4, 1), (1, 3)]

    用户5760343
  • bootstrap 模态框 弹出框

    ('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

    用户5760343
  • 还在纠结用不用ES6,不如来试试TypeScript

    The only limits in our life are those we impose on ourselves. 弱爆的 ES6 in bro...

    IMWeb前端团队
  • go语言实现sqrt的方法

    package mymath import "math" func InvSqrt(x float32) float32 { var xhalf flo...

    李海彬
  • Ruff OS让智能硬件开发变简单

    摘要 Ruff 是为那些懂 JS 而不懂嵌入式开发,又希望可以最快速实现自己创意设计的创客们服务的。 ? Ruff 介绍 Ruff 是一个支持 JavaScri...

    IT大咖说
  • 腾讯云服务器搭建ftp服务器

    云主机 操作系统:Ubuntu Server 14.04.1 LTS 32位 CPU:1核 内存:1GB 系统盘:20GB(本地磁盘) 数据盘:0GB 公网带宽...

    用户6468650
  • 一篇文章把你带入到JavaScript中的闭包与高级函数

    在JavaScript中,函数是一等公民。JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等...

    达达前端
  • SVM之简化版SMO算法

    SVM有很多实现,本篇关注其中最常用的一种,即序列最小优化(Sequential Minimal Optimization, 即SMO,算法的数学逻辑上一篇有介...

    用户6021899
  • 响铃:被带偏的智能家居,如何才能“逃出生天”

    近日,中兴在京召开了智能家居战略发布会,大喊包含“单品、整合、开放”三大要素的IOC产品战略。这把响铃的注意力再次拉回到这个“看似热闹,实则不温不火”的领域。...

    曾响铃

扫码关注云+社区

领取腾讯云代金券