一、初识vue3
https://juejin.cn/post/7487815126301818880
二、VUE3基础之组合式开发和setup
https://juejin.cn/post/7488176279921934376
三、VUE3基础之ref和reactive创建响应式数据
https://blog.csdn.net/qq_58195504/article/details/145160950?spm=1001.2014.3001.5502
四、解构赋值，toRefs和toRef把响应式对象里面的数据结构出来依然是响应式数据
四、VUE3基础之计算属性
https://juejin.cn/post/7491485553030316082
<script setup>
import { computed,ref } from 'vue';
let firstName = ref('zhang')
let lastName = ref('san')
// 下面这种方式只能读取
// let fullName = computed(()=>{
// return firstName.value+'-' +lastName.value
// })
// 下面这种方式可以编辑，也可以读取
let fullName = computed({
get(){
return firstName.value+'-' +lastName.value
},
set(val){
let [str1,str2] = val.split('-')
firstName.value = str1
lastName.value = str2
}
})
function changeName(){
fullName.value = 'li-si'
}
</script>
<template>
姓：<input type="text" v-model="firstName"></input>
名：<input type="text" v-model="lastName"></input>
姓名：<span>{{ fullName }}</span>
<button @click="changeName">改名</button>
</template>五、监听器
https://juejin.cn/post/7498258715231092762
情况一、监视ref定义的数据，直接写数据名就可以（即：不需要添加.value）
<script setup>
import {ref ,reactive,watch} from 'vue'
let count = ref(0)
function add(){
count.value +=1
}
watch(count,()=>{
console.log('count改变了11111111')
})
</script>
<template>
<div>{{ count }}</div>
<button @click="add">点击+1</button>
</template>情况二、监视ref定义的·对象类型的数据，若要监视内部数据的变动，需要手动开启深度监视
<script setup>
import {ref,watch} from 'vue'
let car = ref({brand:'玛莎拉蒂',price:100})
function changeBrand(){
car.value.brand = '奥迪'
}
function changePrice(){
car.value.price = 60
}
function changeCar(){
car.value = {brand:'比亚迪',price:9}
}
watch(car,()=>{
console.log('car改变了11111111')
},{deep:true})
</script>
<template>
<div>{{ car.brand }}的价钱是{{ car.price }}万</div>
<button @click="changeBrand">更改品牌</button>
<button @click="changePrice">更改价格</button>
<button @click="changeCar">更改整个车</button>
</template>情况三、使用reactive监视对象数据的属性，默认是开启深度监视的，即不需要添加deep：true，就可以直接监视内部数据的改变
<script setup>
import {reactive,watch} from 'vue'
let car = reactive({brand:'玛莎拉蒂',price:100})
function changeBrand(){
car.brand = '奥迪'
}
function changePrice(){
car.price = 60
}
function changeCar(){
Object.assign(car,{brand:'aima',price:2})
}
watch(car,()=>{
console.log('car改变了11111111')
},{deep:true})
</script>
<template>
<div>{{ car.brand }}的价钱是{{ car.price }}万</div>
<button @click="changeBrand">更改品牌</button>
<button @click="changePrice">更改价格</button>
<button @click="changeCar">更改整个车</button>
</template>情况四、监视多个属性
<script setup>
import {reactive,watch} from 'vue'
let person = reactive({
name:'李现',
car:{
brand:'玛莎拉蒂',
price:100
}
})
function changeName(){
person.name = '杨紫'
}
function changeBrand(){
person.car.brand = '奥迪'
}
function changePrice(){
person.car.price = 60
}
function changeCar(){
Object.assign(person.car,{brand:'aima',price:2})
}
watch([()=>person.name,person.car],()=>{
console.log('姓名改变了11111111')
},{deep:true})
</script>
<template>
<div>{{person.name}}购买{{ person.car.brand }}的价钱是{{ person.car.price }}万</div>
<button @click="changeName">更改名字</button>
<button @click="changeBrand">更改品牌</button>
<button @click="changePrice">更改价格</button>
<button @click="changeCar">更改整个车</button>
</template>六、watch和watchEffect
(1) 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。
(2) **watch:**要明确指出监视的数据。
(3) **watchEffect:**不用明确指出监视的数据（函数用到哪些属性，就自动监视哪些属性）
<template>
<div>水温：{{temp}}℃</div>
<div>高度：{{ height}}m</div>
<button @click="changeTemp">改变水温</button>
<button @click="changeHeight">改变高度</button>
</template>
<script setup>
import {ref,watch,watchEffect} from 'vue'
let temp = ref(0)
let height = ref(0)
function changeTemp(){
temp.value+=10
}
function changeHeight(){
height.value+=20
}
// watch([temp,height],(value)=>{
// let [newTemp,newHeight] = value
// if(newTemp>=50 || newHeight>=40){
// console.log('向服务器发请求');
// }
// })
watchEffect(()=>{
if(temp.value>=50 || height.value>=40){
console.log('向服务器发请求');
}
})
</script>七、VUE3基础之标签的ref属性
https://juejin.cn/post/7501880110838284340
八、VUE3基础之props
https://juejin.cn/user/2496335488221770/posts
九、生命周期
https://juejin.cn/post/7508591120407052298
十、组件通信
https://blog.csdn.net/qq_58195504/article/details/145608245?spm=1001.2014.3001.5502