前端学习--Vue(4) 生命周期

这篇具有很好参考价值的文章主要介绍了前端学习--Vue(4) 生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、组件的生命周期

一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段

1.1 生命周期函数

前端学习--Vue(4) 生命周期

前端学习--Vue(4) 生命周期

 1.1.1 创建

(只执行一次)

created()

阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中

mounted()

阶段任务:最早可以操作dom元素

1.1.2 运行

(最少0次,最多n次)

beforeUpdate()

触发时机:数据发生变化

此时数据最新,但是UI结构还未变化

updated()

UI结构完成变化

阶段任务:数据变化后操作最新的dom结构

1.1.3 销毁

(只执行一次)

destroyed()

二、组件之间的数据共享

组件关系

父子

兄弟

2.1 父组件向子组件共享数据

使用自定义属性

前端学习--Vue(4) 生命周期

 2.2 子组件向父组件共享数据

自定义事件

前端学习--Vue(4) 生命周期

前端学习--Vue(4) 生命周期

 2.3 兄弟之间数据共享

EventBus

前端学习--Vue(4) 生命周期

① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象

② 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

 三、ref引用

jQuery简化程序员操作dom的过程

vue中程序员不需要操作dom,只需要维护数据(数据驱动视图)

3.1 概念

ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。

每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。

默认情况下, 组件的 $refs 指向一个空对象。

前端学习--Vue(4) 生命周期文章来源地址https://www.toymoban.com/news/detail-465751.html

到了这里,关于前端学习--Vue(4) 生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue父子组件生命周期执行顺序是什么?

    执行顺序:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载,即“父beforeCreate- 父create - 子beforeCreate- 子created - 子mounted - 父mounted”。 在单一组件中,钩子的执行顺序是beforeCreate- created - mounted-… -destroyed,但当父子组件嵌套时,父组件和子组件各拥有各自独

    2024年02月09日
    浏览(38)
  • 前端面试题——详解VUE的生命周期

    前端面试时,很多面试官都会问这样一道题,“学习过vue吗,了解VUE的生命周期吗”,因为vue它是现在前端用的最多的一个框架,想要找前端工作的朋友们还是有必要掌握一下vue的生命周期以及每个周期的作用。下面给大家详解一下vue的生命周期,也欢迎大家对其进行补充!

    2024年02月15日
    浏览(44)
  • 【React学习】React组件生命周期

    在 React 中,组件的生命周期是指组件从被创建到被销毁的整个过程。React框架提供了一系列生命周期方法,在不同的生命周期方法中,开发人员可以执行不同的操作,例如初始化状态、数据加载、渲染、更新等。一个组件的生命周期大致可以分为三个阶段,即组件挂载时,更

    2024年02月12日
    浏览(40)
  • 深入剖析Vue组件生命周期中的每个阶段

    Vue.js 是一款流行的 JavaScript 框架,用于构建用户界面。它采用了组件化的开发模式,组件是 Vue.js 的核心概念之一。Vue 组件的生命周期是指在组件被创建、渲染和销毁的过程中,Vue 实例会自动调用一系列的钩子函数。这些钩子函数可用于在组件的不同阶段执行特定的操作,

    2024年02月12日
    浏览(32)
  • 【前端】重学vue,vue生命周期基础知识了解一下

    上一篇有写到vue的node环境的安装,具体的地址node安装,可点过去看下安装步骤,目前去node官网下载默认是最新版本的18.15.0版本。这个版本可能有些高,可以选择跟目前项目匹配的版本下载安装即可。 如果项目启动遇到项目启动不成功,如下图 这样肯定是node版本的问题,解

    2023年04月09日
    浏览(54)
  • 【前端】Vue生命周期函数(详细讲解+中文图解)

    生命周期: 从vue实例产生开始到vue实例被销魂这段时间所经历的过程 vue实例的 创建和销毁过程 好比 人的一生从出现到死亡过程 。在其中一些 重大经历 ,也就是特殊时间点,我们可以做什么事情 在vue的一生中,从vue组件创建开始一直到其被销毁时的时间段中,也被建立了

    2024年02月13日
    浏览(68)
  • 前端页面点击刷新-触发vue生命周期加载最新数据

    需求背景:layout布局,页面头部通过定时器获取后端消息的伪消息通知功能,在点击消息时获取所有消息总数并且刷新页面,以便触发vue的生命周期重新获取所有消息,消息展示在content中。  要触发页面刷新,可以使用vue路由的router.push方法,添加一个动态的query参数,可以

    2024年02月21日
    浏览(53)
  • 前端开发框架生命周期详解:Vue、React和Angular

    作为前端开发者,掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中,Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期,包括每个阶段的含义、用途以及如何最大限度地利用它们。通过详细的代码示例和实用的技巧

    2024年02月13日
    浏览(53)
  • vue04---计算属性/监听(侦听)属性/Vue生命周期/组件介绍和使用/组件间通信/ref属性

    # 1 计算属性是基于它们的依赖变量进行缓存的 # 2 计算属性只有在它的相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算) # 3 计算属性就像Python中的property,可以把方法/函数伪装成属性 # 4 计算属性,必须有返回值 基本使用 重写过滤案

    2024年02月08日
    浏览(64)
  • 【React】React组件生命周期以及触发顺序(部分与vue做比较)

    最近在学习React,发现其中的生命周期跟Vue有一些共同点,但也有比较明显的区别,并且执行顺序也值得讨论一下,于是总结了一些资料在这里,作为学习记录。 由ReactDOM.render()触发 —— 初次渲染 constructor() —— 类组件中的构造函数 static getDerivedStateFromProps(props, state) 从pr

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包