script setup(基本用法)

script setup是 Vue3 的一个新语法糖，相比于普通的语法，简化了组合式API必须return的写法，拥有更好的运行时性能。

组件自动注册

<script lang="ts" setup>
    import assembly from '../components/HelloWorld'
</script>

<template>
  <div>
    <assembly />
  </div>
</template>

使用props和emit

HelloWorld.vue

<script lang="ts" setup>
  //import { defineProps, defineEmit } from 'vue' // props emit 自动可用无需导入
  const props = defineProps({
    msg: String,
  })
  const emit = defineEmits(['click'])
  const sonClick = () => {
    emit('click')
  }
</script>

template>
  <div>
    <div>
      {{ msg }}
    </div>
    <button @click="sonClick">按钮</button>
  </div>
</template>

home.vue

<script lang="ts" setup>
 import { ref } from 'vue'
 import assembly from '../components/HelloWorld'
 let value = ref('小明')
 const onClick = () => {
   value.value = '小红'
 }
</script>

<template>
  <div>
    <assembly @click="onClick" :msg="value" />
  </div>
</template>

计算属性(computed)和监听器(watch)

<script lang="ts" setup>
  import {reactive,computed,watch} from 'vue' // props emit
  const count = reactive({
    data: 1
  })
  //计算属性
  const change = computed(() => {
    return count.data * 2
  })
  //观察属性
  watch(
    change,
    (newVal, oldVal) => {
      console.log(`变化前：${oldVal}`)
      console.log(`变化后：${newVal}`)
    }, {
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
  )
  //点击事件
  const clickBtn = () => {
    count.data = count.data * 3
  }
</script>

官网：https://v3.cn.vuejs.org/api/sfc-script-setup.html
这篇文章比较全：https://blog.csdn.net/weixin_43931876/article/details/120058286