介绍

• 每个 *.vue 文件最多只能有一个 <script setup> 块 (同时还能存在一个常规的 <script>)
• 该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。

文件结构

<template>
  <!-- Vue2 中，template 标签中只能有一个根元素，在 Vue3 中没有此限制 -->
  <!-- ... -->
</template>

<script setup>
  // ...
</script>

<style lang="scss" scoped>
  // 支持 CSS 变量注入 v-bind(color)
</style>

data

<script setup>
  import { reactive, ref, toRefs } from 'vue'
 
  // ref声明响应式数据，用于声明基本数据类型
  const name = ref('Jerry')
  // 修改
  name.value = 'Tom'
 
  // reactive声明响应式数据，用于声明引用数据类型
  const state = reactive({
    name: 'Jerry',
    sex: '男'
  })
  // 修改
  state.name = 'Tom'
  
  // 使用toRefs解构
  const {name, sex} = toRefs(state)
  // template可直接使用{{name}}、{{sex}}
</script>

method

<template>
  <!-- 调用方法 -->
  <button @click='changeName'>按钮</button>
</template>
 
<script setup>
  import { reactive } from 'vue'
 
  const state = reactive({
    name: 'Jery'
  })
 
  // 声明 method 方法
  const changeName = () => {
    state.name = 'Tom'
  }  
</script>

computed

<script setup>
  import { computed, ref } from 'vue'
 
  const count = ref(1)
 
  // 通过 computed 获得 doubleCount
  const doubleCount = computed(() => {
    return count.value * 2
  })
</script>

watch

<script setup>
  import { watch, reactive } from 'vue'
 
  const state = reactive({
    count: 1
  })
 
  // 声明方法
  const changeCount = () => {
    state.count = state.count * 2
  }
 
  // 监听count
  watch(
    () => state.count,
    (newVal, oldVal) => {
      console.log(state.count)
      console.log(`watch监听变化前的数据：${oldVal}`)
      console.log(`watch监听变化后的数据：${newVal}`)
    },
    {
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
  )
</script>

props 父传子

子组件

<template>
  <span>{{props.name}}</span>
  // 可省略【props.】
  <span>{{name}}</span>
</template>
 
<script setup>
  // import { defineProps } from 'vue'
  // defineProps在<script setup>中自动可用，无需导入
  // 需在.eslintrc.js文件中【globals】下配置【defineProps: true】
 
  // 声明props
  const props = defineProps({
    name: {
      type: String,
      default: ''
    }
  })  
</script>

父组件

<template>
  <child name='Jerry'/>  
</template>
 
<script setup>
  // 引入子组件(组件自动注册)
  import child from './child.vue'
</script>

emit 子传父

子组件