一、创建(实例)

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

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

最新动态

Vue页面第一次加载会触发哪几个钩子?

在Vue中,当页面或组件第一次加载时,会触发一系列的生命周期钩子函数。这些钩子函数按照特定的顺序执行,允许开发者在组件的不同阶段执行代码。具体来说,Vue页面第一次加载时会触发beforeCreate、created、beforeMount和mounted这四个钩子函数。------

单页面应用和多页面应用区别及优缺点

单页面应用(SPA,Single Page Application)和多页面应用(MPA,Multi Page Application)是两种常见的Web应用程序架构,它们在多个方面存在显著的区别,并且各自具有独特的优缺点。它们区别例如页面加载方式、页面切换、用户体验、开发复杂度。

Vue 内置组建 keep-alive 详解

Vue的keep-alive是一个内置组件,它主要用于缓存动态组件或路由组件的状态,避免不必要的重新渲染,从而提高应用性能和用户体验。在实际开发中,应根据具体需求选择合适的缓存策略,并合理使用keep-alive的属性和生命周期钩子来达到最佳效果。

vue路由的钩子函数详解

在Vue.js中,Vue Router 是一个官方提供的路由管理器,它允许你以单页面应用(SPA)的方式构建复杂的用户界面。Vue Router 提供了一系列的钩子函数(也称为导航守卫),允许你在路由跳转过程中执行一些逻辑操作,比如权限验证、数据预取等。

Vue组件间的参数传递

在Vue.js应用中,组件间的参数传递是一个常见的需求。Vue提供了多种方法来实现这一点,包括使用props、事件、Vuex、以及Vue 3中的Composition API等。这些方法各有优缺点,选择哪一种方法取决于你的具体需求和项目的复杂度。对于简单的父子通信,props和事件通常是足够的。对于更复杂的状态管理,Vuex或Composition API可能是更好的选择。

Get和Post请求有哪些区别?

GET和POST请求是HTTP协议中定义的两种基本请求方法,它们在数据传输方式、缓存处理、安全性、幂等性、数据长度限制、书签保存与历史记录、数据类型限制以及TCP数据包数量等方面都存在显著的区别。

js添加、移除、移动、复制、创建和查找节点

在JavaScript中,处理DOM(文档对象模型)节点是一项常见的任务。以下是一些基本操作的示例,包括添加、移除、移动、复制、创建和查找节点。

js去除字符串空格有哪些方法?

JavaScript中,有多种方法可以去除字符串中的空格。 trim() 方法适用于去除字符串两端的空白字符。 正则表达式 replace 方法适用于去除所有类型的空白字符,包括空格、制表符、换行符等。 split 和 join 方法以及数组方法 filter 和 join 可以用于去除所有空格,但需要注意它们不会去除其他类型的空白字符。

js请求一次哪些地方会有缓存处理?

在JavaScript中,进行HTTP请求时,缓存处理可以在多个层次和位置发生。包括浏览器缓存、Service Worker、HTTP库和框架、应用层缓存、CDN缓存以及代理服务器缓存。理解和利用这些缓存机制可以显著提高应用程序的性能和用户体验。

MVVM 架构模式的工作原理详解

MVVM(Model-View-ViewModel)是一种用于构建用户界面的软件架构模式,其名称代表着三个核心组成部分:Model(模型)、View(视图)和ViewModel(视图模型)。