setup:容許在script當(dāng)中書寫組合式API 并且vue3的template不再要求唯一的根元素
<script setup>
const name = 'app';
</script>
組合式API的用法：
可以直接在script標(biāo)簽中定義變量或者函數(shù)，然后直接在template當(dāng)中使用
<template>
{{message}}
<button @click="logMessage">log</button>
</template>
<script setup>
const message = 'this is message'
const logMessage = () =>{
console.log("logMessage")
}
</script>
響應(yīng)式變量reactive的使用：
<template>
<button @click="setCount">{{state.count}}</button>
</template>
<script setup>
//導(dǎo)入函數(shù)
import {reactive} from 'vue'
//執(zhí)行函數(shù) 傳入一個(gè)對象類型的參數(shù)
const state = reactive({
count:0
})
const setCount = () =>{
state.count++
}
</script>
響應(yīng)式變量ref的使用：
<template>
<button @click="setCount">{{count}}</button>
</template>
<script setup>
//導(dǎo)入函數(shù)
import {ref} from 'vue'
//執(zhí)行函數(shù) 傳入一個(gè)對象類型或者簡單數(shù)據(jù)類型的參數(shù)
const count= ref(0)
const setCount = () =>{
count.value++
}
</script>
computed計(jì)算屬性
<template>
<div>
原始響應(yīng)式數(shù)據(jù)：{{list}}
</div>
<div>
計(jì)算屬性數(shù)組{{computedList}}
</div>
</template>
<script setup>
//原始響應(yīng)式
import { ref } from 'vue'
//導(dǎo)入computed
import { computed } from 'vue'
const list = ref([1,2,3,4,5,6,7,8])
//執(zhí)行計(jì)算函數(shù)
const computedList = computed(()=>{
return list.value.filter(item=>item>2)
})
setTimeout(()=>{
list.value.push(9,10)
},3000)
</script>
watch函數(shù)：偵聽一個(gè)或者多個(gè)數(shù)據(jù)的變化，數(shù)據(jù)變化時(shí)執(zhí)行的函數(shù)。兩個(gè)額外的參數(shù)1.immediate （立即觸發(fā)） 2.deep（深度監(jiān)聽）
<template>
<div>
<button @click="setCount">+{{count}}</button>
</div>
</template>
<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
count.value++
}
watch(count,(newVal,oldVal)=>{
console.log('count變化了',newVal,oldVal);
})
</script>
watch監(jiān)聽對象數(shù)據(jù)的某一個(gè)屬性：
<template>
<div>
<button @click="changeName">name:{{state.name}}</button>
<button @click="changeAge">age:{{state.age}}</button>
</div>
</template>
<script setup>
import {ref,watch} from 'vue'
const state = ref({
name:'cc',
age:18
})
const changeName = () => {
state.value.name='aa'
}
const changeAge = ()=>{
state.value.age=20
}
//當(dāng)只有age屬性發(fā)生變化時(shí)才會觸發(fā)回調(diào)函數(shù)
watch(
() => state.value.age,
() => {
console.log('age變化了');
}
)
</script>
生命周期函數(shù)：
父組件給子組件傳值：
1.父組件給子組件綁定屬性
2.子組件內(nèi)部通過props選項(xiàng)接收
父組件
<template>
<div class="fathher">
<h2>父組件</h2>
<!-- 傳入想要傳的值 message為固定的值，count為響應(yīng)式的值-->
<son :count="count" message="father message"></son>
</div>
</template>
<script setup>
//setup語法糖下局部組件無需注冊直接可以使用
import Son from './son.vue'
import {ref} from 'vue'
const count = ref(100)
setTimeout(()=>{
count.value = 200
},3000)
</script>
子組件：
<template>
<div class="son">
<h3>子組件Son</h3>
父組件傳入的數(shù)據(jù):{{message}}-{{count}}
</div>
</template>
<script setup>
//用defineProps接收父組件傳的值
const props = defineProps({
message:String,
count:Number
})
console.log(props);
</script>
組合式API下的子傳父：
1.父組件中給子組件標(biāo)簽通過@綁定事件
2.子組件內(nèi)部通過$emit方法觸發(fā)事件
父組件：
<template>
<div class="fathher">
<h2>父組件</h2>
<!-- 1.綁定事件 -->
<son @get-message="getMessage"></son>
</div>
</template>
<script setup>
//setup語法糖下局部組件無需注冊直接可以使用
import Son from './son.vue'
const getMessage = (msg) => {
console.log(msg)
}
</script>
子組件：
<template>
<div class="son">
<h3>子組件Son</h3>
<button @click="sendMsg">觸發(fā)自定義事件</button>
</div>
</template>
<script setup>
//2.通過defineEmits() 定義事件
const emit = defineEmits(['get-message'])
const sendMsg = () =>{
emit('get-message','this is son message')
}
</script>
