前端培训丁鹿学堂：vue3的setup语法糖总结（一）

vue3.2的setup语法糖

vue3.2的setup语法糖让写vue3变的非常方便和快捷。很多小伙伴还不怎么了解，我们这里做一下介绍。 使用：在script标签里添加setup即可。

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

data数据在setup中的使用

data中的数据不需要return，可以直接在template模板中使用了。

<script setup>
  import {ref} from 'vue'
  let msg = ref({
    name:'zhangsan',
    age:19
  })
</script>

method方法在setup中的使用

<template >
  <button @click="handleClick">click me</button>
</template>
<script setup>
  import {reactive} from 'vue'

  const data = reactive({
    aboutExeVisible: false,
  })
  const handleClick = () => {
    console.log('click...');
  }
</script>

watch在setup语法糖中的使用

<script setup>
  import {
    ref,
    watch,
  } from 'vue'
  let num = ref(0)
  let msg = ref('你好啊')
  watch([num,msg],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })
</script>

计算属性在setup语法糖中的使用

<script setup>
  import {
    reactive,
    computed,
  } from 'vue'
  let person = reactive({
    firstName:'张',
    lastName:'三'
  })
  person.fullName = computed(()=>{
    return person.firstName + '-' + person.lastName
  }) 
</script>