首页 > 其他分享 >Vue — 生命周期

Vue — 生命周期

时间:2024-03-09 17:02:29浏览次数:27  
标签:生命周期 实例 DOM 调用 Vue 阶段 挂载

一、Vue的生命周期和生命周期的四个阶段

1、生命周期

一个Vue实例从创建到销毁的过程。

2.生命周期的四个阶段

(1)创建 :做一些初始化操作,Vue将普通数据转化为响应式数据;

(2)挂载:渲染模板,结合对应的数据渲染到视图,看到页面的渲染完成则可以认为已经完成了(1)(2)两个阶段;

(3)更新:数据修改,视图自动更新;

(4)销毁:关闭页面,销毁实例。

3.什么时候发送初始化请求比较好?什么时候可以开始操作dom?

(1)越早越好,创建阶段结束才可以

(2)dom渲染出来后,也就是挂载阶段结束才可以

二、Vue的声明周期函数

  1. beforeCreate:在实例初始化之后,数据观测 (data observation) 和 event/watcher 事件配置之前被调用。在这个阶段,实例的属性和方法都还未初始化。

  2. created:实例已经创建完成后调用。在这个阶段,可以访问实例的数据和方法,但是 DOM 元素还未被挂载。

  3. beforeMount:在挂载开始之前被调用。在这个阶段,模板编译已经完成,但是尚未将编译结果挂载到页面上。

  4. mounted:在挂载完成之后被调用。在这个阶段,实例已经被挂载到页面上,可以进行 DOM 操作。

  5. beforeUpdate:在数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在这里对数据进行修改。

  6. updated:在数据更新之后调用,发生在虚拟 DOM 重新渲染和打补丁之后。可以进行 DOM 操作。

  7. beforeDestroy:在实例销毁之前调用。在这个阶段,实例仍然完全可用,可以进行清理工作。

  8. destroyed:在实例销毁之后调用。在这个阶段,实例已经被销毁,无法再访问实例的数据和方法。

 

 

 

标签:生命周期,实例,DOM,调用,Vue,阶段,挂载
From: https://www.cnblogs.com/qinlinkun/p/18062966

相关文章

  • Vue — 监听器(watch)使用
    在Vue.js中,watch选项用于监视数据的变化,并在数据变化时执行相应的操作。watch可以监视一个或多个数据的变化,当被监视的数据发生变化时,可以触发预定义的回调函数。一、简单写法<textareaname=""id=""cols="30"rows="10"v-model="word"></textarea>watch:{......
  • Vue — 计算属性(computed)详解
    Vue.js中的计算属性是基于它的响应式系统来实现的,它可以根据Vue实例的数据状态来动态计算出新的属性值。在Vue组件中,计算属性常用于对数据进行处理和转换,以及动态生成一些需要的数据。一、使用方式1.定义计算属性: 在Vue组件中,通过在 computed 对象中定义计算属性名称及......
  • 好细的Vue安装与配置
    一、下载和安装Vue官网下载地址Download|Node.js 选择适合自己的版本,推荐LTS,长久稳定版本。 我这里选择的是WindowsInstaller(.msi)64-bit下载好后,双击下载的安装包。 点next  勾选Iaccept............,点next   这里建议更改为自己想要的的安装目录,......
  • 【vue3】学习对store中数据的使用
    src/store/modules/nav.jsimport{defineStore}from'pinia';import{handleTree}from'@/utils/ruoyi'import{list}from"@/api/nav/node";conststore=defineStore( 'nav', { state:()=>({ nodeList:[]......
  • 【前端Vue】社交信息头条项目完整笔记第1篇:一、项目初始化【附代码文档】
    社交媒体-信息头条项目完整开发笔记完整教程(附代码资料)主要内容讲述:一、项目初始化使用VueCLI创建项目,加入Git版本管理,调整初始目录结构,导入图标素材。二、登录注册准备,实现基本登录功能,登录状态提示,表单验证。三、个人中心,四、首页—文章列表TabBar处理,页面布局,处......
  • vue面试1
    生命周期函数(父子)顺序父beforeCreate =>.父created==>.父beforeMount==>子beforeCreate==> 子created==> 子beforeMount==> 子mounted==>父mounted更新顺序父beforeUpdate==>子beforeUpdate==>子updated==>父updated卸载顺序父beforeDestory/子before......
  • Vue3 组合函数拖拽
    代码exportfunctionuseDragMouse(dom,container){letcontainerX=0;letcontainerY=0;letstartX=0;letstartY=0;functiondragPage(e){container.value.style.left=e.pageX-startX+containerX+"px";container.valu......
  • 用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同这时候......
  • vue常量定义以及使用
    在Vue项目中,您可以在JS文件中定义常量,然后通过 Vue.prototype 在 main.js 中定义这些常量为全局变量,以便在Vue组件中直接使用。以下是如何实现这一点的步骤:定义常量首先,创建一个JS文件来定义您的常量。例如,您可以创建一个名为 constants.js 的文件,并在其中定义......
  • Vue面试题
    1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子? ......