快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期

这篇具有很好参考价值的文章主要介绍了快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

很激动进入了 Vue 3 的学习,作为一个已经上线了三年多的框架,很多项目都开始使用 Vue 3 来编写了
这一组文章主要聚焦于 Vue 3 的新技术和新特性
如果想要学习基础的 Vue 语法可以看我专栏中的其他博客
Vue(一):Vue 入门与 Vue 指令
Vue(二):计算属性与 watch 监听器
Vue(三):Vue 生命周期与工程化开发
一篇文章快速通关 Vuex(适合小白学习)
Vue 框架前导:详解 Ajax
快速打通 Vue 3(一):基本介绍与组合式 API
快速打通 Vue 3(二):响应式对象基础
快速打通 Vue 3(三):Vue3 中的 watch 监听器与新特性
上一篇 Vue3 博客:快速打通 Vue 3(三):Vue3 中的 watch 监听器与新特性
后续还会继续更新,期待大家的关注!

因为我想要将 Vue3 分模块整理,后面要接一篇路由的整理,所以这篇文章会比较短,后面路由想保证量大管饱(bushi)。

06. 标签的 ref 属性

​ 当我们想要获取一个标签对应的 DOM 元素的时候在 JavaScript 中,我们通过 document.querySelector() 来借助类选择器的写法获取,但是在 Vue 中,我们的 DOM 元素是挂载在同一个网页上的,这些名称难免会重复,所以需要别的方式去获取。

6.1 用在普通标签上

这里就需要借助给标签加上 ref 属性

直接来上代码

<template>
    <h1 ref="h1">111</h1>
    <button @click="getLog">命令展示</button>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    const h1 = ref();
    const getLog = () => {
      console.log(h1.value);
    }
</script>

​ 这里我们书写了一个 h1 标签,给 h1 加上 ref 属性,属性值为 h1,下面来通过与属性值同名的响应式变量来获取这个 DOM 元素。
快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期,vue.js,前端,javascript

可以直接拿到这个对象,像我们之前去操作 DOM 元素那样,可以对它进行任何操作。

  • 补充:这里为什么不直接写 console.log(h1.vale) 而是要书写一个函数然后绑定事件?主要原因是我们执行 javaScript 代码的时候,这个元素还没有挂载完成,在后面学习生命周期后,可以通过钩子函数实现在挂载完成后打印。

6.2 用在组件标签上

<template>
<Son ref="son"></Son>
<button @click="showMessage">打印信息</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Son from './components/Son.vue';
const son = ref();
const showMessage = () => {
  console.log(son.value);
}
</script>

和上面相同,打印出来的是子组件的示例对象,但示例对象中的信息我们是无法拿到的,需要子组件去配置
defineExpose({暴露出去的信息})

<template>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const a = ref();
const b = ref();
const c = ref();

defineExpose({a, b, c});
</script>

快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期,vue.js,前端,javascript

我们就能拿到暴露出来的信息,也可以通过数组来导出。

07. 生命周期

Vue 组件实例在创建时要经历一系列的初始化步骤,在此过程中 Vue 会在特定的事件去调用特定的函数,从而让开发者有机会在特定的阶段去运行自己的代码,这些待定的函数称之为生命周期钩子。

Vue2 相比, Vue3 对生命周期做了简化,不再去写选项式API,而是采用函数的方式去代替,并且对各个生命周期的函数都做了简化:

  • Vue2 的生命周期

    创建阶段:beforeCreatecreated

    挂载阶段:beforeMountmounted

    更新阶段:beforeUpdateupdated

    销毁阶段:beforeDestroydestroyed

  • Vue3 的生命周期

    创建阶段:setup

    挂载阶段:onBeforeMountonMounted

    更新阶段:onBeforeUpdateonUpdated

    卸载阶段:onBeforeUnmountonUnmounted

​ 比较重要的两个阶段就是创建阶段和挂载阶段,在更新阶段我们可以向服务端请求数据,挂载完成后我们可以获取 DOM 元素然后对其进行操作。

​ 在 Vue3 中将其创建阶段简化为 setup,方便了代码的书写。

我们上面提到为什么不使用 console.log(h1.value) 直接打印而是要写个函数,就是因为当我们能看到那个按钮的时候说明已经挂载完毕了,可以来获取元素了,如果直接打印获取到的就是 undefined

但通过生命周期函数可以实现:

<template>
  <h1 ref="h1">111</h1>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  const h1 = ref();
  onMounted(() => {
    console.log(h1.value);
  })
</script>

我们在挂载完毕后再打印就能够获取到了。

