ref可以定义基本类型数据也可以定义引用类型数据，修改时必须.value;reactive只能定义引用类型数据

<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用于定义响应式数据
        let { ref，reactive } = Vue
        Vue.createApp({
       //  所有的组合式API的集合
            setup() {
        //使用ref定义一个响应式对象
                let carName = ref('保时捷')
                let carPrice = ref('100w')
                function updateCar(){
                    carName.value="奔驰"
                    carPrice.value='120w'
                }
 // reactive只能定义引用类型数据
                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

侦听器，如果是一个函数形式，只有在侦听到数据发生变化时，才会执行
如果要让侦听器函数在加载时，就立刻执行一次，需要改成对象的形式
watch:{
    money:{
immediate:true
(nval,oval){
        console.log(nval,oval);
    }
}

vue3

watch默认开启深度监视，并且无法关闭，所以不建议直接监视整个对象，建议监听对象时，监听对象的属性,第一个参数是函数，由该函数返回指定对象中的属性

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

如果监视的对象属性也是一个对象，默认不开启深度监视，需要手动开启

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

watchEffect监听器，不需要明确的去监视谁，谁在函数里面用到了，就监视谁

watchEffect(()=>{
    let m=money.value
    let n=student.name
    console.log('发生变化，触发watchEffect');
})