開始使用

/*不使用script-setup語法糖*/
<script>
import { defineComponent } from "vue"
export default defineComponent({
name: 'app',
})
</script>
​
/*使用script-setup語法糖*/
<script setup>
</script>

引用元件的變更

/*原先*/
<template>
<about />
</template>
<script>
import about from './about.vue'
import { defineComponent } from 
 
"vue"
export default defineComponent({
name: 'home',
components: { about }
})
</script>
​
/*用語法糖後*/
<template>
<about />
</template>
<script>
<script setup>
import about from './about.vue'
</script>
元件的引入使用已不再需要components註冊才能使用了，直接引入就可以在tamplate使用了，U1S1，這個更改讓程式碼看起來更舒服簡介了一些

變數使用的變更

/*原先*/
<template>
count:{{count}}
num:{{num}}
text:{{text}}
<el-button @click="handleClick">點選</el-button>
</template>
​
<script>
import { reactive, toRefs, ref } from 'vue'
export default {
name: '',
setup() {
/*這裡我列舉了三種宣告變數的方式*/
const count = ref(1)
const num = 2
const state 
 
= reactive({
text: "小黃在測試"
})
function handleClick(){
count.value++
}
/*不使用script-srtup語法糖需要匯出需要在template使用的變數和方法*/
return { count, num, ...toRefs(state),handleClick }
}
}
</script>
​
/*用語法糖後*/
<template>
count:{{count}}
num:{{num}}
/*這裡沒有使用toRefs展開變數，所以需要state.text*/
text:{{state.text}}
<el-button @click="handleClick">點選</el-button>
</template>
​
<script setup>
import { reactive, ref } from 'vue'
const count = ref(1)
const num = 2
const state = reactive({
text: "小黃在測試"
})
function handleClick(){
count.value++
}
</script>

使用script setup語法糖後變數和方法已不再需要return出去才能被template使用了，減少了程式碼量，看起來更加的美觀

props使用的變更

/*原先*/
/*子元件*/
<template>
{{foo}}
</tamplate>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name:'son',
props:{
foo:String
}
})
</script>
​
/*父元件*/
<template>
<About foo="我是小黃" />
</template>
<script>
import About from "../about/index.vue"
import {defineComponent} from 'vue'
export default defineComponent({
name:'father',
components:{About}
})
</script>
​
/*用語法糖後*/
/*子元件*/
<template>
{{foo}}
</tamplate>
<script setup>
import {defineProps} from 'vue'
const props = defineProps({
foo:String
})
console.log(props) // Proxy {foo: '我是小黃'}
</script>
/*父元件*/
<template>
<About foo="我是小黃" />
</template>
<script setup>
import About from "../about/index.vue"
</script>

通過 defineProps 指定當前props型別的同時，獲得上下文的props物件
在script中需要props[key]引用，而template中可直接呼叫key
用法上差異不大…

emit使用的變更

/*原先*/
<template>
<el-button @click="handleClick">點選</el-button>
</template>
<script>
export default{
setup(){
emit:['h-update','h-delete']
}
}
</script>
​
/*用語法糖後*/
<template>
<el-button @click="handleClick">點選</el-button>
</template>
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])
function handleClick(){
emit('h-update')
console.log(emit)
//(event, ...args) => instance.emit(event, ...args)
}
</script>

slots、attrs使用的變更

<script setup>
import {useSlots,useAttrs} from 'vue'
const slots = useSlots()
const attrs = useAttrs()
console.log(slots)//可以獲取元件的插槽
console.log(attrs)//可以獲取元件的屬性
</script>

<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

匯入指令的用法

<script setup>
  import { directive as clickOutside } from 'v-click-outside'
</script>

<template>
  <div v-click-outside />
</template>