再来查看一个父子组件的生命周期关系

<template>
<Son></Son>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';
import Son from './components/Son.vue';
console.log("父组件 - 创建阶段");
onBeforeMount(() => {
  console.log("父组件 - 挂载前阶段")
})
onMounted(() => {
  console.log("父组件 - 挂载后阶段")
})
onBeforeUpdate(() => {
  console.log("父组件 - 更新前阶段")
})
onBeforeUpdate(() => {
  console.log("父组件 - 更新后阶段")
})
</script>
<template>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted } from 'vue';

console.log("子组件 - 创建阶段");
onBeforeMount(() => {
  console.log("子组件 - 挂载前阶段")
})
onMounted(() => {
  console.log("子组件 - 挂载后阶段")
})
onBeforeUpdate(() => {
  console.log("子组件 - 更新前阶段")
})
onBeforeUpdate(() => {
  console.log("子组件 - 更新后阶段")
})
</script>

打印结果

快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期,vue.js,前端,javascript

先去加载完成子组件再去加载父组件,所以通过网络请求数据并且传入子组件需要在父组件的创建阶段完成。文章来源地址https://www.toymoban.com/news/detail-801802.html

到了这里,关于快速打通 Vue 3(四):标签的 ref 属性与 Vue3 生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Vue3全家桶 - Vue3 - 【7】生命周期

    Vue3官网-生命周期钩子函数; 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听、编译模板、挂载实例到 DOM ,以及在数据改变时更新 DOM 。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常见的是

    2024年03月13日
    浏览(56)
  • vue3的生命周期

    vue3中的选项式生命周期钩子基本与vue2中的大体相同,它们都是定义在 vue实例的对象参数中的函数,它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例 挂载,更新,卸载等过程中被调用的函数 以下是vue3中的主要选项式生命周期函数钩子: be

    2024年02月09日
    浏览(36)
  • 分析Vue3生命周期

    在Vue中,生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数(hook functions)组成。 以下是Vue组件生命周期的主要阶段: 1. 创建阶段:    - beforeCreate:在实例被创建之前调用,此时组件的响应式属性和事件还未初始化。    

    2024年01月25日
    浏览(34)
  • Vue3 的生命周期

    1、初始化阶段: 【1】beforeCreate == setup() data挂载之前 【2】created == setup() data挂载了,但是写的模板语法没有渲染到页面上 【3】beforeMount == onBeforeMount 挂载了,但是页面没有渲染 【4】mounted == onMounted 页面渲染结束 --------------------------------------全部Vue初始化完成了 ------------

    2024年02月09日
    浏览(43)
  • Vue(标签属性:ref、配置项:props、混入mixin、插件、样式属性:scroped)

    前面提及到了标签属性:keys 这里将了解ref:打标识 正常布置脚手架并创建入口文件main.js引入组件 给一个按钮获取上方的dom的方法,方法中使用什么进行获取dom元素 是使用获取id方法给标签设置id,直接操作dom?  错误❌ 既然原生js可以给dom添加id,那么Vue也有类似的标识方

    2024年02月02日
    浏览(34)
  • vue3-生命周期钩子函数

    声明周期函数onMounted ,onUnmounted,onUpdated onMounted:页面渲染之前执行,执行完,页面就出来了 onUnmounted:组件注销之前执行,执行完组件就不在页面显示了。如果隐藏组件就行执行。 onUpdated:当组件内的内容发生变化时,就会执行这个更新钩子函数,比如删除数组中的某个元素

    2024年02月11日
    浏览(42)
  • 【Vue3】学习笔记-生命周期

    Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate === setup() created ======= setup() beforeMount === onBeforeMount mounted ======= onMo

    2024年02月11日
    浏览(39)
  • Vue2(生命周期,列表排序,计算属性和监听器)

    前言 上一章博客我们讲解了Vue基础 这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器 一,生命周期 通常也叫生命周期回调函数、生命周期函数、生命周期钩子 vue初始化时在不同的阶段调用的不同函数 生命周期函数的 this 指向为vue实例,名字不能更改 1.1,生命周期函

    2024年02月13日
    浏览(48)
  • Vue快速入门,常用指令,生命周期

    Vue常用指令  案例:   Vue生命周期    

    2024年02月03日
    浏览(50)
  • 【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

    🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 1.新建HTML页面,引入Vue.js文件 2.在JS代码区域,创建Vue核心对象,进行数据绑定 3.编写视图 指令:HTML标签上带有Vs前缀的特殊属性,不同指令

    2024年02月07日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包