系统定制开发vue3 setup写法（语法糖版本）

.2 系统定制开发版本开始才能使用语法糖！

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

1、如何使用setup

只需在 script 标签上写上 setup

代码如下（示例）：

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

2、data数据的使用

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、method方法的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、watchEffect的使用

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

5、watch的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6、的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

7 、props父子传值的使用

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

8 、emit子父传值的使用

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

<template>   <a-button @click="isOk">     确定   </a-button></template><script setup>import { defineEmits } from 'vue';// emitconst 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

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

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

<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组件refconst content = ref('content')// 点击设置const onClickSetUp = ({ key }) => {   content.value.modelVisible = true}</script><style scoped lang="less"></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

10、路由useRoute和us eRouter的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

11、store仓库的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

12、await的支持

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

13、provide 和 inject 祖孙传值

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24