一文掌握 vue3.2 setup 语法糖

最新推荐文章于 2024-04-30 08:54:27 发布
最新推荐文章于 2024-04-30 08:54:27 发布
阅读量165 收藏
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62051288/article/details/126418961
版权

提示：Vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何使用setup语法糖

只需在 script 标签上写上setup

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
</template>
<script setup>  </script>
<style scoped lang="less">  </style></pre>

二、data数据的使用

由于 setup 不需写 return，所以直接声明数据即可

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import {
     ref,
     reactive,
     toRefs,
   } from 'vue'

   const data = reactive({
     patternVisible: false,
     debugVisible: false,
     aboutExeVisible: false,
   })
   const content = ref('content')
   //使用toRefs解构
   const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data) </script></pre>

三、method方法的使用

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template >
   <button @click="onClickHelp">系统帮助</button>
</template>
<script setup> import {reactive} from 'vue'
const data = reactive({
     aboutExeVisible: false,
})
// 点击帮助
const onClickHelp = () => {
   console.log(`系统帮助`)
   data.aboutExeVisible = true
} </script></pre>

四、watchEffect的使用

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import {
 ref,
 watchEffect,
} from 'vue'
let sum = ref(0)
watchEffect(()=>{
 const x1 = sum.value
 console.log('watchEffect所指定的回调执行了')
}) </script></pre>

五、watch的使用

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import {
     reactive,
     watch,
   } from 'vue'
    //数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
                   name:'张三',
                   age:18,
                   job:{
                     j1:{
                       salary:20
                     }
                   }
                 })
   // 两种监听格式
   watch([sum,msg],(newValue,oldValue)=>{
           console.log('sum或msg变了',newValue,oldValue)
         },{immediate:true})
    watch(()=>person.job,(newValue,oldValue)=>{
       console.log('person的job变化了',newValue,oldValue)
     },{deep:true}) </script></pre>

六、computed计算属性的使用

computed计算属性有两种写法(简写和考虑读写的完整写法)

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import {
     reactive,
     computed,
   } from 'vue'
   //数据
   let person = reactive({
      firstName:'小',
      lastName:'叮当'
    })
   // 计算属性简写
   person.fullName = computed(()=>{
       return person.firstName + '-' + person.lastName
      })  
   // 完整写法
   person.fullName = computed({
     get(){
       return person.firstName + '-' + person.lastName
     },
     set(value){
       const nameArr = value.split('-')
       person.firstName = nameArr[0]
       person.lastName = nameArr[1]
     }
   }) </script></pre>

七、props父子传值的使用

子组件代码如下（示例）：

<pre class="prettyprint hljs dust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
 <span>{{props.name}}</span>
</template>
<script setup> import { defineProps } from 'vue'
 // 声明props
 const props = defineProps({
   name: {
     type: String,
     default: '11'
   } })  
 // 或者
 //const props = defineProps(['name']) </script>
父组件代码如下（示例）：
<template>
 <child :name='name'/>  
</template>
<script setup> import {ref} from 'vue'
   // 引入子组件
   import child from './child.vue'
   let name= ref('小叮当') </script></pre>

八、emit子父传值的使用

子组件代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
  <a-button @click="isOk">
    确定
  </a-button>
</template>
<script setup> import { defineEmits } from 'vue';
// emit
const emit = defineEmits(['aboutExeVisible'])
/**
* 方法
*/
// 点击确定按钮
const isOk = () => {
 emit('aboutExeVisible');
} </script>
父组件代码如下（示例）：
<template>
 <AdoutExe @aboutExeVisible="aboutExeHandleCancel" />
</template>
<script setup> import {reactive} from 'vue'
// 导入子组件
import AdoutExe from '../components/AdoutExeCom'
const data = reactive({
  aboutExeVisible: false,  
})
// content组件ref
// 关于系统隐藏
const aboutExeHandleCancel = () => {
 data.aboutExeVisible = false
} </script></pre>

九、获取子组件ref变量和defineExpose暴露

即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法

子组件代码如下（示例）：

<pre class="prettyprint hljs dust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
   <p>{{data }}</p>
