vue3新特性 Ⅱ

这篇具有很好参考价值的文章主要介绍了vue3新特性 Ⅱ。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

setup()中使用生命周期函数

在生命周期钩子前加上on来访问 并且需要保持小驼峰的命名方式,setup中的生命周期函数不包括beforeCreatecreated

vue3 onmounted,前端学习笔记,vue3学习,前端

onMounted:比以前的mounted有优势,以前生命周期函数只能存在一个,现在可以存在多个,可以根据业务需要拆分。

<template>
  <div>
  </div>
</template>
<script>
import { onMounted } from 'vue'

export default {
    setup(){
        onMounted(() =>{
          console.log("生命周期函数:onMounted")
        } )
        onMounted(() =>{
          console.log("生命周期函数:onMounted")
        } )
    }
}
</script>

<style>

</style>

 vue3 onmounted,前端学习笔记,vue3学习,前端

 Provide / Inject

 ▣ provide() / inject()实现嵌套组件之间的数据传递

 ▣只能在setup()函数中使用

 ▣父组件中使用provide()向下传递数据

 ▣子组件中使用inject()获取上层传递过来的数据

 ▣不限层级(只能父组件向子组件传递数据,不能反向)

vue3 onmounted,前端学习笔记,vue3学习,前端

<template>
  <v3_special msg="数据"></v3_special>
  <!-- 路由的显示入口 -->
  <!-- <router-view> -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  <!-- </router-view> -->
  <router-view></router-view>
</template>

<script>
     
import v3_special from "./views/Vue3_Sp2.vue"
import { provide } from 'vue'
export default {
  name: 'App',
  components: {
     v3_special
  },
  setup(){
    provide("key","我是key对应的值,来自父组件")
  },
  data(){
    return{
        title:"数据传递标题",
        age:20,
        names:["iren","maike"],
        zi_to_fu_text:""
    }
  }
}
</script>

<style scoped>

</style>
<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>
<script>
import { onMounted, inject } from 'vue'

export default {
    setup(){
        onMounted(() =>{
          console.log("生命周期函数:onMounted");
        } )
        const msg = inject("key");
        return{
          msg
        }
    }
}
</script>

<style>

</style>

 

Fragment 不再限于模板中的单个根节点

 以前外层只允许一个根节点,即最外层会包一个div,现在可以不用。

以前:                                                        现在:

vue3 onmounted,前端学习笔记,vue3学习,前端                ​​​​​​​        ​​​​​​​        vue3 onmounted,前端学习笔记,vue3学习,前端​​​​​​​文章来源地址https://www.toymoban.com/news/detail-768845.html

到了这里,关于vue3新特性 Ⅱ的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue3学习笔记

    源码升级 Vue2是通过Object.defineProperty实现响应式,Vue3是通过 Proxy 实现响应式 重写虚拟DOM的实现和Tree-Sharking 1.1 使用Vue-cli创建 官方文档:Vue-cli 1.2 使用Vite创建 官方文档:V3 vite官网:Vite 什么是vite?—— 官网定义是下一代前端构建工具。 优势如下: 开发环境中,无需打包操

    2024年02月12日
    浏览(44)
  • Vue3学习-01_前端工程化与webpack

    最近在学习Vue知识,参照的教程是黑马程序员官网提供的免费前端教程,这里记录一下自己的学习笔记以及遇到的相关问题。 前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上,就是实现前

    2024年02月13日
    浏览(71)
  • [Vue]Vue3学习笔记(尚硅谷)

    本笔记根据如下笔记和视频进行整理 老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU 笔记在线版: https://note.youdao.com/s/5vP46EPC 视频:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 使用vue-cli创建Vue3项目,需要确保vue-cli版本在4.5.0以上。 使用vue-cli创建Vue3项目 vit

    2024年02月01日
    浏览(43)
  • 前端笔记(11) Vue3 Router 编程式导航 router.push router.replace

    在上篇博客Vue3 Router 监听路由参数变化中,我们使用 router-link 创建 a 标签来定义导航链接: 除了 router-link ,我们还可以借助 router 的实例方法,通过编写代码来实现: router.push 方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

    2024年02月07日
    浏览(57)
  • Vue3学习笔记(9.6)

    Vue3混入 混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 选项合并 当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。 比如,数据对象在内

    2023年04月09日
    浏览(37)
  • 学习笔记之Vue3(七)

    一、Vue3简介 2020年9月18日,Vue.js发布3.0版本, 代号: One Piece (海贼王) 耗时2年多、2600+次提交、 30+个RFC、 600+次PR、 99位贡献者 github 上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0 二、Vue3带来了什么 1.性能的提升 打包大小减少41%; 初次渲染快55%,更新渲染快133%; 内存

    2024年02月07日
    浏览(35)
  • 【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日
    浏览(44)
  • [Vue3]学习笔记-customRef

    概念 按照文档中的说明:customRef 可以用来创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和trigger函数作为参数,并且应该返回一个带有 get 和 set 的对象。 其实大致意思就是,我们可以按照自己的业务需求去自定义

    2024年02月12日
    浏览(37)
  • vue3组件通信学习笔记

    父组件 子组件 父组件 子组件 子组件1 子组件2 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 父组件 子组件 孙子组件 1、选择式写法 1、info.js 2、在组件1中使用 3、在组件2中使用 2、组合式API写法 1、在modules文件夹下新建todo.js 2、在组件1中使用 3、在组件2中使

    2024年02月09日
    浏览(45)
  • 【Vue3】学习笔记-新的组件

    在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用 什么是Teleport?—— Teleport 是一种能够将我们的 组件html结构 移动到指定位置的技术。 等待异步组件时渲染一些额外内容,让应

    2024年02月16日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包