AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第六章】6-8 compositionAPI中的生命周期函数、provide和inject、模板中的ref

2022-09-27 510
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第六章】6-8 compositionAPI中的生命周期函数、provide和inject、模板中的ref

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇的文章中，我们一起学习了compositionAPI中的watch和watchEffect的使用和区别，本篇文章中我们将一起学习compositionAPI中最后的一部分内容：生命周期函数、provide、inject、模板中的ref。


生命周期函数


👆 【vue3从零开始】基础知识篇里面我们也有学习过生命周期函数，但是在compositionAPI中也给我们提供了类似的生命周期函数。


👉 在compositionAPI中的生命周期函数会与基础知识篇里面的有些许不同，有新增也有删减。


<script>
  const app = Vue.createApp({
    setup() {
      const {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated} = Vue
      const message = ref('Hello World')
      onBeforeMount(() => {
        console.log('onBeforeMount')
      })
      onMounted(() => {
        console.log('onMounted')
      })
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
      })
      onUpdated(() => {
        console.log('onUpdated')
      })
      const handleClick = () => {
        message.value = 'Hello JueJin'
      }
      return {message, handleClick}
    },
    template: `
      <div>
        <span @click="handleClick">{{message}}</span>
      </div>
    `
  });
  const vm = app.mount('#root');
</script>
复制代码


  • 在compositionAPI中，生命周期函数也需要单独从Vue中解构出来使用。


  • onBeforeMount函数类似于基础篇中的beforeMount函数。


  • onMounted函数类似于基础篇中的mounted函数。


  • 以此类推，其他基础篇中的生命周期函数也只是在加了一个on前缀。


  • 还有beforeUnmount和unmouted函数大家可以自己试试哦~


79I$2{O3V8_~9PM]%9ID%KN.png


由于setup函数的特性，setup函数执行时间是在beforeCreate函数和created函数之间，这两个生命周期函数中需要执行的东西直接写在setup函数中就可以了，所以在compositionAPI中是没有beforeCreate函数和created函数的。


除了基础篇的部分生命周期函数之外，compositionAPI中还新增了两个生命周期函数：onRenderTracked、onRenderTriggered


const {onRenderTracked, onRenderTriggered} = Vue
onRenderTracked(() => {
    console.log('onRenderTracked')
})
onRenderTriggered(() => {
    console.log('onRenderTriggered')
})
复制代码


  • onRenderTracked函数表示每次渲染后重新收集响应式依赖。


  • onRenderTriggered函数表示每次触发页面重新渲染时自动执行。


{5Y{C[}@H5~[DOWSN2IT~8M.png


provide和inject


👆 在基础知识篇中，我们也一起学习过provide和inject的使用方法，主要就是组件和组件之间传递参数时使用的，可以跨组件去传参。


👉 在compositionAPI中也可以通过provide和inject方法去给组件传递参数。


const app = Vue.createApp({
    setup() {
      const {ref, provide} = Vue
      const message = ref('Hello World')
      provide('message', message)
      return { }
    },
    template: `
      <div>
        <child />
      </div>
    `
  });
复制代码


  • 首先我们在根组件中使用provide方法，在provide方法里面是一个key、value的方式赋值的。


app.component('child', {
    setup(){
      const {inject} = Vue
      const message = inject('message')
      return {message}
    },
    template: `
      <div>
        <span>{{message}}</span>
      </div>
    `
  })
复制代码


  • 然后我们在定义一个子组件，子组件中通过inject方法去接收根组件传递过来的值，并return给外部。


GUNVA88%T1MC}S28N8K%JKY.png


✍ 由于vue的特性原因，父组件传递给子组件的数据，在子组件中是不允许直接修改的，想要修改的话，必须调用父组件的方法，在父组件中去修改传递过来的数据值。


app.component('child', {
    setup(){
      const {inject} = Vue
      const message = inject('message')
      const handleClick = () => {
        message.value = 'Hello JueJin'
      }
      return {message, handleClick}
    },
    template: `
      <div>
        <span @click="handleClick">{{message}}</span>
      </div>
    `
  })
复制代码


YI6A_%$PL31JDSSQ9[W7L~I.png


👋 但是在compositionAPI中传递的数据，是可以直接修改的，那么要怎么避免这种问题出现呢？


setup() {
    const {ref, provide, readonly} = Vue
    const message = ref('Hello World')
    provide('message', readonly(message))
    provide('changeMessage', () => {
        message.value = 'Hello Vue.js'
    })
    return { }
},
复制代码


  • 只需要在根组件中传递参数时，给参数添加一个readonly函数（此函数也是从Vue中解构出来的）。


  • 然后在定义一个修改数据值的方法，并用provide函数传递给子组件。


readonly函数也是从Vue中解构出来的，表示函数里面的数据值为只读状态不可修改。这样就可以避免子组件直接修改父组件的数据值了。


setup(){
    const {inject} = Vue
    const message = inject('message')
    const changeMessage = inject('changeMessage')
    const handleClick = () => {
        changeMessage()
    }
    return {message, handleClick}
},
复制代码


  • 子组件中需要接收根组件传递过来的方法，并在触发点击事件时调用根组件修改数据值的方法。


CD]LR%31{_FF])B[C3S_727.png


模板中的ref


💭 模板中的ref是以前在基础知识篇中学过的，是定义在DOM标签上的。


<div ref="hello">Hello World</div>
复制代码


如果我们需要获取到某个DOM元素，就需要通过this.$refs.xxx的方式获取。

想要在compositionAPI中获取到DOM元素该怎么做呢？


setup() {
    const { onMounted, ref } = Vue
    const hello = ref(null)
    onMounted(() => {
        console.log(hello.value)
    });
    return {hello}
},
复制代码


  • 首先我们定义和DOM元素中的ref值相同的变量值，并引用compositionAPI中的ref方法。


  • compositionAPI中的ref方法中传入的是一个null，不需要给它定义值。


  • 在compositionAPI中的生命周期函数里面输出一下这个变量值，就可以看到控制台中的DOM元素被打印出来了。


PX@$_9_URT6A{(V@YV$RT_J.png


总结


本篇文章主要是和大家一起学习了compositionAPI中的最后一部分知识点。了解了基础知识中的生命周期函数和compositionAPI中的生命周期函数的区别；了解了compositionAPI中组件间传参的方法：provide和inject，并引出了readonly方法表示只读类型；最后还了解了一下模板中的ref的使用方法。


compositionAPI的篇章就正式完结了，希望大家在看的同时也能学到更多，大家加油！！

文章标签：
JavaScript
蜡笔小心_
目录
相关文章
游客izzodqdjmth2i
|
11月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持，重构前端开发范式。性能优化与生态协同并进，兼顾易用性与工程化，引领Web开发迈向高效、可维护的新纪元。（238字）
游客izzodqdjmth2i
1283 139
AI侠客
|
11月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能，但仍需遵循最佳实践。合理使用 v-if、key、computed，避免深度监听，利用懒加载与虚拟列表，结合打包优化，方可充分发挥其性能优势。（239字）
AI侠客
677 1
34789737
|
11月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
749 0
YOLO创新改进大师
|
JavaScript 前端开发 API
Vue3入门到精通--ref以及ref相关函数
Vue3入门到精通--ref以及ref相关函数
YOLO创新改进大师
898 0
34789737
|
12月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
871 2
哇塞女孩
|
11月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
741 137
谢妹纸
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
1604 0
我们是幸福一家人
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
660 82
34789737
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1926 78
34789737
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
873 17