ref可以定義基本類型數(shù)據(jù)也可以定義引用類型數(shù)據(jù)，修改時必須.value;reactive只能定義引用類型數(shù)據(jù)

<div id="app">
        <div>
            {{carName}}---{{carPrice}}
            <button @click="updataCar">修改汽車信息</button>
        </div>
        <ul>
            <li>飛機名稱：{{plane.name}}</li>
            <li>飛機價格：{{plane.price}}</li>
            <li><button @click="updatePlane">修改飛機信息</button></li>
        </ul>
 </div>
 <script>

        // ref,reactive用于定義響應(yīng)式數(shù)據(jù)
        let { ref，reactive } = Vue
        Vue.createApp({
       //  所有的組合式API的集合
            setup() {
        //使用ref定義一個響應(yīng)式對象
                let carName = ref('保時捷')
                let carPrice = ref('100w')
                function updateCar(){
                    carName.value="奔馳"
                    carPrice.value='120w'
                }
 // reactive只能定義引用類型數(shù)據(jù)
                let plane = reactive({
                    name: '長阿城',
                    price: 30
                })
                let updatePlane = () => {
                    plane.name = "海底",
                    plane.price = 50
                }
//setup方法，返回出去的對象里面的成員，可以在模板中使用
         return{ carName,carPrice,updateCar,  plane,
                    updatePlane }
            },
         }).mount('#app')
 </script>

vue3中計算屬性

setup() {
    let firstName=ref('張')
    let lastName=ref('三')
    // 計算屬性返回姓名
    let fullName=computed({
        get:()=>{
       return firstName.value+'.'+lastName.value
    },
    set:(val)=>{
        let arr=val.split('.')
        firstName.value=arr[0]
        lastName.value=arr[1]
    }
    })
 return{
        firstName,lastName,fullName
    }
}

偵聽器

vue2

偵聽器，如果是一個函數(shù)形式，只有在偵聽到數(shù)據(jù)發(fā)生變化時，才會執(zhí)行
如果要讓偵聽器函數(shù)在加載時，就立刻執(zhí)行一次，需要改成對象的形式
watch:{
    money:{
immediate:true
(nval,oval){
        console.log(nval,oval);
    }
}

vue3

watch默認開啟深度監(jiān)視，并且無法關(guān)閉，所以不建議直接監(jiān)視整個對象，建議監(jiān)聽對象時，監(jiān)聽對象的屬性,第一個參數(shù)是函數(shù)，由該函數(shù)返回指定對象中的屬性

watch(()=>student.age,(nval,oval)=>{
    console.log(nval,oval);
})

如果監(jiān)視的對象屬性也是一個對象，默認不開啟深度監(jiān)視，需要手動開啟

watch (()=>student.car,(nval,oval)=>{
     console.log(nval,oval);
},{deep:true})
watch(()=>student.plane,(nval,oval)=>{
    console.log(nval,oval);
},{deep:true})

watchEffect監(jiān)聽器，不需要明確的去監(jiān)視誰，誰在函數(shù)里面用到了，就監(jiān)視誰

watchEffect(()=>{
    let m=money.value
    let n=student.name
    console.log('發(fā)生變化，觸發(fā)watchEffect');
})