一、创建(实例)

1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)

使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用

2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el)

使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里

二、载入(数据)

1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)

2、mounted:数据和DOM都已经被渲染出来了 使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里

三、更新

1、beforeUpdate:检测到数据更新时,但在DOM更新前执行

2、updated:更新结束后执行

使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy:当要销毁vue实例时,在销毁前执行

2、destroyed:销毁vue实例时执行

" />
微信公众号
扫描关注微信公众号

最新动态

微信小程序蓝牙广播包解析指南:从入门到精通

大家好!今天我们来聊聊微信小程序中一个比较硬核但超级实用的功能——解析蓝牙广播包。如果你正在开发智能硬件相关的小程序,或者想通过蓝牙与设备通信,那这篇文章就是为你准备的!

CSS全屏背景图终极指南:解决排版难题

你是不是也遇到过这样的问题——明明设置了CSS背景图,但总是无法完美铺满整个屏幕?要么留白边,要么被裁剪,甚至在某些设备上直接显示异常?别担心,今天我们就来彻底解决这个烦人的问题!

Vue2 自定义指令能实现组件传值吗?详解方法与实战

先说结论:能,但不推荐作为主要传值手段。Vue2 的自定义指令通常用于 DOM 操作,但巧妙利用其钩子函数,也能实现组件间的数据传递。下面我们一步步拆解如何实现,以及为什么它更适合特殊场景而非常规通信。

为什么DOM不随数据变化?5种解决方案帮你彻底搞定!

数据变了但页面没反应?你可能遇到了这个经典问题!作为前端开发者,你一定遇到过这种场景:明明代码里的数据已经更新了,但页面上的DOM元素却像没听见一样纹丝不动。别慌!这其实是前端框架(甚至原生JS)中的常见问题,今天我们就来彻底解决它。

为什么在手机上直接使用原生select组件可能不是最佳选择?

在移动端开发中,表单是用户交互的重要部分,而select下拉菜单是最常用的表单元素之一。然而,直接使用原生select在手机上可能会带来一系列问题,影响用户体验和功能实现。今天我们就来聊聊这些隐藏的坑,以及如何避免它们。

PDF转HTML的5种高效方法,一键搞定网页格式!

你是不是经常遇到需要把PDF转成HTML的情况?比如想把文档发布到网站,或者需要编辑PDF里的内容?别急,今天我就来分享几种超实用的PDF转HTML方法,总有一种适合你!

生活服务小程序开发全指南:从入门到上线

你是不是也想开发一个生活服务类小程序,但不知道从何入手?别担心,今天我们就来彻底拆解整个开发流程,让你轻松掌握从零到上线的所有关键步骤!

小程序制作的方法有哪些?3种高效方案任你选

想制作小程序但不知道从何入手?本文详细介绍3种主流的小程序制作方法,包括自主开发、模板搭建和外包定制,适合零基础小白快速上手!无论选择哪种方式,记住先明确你的小程序要解决什么问题。是卖货?展示信息?还是提供预约服务?想清楚这个,制作过程就会顺利多啦!

零基础入门服务端JavaScript开发:Node.js完全指南

为什么选择服务端JavaScript开发?JavaScript原本只能在浏览器中运行,但Node.js的出现让它具备了服务端开发能力。这意味着开发者可以使用同一种语言完成前后端开发,大大降低了学习成本。Node.js采用事件驱动、非阻塞I/O模型,特别适合处理高并发请求,是现代Web开发的理想选择。

微信小程序前后端搭建全流程:从零到上线的完整指南

本文详细讲解微信小程序从零开始的全栈开发流程,包括前端页面设计、后端服务搭建、前后端数据交互、测试调试以及最终上线部署的全过程,帮助开发者掌握小程序开发的完整生命周期。

轻松 一刻