Vue3 script setup 语法糖

<script setup> ->单文件组件中使用组合API编译时的语法糖。优势：

• 减少版样内容，代码简洁

• 使用纯typescript声明props和emits

• 优异的运行性能

• 优异的IDE类型推断性能

1.基础用法

<script setup lang="ts">
</script> 

2.<script setup>声明的变量、函数以及import引入的组件和内容在模板中直接使用

以前：

// html
<p>{{ massage }}</p>
<News />
// script
<script>
  import { ref } from 'vue'
  import News from '@/components/News.vue'
  export default {
    components：{
      News
    },
    setup() {
      const massage = ref('这是一个组件')
        return{
          massage
        }
    }
  }
</script> 

现在：

// html
<p>{{ massage }}</p>
<News />
// script
<script setup>
  import { ref } from 'vue'
  import News from '@/components/News.vue'
  const massage = ref('这是一个组件')
</script>

3.组件数据传递:  defineProps 和 defineEmites

// 父组件
// html
<News @getNews="getNews" :title="message" />
// script
<script setup>
import from '@/components/News.vue'
import {ref} from 'vue'
const message = ref('这是一个父组件')
const getNews = (e) => {
  console.log(e) // 我是来自子组
}
</script>

// 子组件
// html
<div @click="handleClick">{{ props.title }}</div>
// js
<script setup>
const emits = defineEmits(['getNews'])
const props = defineProps({
  title: String
})
const handleClick = () => {
    emits('getNews', '我是来自子组件')
}
</script>

4.获取 useAttrs 和 useSlots

<script setup>
import {useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
console.log(attrs.NewsId) // 父组件传来的自定义属性
</script>

5.对外暴漏属性 - defineExpose

•  暴露属性给外部使用

  // 父组件
  // html
  <News ref="data"/>
  // js
  <script setup>
   import { ref, onMounted } from 'vue'
   import News from '@/components/News.vue'
   let data = ref(null)
   onMounted(() => {
     console.log(data.value.message) // 我来自子组件
     console.log(data.value.sex)     // 0
   })
  </script>

  // 子组件
  <script setup>
   import {ref} from 'vue'
   const message= ref('我来自子组件')
   const sex = ref(0)
   
   defineExpose({
     message, sex
   })
  </script>

6. async setup 

const post = await $http.post('/api/xxx')

7.css变量注入

<script setup>
  import { ref} from 'vue'
  const color= ref('red')
</script>
  
<style scoped>
  span {
    // 使用v-bind绑定变量
    color: v-bind('color')
  }  
</style>

8. nextTick

<script setup>
  import { nextTick } from 'vue'
  nextTick(() => {
    // ...
  })
</script>

9.路由导航守卫

<script setup>
  import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
  // 添加一个导航守卫，在当前组件将要离开时触发。
  onBeforeRouteLeave((to, from, next) => {
    next()
  })
  // 添加一个导航守卫，在当前组件更新时触发。
  // 在当前路由改变，但是该组件被复用时调用。
  onBeforeRouteUpdate((to, from, next) => {
    next()
  })
</script>