</template>
<script setup> import {
 reactive,
 toRefs
} from 'vue'
/**
* 数据部分
* */
const data = reactive({
 modelVisible: false,
  historyVisible: false,  
  reportVisible: false,  
})
defineExpose({
 ...toRefs(data),
}) </script>
父组件代码如下（示例）：
<template>
   <button @click="onClickSetUp">点击</button>
   <Content ref="content" />
</template>
<script setup> import {ref} from 'vue'
// content组件ref
const content = ref('content')
// 点击设置
const onClickSetUp = ({ key }) => {
  content.value.modelVisible = true
} </script>
<style scoped lang="less">  </style></pre>

十、路由useRoute和useRouter的使用

代码如下（示例）：

<pre class="prettyprint hljs dust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import { useRoute, useRouter } from 'vue-router'
 // 声明
 const route = useRoute()
 const router = useRouter()
 // 获取query
 console.log(route.query)
 // 获取params
 console.log(route.params)
 // 路由跳转
 router.push({
     path: `/index`
 }) </script></pre>

十一、store仓库的使用

代码如下（示例）：

<pre class="prettyprint hljs dust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import { useStore } from 'vuex'
 import { num } from '../store/index'
 const store = useStore(num)
 // 获取Vuex的state
 console.log(store.state.number)
 // 获取Vuex的getters
 console.log(store.state.getNumber)
 // 提交mutations
 store.commit('fnName')
 // 分发actions的方法
 store.dispatch('fnName') </script></pre>

十二、await的支持

setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script setup> import Api from '../api/Api'
 const data = await Api.getData()
 console.log(data) </script></pre>

十三、provide 和 inject 祖孙传值

父组件代码如下（示例）：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><template>
 <AdoutExe />
</template>
<script setup> import { ref,provide } from 'vue'
 import AdoutExe from '@/components/AdoutExeCom'
 let name = ref('Jerry')
 // 使用provide
 provide('provideState', {
   name,
   changeName: () => {
     name.value = '小叮当'
   }
 }) </script>
子组件代码如下（示例）：
<script setup> import { inject } from 'vue'
 const provideState = inject('provideState')
 provideState.changeName() </script></pre>
