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');
})
