一、创建(实例)

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可能是更好的选择。

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

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

Vue实现路由跳转的方式有几种?

Vue.js中通过Vue Router实现路由跳转的方式主要包括使用 <router-link> 组件进行声明式导航,以及使用编程式导航(如 this.$router.push 和 this.$router.replace)。在Vue 3中,组合式API提供了更灵活的方式来访问和使用路由实例。无论使用哪种方式,都可以根据应用的需求灵活选择。

两种实现前端路由的方式

前端路由是现代单页应用(SPA, Single Page Application)中常用的技术,用于在不重新加载整个页面的情况下改变浏览器的URL和显示的内容。实现前端路由主要有两种方式:基于Hash的方式和基于History API的方式。

Vue 中 key 值的作用?

在 Vue.js 中,key 值是一个非常重要的属性,特别是在处理列表渲染(即使用 v-for 指令)时。key 值的主要作用是提高 Vue 的渲染效率和准确性,确保组件的状态管理更加可靠。

Vue 双向数据绑定原理

Vue的双向数据绑定原理是通过数据劫持和发布-订阅模式实现的。数据劫持使得Vue能够感知数据的变化,而发布-订阅模式则使得Vue能够在数据变化时通知所有依赖该数据的视图进行更新。

轻松 一刻