Java技能树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.2 setup语法糖学习与理解
kk
03-10 2235
起初 Vue3.0 版本暴露变量必须 return 出来，template中才能使用。 现在在 vue3.2 版本只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。 先来一个小案例尝尝鲜，对比之前的写法少些繁琐的代码，代码看起来更简洁。 组件自动注册 在 script setup 中，引入的组件可以直接使用，无需再通过 components 进..
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在Vue3中，开发人员可以利用TypeScript(简称ts)的强类型特性和新的`setup`语法糖来构建更加安全和高效的应用。本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。 首先，让我们了解...
Vue3.2 中的 setup 语法糖，保证你看的明明白白
热门推荐
LoveSummer
07-14 2万+
根据原文内容的更新的内容主要有以下 5 块：起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；这样会导致在页面上变量会出现很多次。很不友好，vue3.2只需在script标签中添加setup。可以帮助我们解决这个问题。 分析引入 setup 后组件的变化 在 script setup 中， 引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!] 并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。 当我们的页面上需要
Vue3.2 setup语法糖汇总
油墨香^-^的博客
04-30 37
❝提示：vue3.2 版本开始才能使用语法糖！❞在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！「1、如何使用setup语法糖」只需在 script 标签上写上 setup「2、data数据的使用」❝。
vue3.2 setup
qq_41093271的博客
03-22 1058
vue3.2 到底更新了什么？ 1.SSR：服务端渲染优化。 2.New SFC Features：新的单文件组件特性。 3.Web Components：自定义 web 组件。 4.Effect Scope API：effect 作用域，用来直接控制响应式副作用的释放时间(computed 和 watchers)。 5.Performance Improvements：性能提升。 一、变量、方法不需要 return 出来 <template> <div class="home"&g
Vue3.2 setup 语法糖汇总
程序员成长指北
07-31 281
周末koala????来送福利啦为反馈广大读者粉丝们的大力支持，号主特地选了包邮5本《Vue.js从入门到项目实战(升级版)》实体书籍和12个现金红包作为抽奖礼品。具体参与方式请看文末！文末！文末！作者 |玲小叮当来源 | https://segmentfault.com/a/1190000041849882前言提示：vue3.2 版本开始才能使用语法糖！在 V...
基于vue3.2(setup语法糖)+vite创建的自己的ui组件库并实现按需导入.zip
最新发布
07-21
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。...
vue3.2后台管理系统demo.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3.2 + antd vue3. 基于vue3.2 + antd vue3的后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
vue3.2-master.zip
01-10
在这个"vue3.2-master.zip"压缩包中，包含的是Vue 3.2主分支的源代码，对于开发者来说，这是一个深入了解Vue 3.2实现细节和学习最新技术的好资源。 Vue 3.2 的核心改进之一是引入了 teleport 组件，它允许我们将...
vue3.0中setup使用(两种用法)
01-21
一、setup函数的特性以及作用 　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　　Vue3 的一大特性函数 —- setup 　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 　　2、setup函数是 Composition API（组合API）的入口 　　3、在setu
vue3 新语法 setup
yy_1028的博客
07-05 441
相信大家都已经很熟悉vue3的新特性，简单记录一下vue3中setup的一些语法 2. 组件props，attrs，slot，结构赋值时避免props失去响应性使用toRefs 3. 生命周期 因为setup执行在created后，所以可以在setup里面写onMounted 4. setup中不存在this，所以官方放出getCurrentInstance获取一些全局变量 5. watch watchEffect unwatch computed 6. provi
Vue3.2 中 Setup 知识点整理
高山景行，一尘不染
08-11 454
在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup。提示：以下是本篇文章正文内容，下面案例可供参考。...
Vue 3.2 setup 语法糖
weixin_40746230的博客
05-07 720
setup
Vue 3.2 发布， ＜script setup＞ + TS + Volar = 真香
mengyidan的专栏
08-10 5946
Vue 框架创始人尤雨溪在官博宣布 Vue 3.2正式发布，并且在其个人社交账号评价到： 随之也有用户在下面抱怨到，学不动了！ 哈哈，一群可爱的程序员儿~ 而针对用户提到的“如果不想暴露所有变量或方法，是不是只能放弃 setup 语法糖”时，尤雨溪解答到：“搞清楚暴露到模板和暴露到外部的区别！” 下面我们一起来看看新版本都有哪些期待已久的新特性吧！ Vue 3.2 包括许多重要的新功能和性能改进，就在新版本发布后不久，官方的CHANGELOG上，又增加了一个 Vue 3.2.1更新，只更新了一个bug
vue3.2 setup 语法糖汇总
m0_61643133的博客
12-12 576
提示： vue3.2 版本开始才能使用语法糖！在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！提示：以下是本篇文章正文内容，下面案例可供参考1、如何使用setup语法糖。
Vue3.2中的setup语法糖（易懂）
weixin_57677300的博客
12-05 2694
使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。父组件： 子组件： 运行结果： script setup 是 vue3.2 的新语法糖，并不是新增的功能模块，主要好处有：因为没有了setup函数，那么props，emit怎么获取呢？setup script语法糖提供了新的API来供我们使用。父组件： 子组件： 运行结果： 直接打印父组件传过来的值。defineEmits 子组件向父组件事件传递子组件： 父组件： 运行后
Vue3.2中的setup语法糖
杨振洲的博客
03-23 988
vue3.2 到底更新了什么？ 根据原文内容的更新的内容主要有以下 5 块： 1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建， 与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能， 比如(Workers、Service Workers) 2.New SFC Features：新的单文件组件特性 3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道 4.Effect Scope A
vue3.2setup语法糖中如何使用onmounted
05-26
在 Vue 3.2 的 `setup` 函数中，可以使用 `onMounted` 钩子函数来代替 Vue 2.x 中的 `mounted` 钩子函数。 使用 `onMounted` 的方法如下： ```javascript import { onMounted } from 'vue'; export default { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值