Vue3.2 setup syntactic sugar summary

foreword

提示：Vue3.2 版本开始才能使用语法糖！
Vue3.0 return出来， template中才能使用； Vue3.2中只需要在script -Add the script setup attribute to the label, you can use it directly without return , template , very fragrant!

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

1. How to use setup syntactic sugar

Just write setup on the script label

 <template>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>

Second, the use of data data

Since setup not need to write return , so you can directly declare the data

 <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>

Third, the use of the method 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>

Fourth, the use of watchEffect

 <script setup>
import {
  ref,
  watchEffect,
} from 'vue'

let sum = ref(0)

watchEffect(()=>{
  const x1 = sum.value
  console.log('watchEffect所指定的回调执行了')
})
</script>

Five, the use of 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>

Six, the use of computed properties

There are two ways of writing computed properties (shorthand and full writing considering read and write)

 <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>

Seven, the use of props parent-child value transfer

 <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>

Eight, the use of emit child-parent transfer value

 <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>

Nine, get the child component ref variable and defineExpose exposure

That is, in vue2, the ref of the child component is obtained, and the method of directly controlling the method and variable of the child component in the parent component

 <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>

Ten, the use of routing useRoute and useRouter

 <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>

11. Use of store warehouse

 <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>

Twelve, await support

setup语法糖中可await 3b17e62c91aea2606962533025f97501--- ，不需要写async ， setup会自动变成async setup

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

Thirteen, provide and inject grandchildren value

 <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>

Summarize

提示：这里对文章进行总结：

For example: The above is a summary of my own learning setup syntax sugar from blogs. It is achievable to use it in the project. If I write something wrong or my method is not used correctly, tell me, and I will change it immediately. clatter! If you think the articles I wrote can be very useful, you are welcome to like, collect, follow, and follow the bloggers so you don't get lost! If you are not busy with work, we will continue to update! Welcome to see other articles of Tinkerbell~

Vue3.2 setup syntactic sugar summary