Vue3.2中setup语法糖的使用教程分享

时空追梦

提示：vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须  return  出来， template 中才能使用；而在 Vue3.2 中只需要在  script  标签上加上  setup  属性，无需  return ， template  便可直接使用，非常的香啊！
提示：以下是本篇文章正文内容，下面案例可供参考

1、如何使用setup语法糖

只需在  script  标签上写上 setup 代码如下（示例）：

1. <template>
   
2. </template>
   
3. <script setup>
   
4. </script>
   
5. <style scoped lang="less">
   
6. </style>

复制代码

2、data数据的使用

由于  setup  不需写  return ，所以直接声明数据即可 代码如下（示例）：

1. <script setup>
   
2.     import {
   
3.       ref,
   
4. reactive,
   
5.       toRefs,
   
6.     } from 'vue'
   
7.     const data = reactive({
   
8.       patternVisible: false,
   
9.       debugVisible: false,
   
10.       aboutExeVisible: false,
    
11.     })
    
12.     const content = ref('content')
    
13.     //使用toRefs解构
    
14.     const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
    
15. </script>

复制代码

3、method方法的使用

代码如下（示例）：

1. <template >
   
2.     <button @click="onClickHelp">系统帮助</button>
   
3. </template>
   
4. <script setup>
   
5. import {reactive} from 'vue'
   
6. const data = reactive({
   
7.       aboutExeVisible: false,
   
8. })
   
9. // 点击帮助
   
10. const onClickHelp = () => {
    
11.     console.log(`系统帮助`)
    
12.     data.aboutExeVisible = true
    
13. }
    
14. </script>

复制代码

4、watchEffect的使用

代码如下（示例）：

1. <script setup>
   
2. import {
   
3.   ref,
   
4.   watchEffect,
   
5. } from 'vue'
   
6. let sum = ref(0)
   
7. watchEffect(()=>{
   
8.   const x1 = sum.value
   
9.   console.log('watchEffect所指定的回调执行了')
   
10. })
    
11. </script>

复制代码

5、watch的使用

代码如下（示例）：

1. <script setup>
   
2.     import {
   
3.       reactive,
   
4.       watch,
   
5.     } from 'vue'
   
6.      //数据
   
7.      let sum = ref(0)
   
8.      let msg = ref('你好啊')
   
9.      let person = reactive({
   
10.                     name:'张三',
    
11.                     age:18,
    
12.                     job:{
    
13.                       j1:{
    
14.                         salary:20
    
15.                       }
    
16.                     }
    
17.                   })
    
18.     // 两种监听格式
    
19.     watch([sum,msg],(newValue,oldValue)=>{
    
20.             console.log('sum或msg变了',newValue,oldValue)
    
21.           },{immediate:true})
    
22.      watch(()=>person.job,(newValue,oldValue)=>{
    
23.         console.log('person的job变化了',newValue,oldValue)
    
24.      },{deep:true})
    
25. </script>

复制代码

6、computed计算属性的使用

computed 计算属性有两种写法(简写和考虑读写的完整写法) 代码如下（示例）：

1. <script setup>
   
2.     import {
   
3.       reactive,
   
4.       computed,
   
5.     } from 'vue'
   
6.     //数据
   
7.     let person = reactive({
   
8.        firstName:'小',
   
9.        lastName:'叮当'
   
10.      })
    
11.     // 计算属性简写
    
12.     person.fullName = computed(()=>{
    
13.         return person.firstName + '-' + person.lastName
    
14.       })
    
15.     // 完整写法
    
16.     person.fullName = computed({
    
17.       get(){
    
18.         return person.firstName + '-' + person.lastName
    
19.       },
    
20.       set(value){
    
21.         const nameArr = value.split('-')
    
22.         person.firstName = nameArr[0]
    
23.         person.lastName = nameArr[1]
    
24.       }
    
25.     })
    
26. </script>

复制代码

7 、props父子传值的使用

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

1. <template>
   
2.   <span>{{props.name}}</span>
   
3. </template>
   
4. <script setup>
   
5.   import { defineProps } from 'vue'
   
6.   // 声明props
   
7.   const props = defineProps({
   
8.     name: {
   
9.       type: String,
   
10.       default: '11'
    
11.     }
    
12.   })  
    
13.   // 或者
    
14.   //const props = defineProps(['name'])
    
15. </script>

复制代码

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

1. <template>
   
2.   <child :name='name'/>  
   
3. </template>
   
4. <script setup>
   
5.     import {ref} from 'vue'
   
6.     // 引入子组件
   
7.     import child from './child.vue'
   
8.     let name= ref('小叮当')
   
9. </script>

