一、创建(实例)

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实例时执行

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

最新动态

React 组件有哪两种定义方式?

React 组件的两种主要定义方式是函数定义方式和类定义方式。函数定义方式包括传统的函数声明和箭头函数两种语法形式,适用于创建无状态的纯展示组件。类定义方式则提供了更多的功能和生命周期方法,适用于需要管理状态和生命周期的复杂组件。

如何处理JavaScript中的异常?

在JavaScript中,处理异常是通过使用try...catch语句来实现的。这种方法允许你捕获在try代码块中抛出的错误,并在catch代码块中处理这些错误。从而提高代码的健壮性和用户体验。

rem的原理是什么?

REM(Root EM)的原理是基于HTML根元素的字体大小来定义其他元素的字体大小和布局。它简化了跨浏览器和设备的布局调整,增强了用户体验,并广泛应用于响应式设计中。

如何实现CSS的字体图标?

实现CSS字体图标(Font Icons)通常涉及以下几个步骤:1.选择或创建字体图标集;2.引入字体文件;3.定义CSS规则;4.在HTML中使用图标。

媒体查询使用的是什么方法?

媒体查询使用的方法主要涉及到CSS中的@media规则,它允许开发者根据设备的不同特性(如窗口宽度、屏幕比例、设备方向、分辨率等)来应用不同的样式规则。

如何禁用href 跳转页面 或 定位链接

在网页开发中,如果你希望禁用一个 <a> 标签的默认跳转行为或定位链接行为,有几种方法可以实现这一点。以下是一些常见的方法:1.使用 JavaScript 阻止默认行为;2.将 href 属性设置为 javascript:void(0);3.移除 href 属性;4.使用 CSS 禁用指针事件(不推荐用于禁用链接)。

a标签中 active hover link visited 的顺序

在CSS中,为<a>标签(即超链接)定义样式时,a:link、a:visited、a:hover 和 a:active 这四种伪类的顺序通常被称为LVHA顺序。这个顺序代表:1. Link (未访问过的链接):a:link;2. Visited (已访问过的链接):a:visited;3. Hover (鼠标悬停在链接上):a:hover;4. Active (激活状态的链接,例如点击时):a:active

为什么通常给font-size 设置的字体为62.5%

给font-size设置的字体为62.5%主要是为了方便单位换算和进行响应式布局。这种设置方式已经成为前端开发中的一种常见做法,并被广泛应用于各种网页和Web应用中。具体原因如下:1.浏览器默认字体大小;2.62.5%设置的换算;3.方便单位换算;4.响应式布局的优势。

%/px/em/rem有什么区别?

%/px/em/rem在CSS中都是长度单位,但它们有着本质的区别。 %常用于设置元素的宽度、高度以及边距等属性,特别是当需要相对于父元素进行布局时。 px常用于设置元素的精确尺寸,如边框宽度、内边距等。 em常用于设置文本的字体大小以及相对于文本大小的边距等属性。 rem常用于设置整个页面的布局,特别是当需要创建一个响应式布局时。

label标签的作用是什么?

label标签的作用主要体现在以下几个方面:1.为表单元素提供标签或说明文本;2.提高用户体验和可访问性;3.优化搜索引擎优化(SEO)效果;4.美化界面和明确关系。