vue3支持三種寫法
- Option Api （與vue2寫法相同）
- Composition API （setup()函數(shù)寫法）
- <script setup> （Composition API 的語法糖）
這里主要講下<script setup>的一些寫法涎才，因?yàn)檫@種寫法比較簡潔规伐，推薦使用這種寫法
ref, reactive, toRef, toRefs 的區(qū)別
- ref 可以把基本數(shù)據(jù)類型數(shù)據(jù)矩动，轉(zhuǎn)成響應(yīng)式對象
- ref 返回的對象柒竞，重新賦值成對象也是響應(yīng)式的
ref
用于為數(shù)據(jù)添加響應(yīng)式的狀態(tài)沙咏，它的本質(zhì)就是將基本數(shù)據(jù)或?qū)ο笸ㄟ^ new Proxy 創(chuàng)建成為一個(gè)響應(yīng)式的對象，所以通過它創(chuàng)建的基本數(shù)據(jù) 其實(shí)是個(gè)對象 它的值就放在了該對象的value屬性中
//可以理解為這樣
const a = 1
// a = 1
const a = ref(1)
//a = {
//value:1
//}
所有通過ref創(chuàng)建的數(shù)據(jù) 需要通過xxx.value取它的值
通過ref創(chuàng)建一個(gè)響應(yīng)式對象 其實(shí)它的內(nèi)部還是通過reactive對該對象進(jìn)行處理 所以聲明響應(yīng)式對象 推薦使用ref統(tǒng)一聲明
<script setup>
import { ref } from 'vue'
const a = ref(1)
console.log(a.value) // 1
<script>
reactive
reactive主要為對象添加響應(yīng)式對象规揪，接收一個(gè)對象作為參數(shù)度苔，可以用于為表單等數(shù)據(jù)做統(tǒng)一響應(yīng)式處理
- 取值時(shí)不需要加.value
- reactive 返回的對象，重新賦值丟失響應(yīng)式
- reactive 返回的對象不可以解構(gòu)
const form = reactive({
name:'aa',
age:20
})
console.log(from.name) // aa
const {name,age} = form //通過解構(gòu) 此時(shí)name,age會(huì)丟失響應(yīng) 要想讓它具有響應(yīng)式 需要通過toRefs處理
const {name,age} = toRefs(form) //此時(shí)name,age具有響應(yīng)
toRefs
toRefs 用于將響應(yīng)式對象轉(zhuǎn)換為結(jié)果對象暂吉，其中結(jié)果對象的每個(gè)屬性都是指向原始對象相應(yīng)屬性的ref胖秒。
常用于es6的解構(gòu)賦值操作。
主要解決 對一個(gè)響應(yīng)式對象直接解構(gòu)時(shí)解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式
const props = defineProps({
msg:{
type:String,
default:''
},
info:{
type:String,
default:''
}
})
const {msg,info} = toRefs(props) //msg,與info就具有響應(yīng)式了 指針指向props下面對應(yīng)的屬性值
msg.value
info.value
toRef
toRef 用于為源響應(yīng)式對象上的屬性新建一個(gè)ref慕的，從而保持對其源對象屬性的響應(yīng)式連接阎肝。
接收兩個(gè)參數(shù)：源響應(yīng)式對象和屬性名，返回一個(gè)ref數(shù)據(jù)肮街。
例如使用父組件傳遞的props數(shù)據(jù)時(shí)风题，要引用props的某個(gè)屬性且要保持響應(yīng)式連接時(shí)就很有用。
const props = defineProps({
msg:{
type:String,
default:'aa'
},
info:{
type:String,
default:''
}
})
const msg = toRef(props,'msg')
msg.value //aa
總結(jié)
- 通過帶有ref相關(guān)的方法處理后的數(shù)據(jù) 都需要通過.value獲取
- 推薦使用 ref 與 toRefs 方式處理數(shù)據(jù)
Props使用
<template>
<h1>{{ msg }}</h1>
<h1>{{ props.msg }}</h1>
</template>
<script setup lang="ts">
import { ref,defineProps } from 'vue'
const props = defineProps({
msg:{
type: String,
default:''
}
})
console.log(props.msg)
</script>
Emits使用
<script setup lang="ts">
import { defineEmits } from 'vue'
const emit = defineEmits(['add'])
const add = () => {
emit('add')
}
</script>
defineProps,defineEmits,defineExpose,withDefaults 為全局的 可以不import 直接使用
eslint配置 .eslintrc.js 中配置則不會(huì)對此進(jìn)行引入校驗(yàn)
module.exports = {
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
}
script-setup用法
該連接為github倉庫連接 可能網(wǎng)絡(luò)問題打不開
store使用
<script lang="ts" setup>
import { useStore } from 'vuex'
const store = useStore()
console.log(store.state.xxx)
</script>
router使用
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router= useRouter ()
console.log(router.currentRoute.value)
</script>
computed使用
<script lang="ts" setup>
import { computed } from 'vue'
const name= computed (() => {
return 'xxx'
})
</script>