复制代码

8 、emit子父传值的使用

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

1. <template>
   
2.    <a-button @click="isOk">
   
3.      确定
   
4.    </a-button>
   
5. </template>
   
6. <script setup>
   
7. import { defineEmits } from 'vue';
   
8. // emit
   
9. const emit = defineEmits(['aboutExeVisible'])
   
10. /**
    
11. * 方法
    
12. */
    
13. // 点击确定按钮
    
14. const isOk = () => {
    
15.   emit('aboutExeVisible');
    
16. }
    
17. </script>

复制代码

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

1. <template>
   
2.   <AdoutExe @aboutExeVisible="aboutExeHandleCancel" />
   
3. </template>
   
4. <script setup>
   
5. import {reactive} from 'vue'
   
6. // 导入子组件
   
7. import AdoutExe from '../components/AdoutExeCom'
   
8. const data = reactive({
   
9.   aboutExeVisible: false,
   
10. })
    
11. // content组件ref
    
12. // 关于系统隐藏
    
13. const aboutExeHandleCancel = () => {
    
14.   data.aboutExeVisible = false
    
15. }
    
16. </script>

复制代码

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

即 vue2 中的获取子组件的 ref ，直接在父组件中控制子组件方法和变量的方法
子组件代码如下（示例）：

1. <template>
   
2.     <p>{{data }}</p>
   
3. </template>
   
4. <script setup>
   
5. import {
   
6.   reactive,
   
7.   toRefs
   
8. } from 'vue'
   
9. /**
   
10. * 数据部分
    
11. * */
    
12. const data = reactive({
    
13.   modelVisible: false,
    
14.   historyVisible: false,
    
15.   reportVisible: false,
    
16. })
    
17. defineExpose({
    
18.   ...toRefs(data),
    
19. })
    
20. </script>

复制代码

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

1. <template>
   
2.     <button @click="onClickSetUp">点击</button>
   
3.     <Content ref="content" />
   
4. </template>
   
5. <script setup>
   
6. import {ref} from 'vue'
   
7. // content组件ref
   
8. const content = ref('content')
   
9. // 点击设置
   
10. const onClickSetUp = ({ key }) => {
    
11.    content.value.modelVisible = true
    
12. }
    
13. </script>
    
14. <style scoped lang="less">
    
15. </style>

复制代码

10、路由useRoute和us eRouter的使用

代码如下（示例）：

1. <script setup>
   
2.   import { useRoute, useRouter } from 'vue-router'
   
3.   // 声明
   
4.   const route = useRoute()
   
5.   const router = useRouter()
   
6.   // 获取query
   
7.   console.log(route.query)
   
8.   // 获取params
   
9.   console.log(route.params)
   
10.   // 路由跳转
    
11.   router.push({
    
12.       path: `/index`
    
13.   })
    
14. </script>

复制代码

11、store仓库的使用

代码如下（示例）：

1. <script setup>
   
2.   import { useStore } from 'vuex'
   
3.   import { num } from '../store/index'
   
4.   const store = useStore(num)
   
5.   // 获取Vuex的state
   
6.   console.log(store.state.number)
   
7.   // 获取Vuex的getters
   
8.   console.log(store.state.getNumber)
   
9.   // 提交mutations
   
10.   store.commit('fnName')
    
11.   // 分发actions的方法
    
12.   store.dispatch('fnName')
    
13. </script>

复制代码

12、await的支持

setup  语法糖中可直接使用  await ，不需要写  async  ，  setup  会自动变成  async setup
代码如下（示例）：

1. <script setup>
   
2.   import api from '../api/Api'
   
3.   const data = await Api.getData()
   
4.   console.log(data)
   
5. </script>

复制代码

13、provide 和 inject 祖孙传值

父组件代码如下（示例）

1. <template>
   
2.   <AdoutExe />
   
3. </template>
   
4. 
   
5. <script setup>
   
6.   import { ref,provide } from 'vue'
   
7.   import AdoutExe from '@/components/AdoutExeCom'
   
8. 
   
9.   let name = ref('Jerry')
   
10.   // 使用provide
    
11.   provide('provideState', {
    
12.     name,
    
13.     changeName: () => {
    
14.       name.value = '小叮当'
    
15.     }
    
16.   })
    
17. </script>
    
18. 子组件代码如下（示例）：
    
19. <script setup>
    
20.   import { inject } from 'vue'
    
21.   const provideState = inject('provideState')
    
22. 
    
23.   provideState.changeName()
    
24. </script>

复制代码

以上就是Vue3.2中setup语法糖的使用教程分享的详细内容，更多关于Vue setup语法糖的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/2845262ey.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！