之前的react项目写完之后现在开始学vue3，目的是可以用vue3搭建一个移动端项目，vue3的基础原理就不多了解了，更多是认识到对应的react方法，以及vue3独特的写法和怎么在开发的时候使用。
1.用vite创建一个vue项目以及vue项目的基础结构
首先vue3这里用的ts以及组合式api，创建vue3项目npm create vue@latest直接搭建就可以开启一个项目了。
编辑
这是基础结构,main.ts就是入口文件，
编辑
接下来是根组件
编辑
可以看到用mount和react-dom中的createRoot然后createApp和render一样的，首先引入根组件然后渲染根组件到容器id为app的div标签容器中。
2.ref和reactive定义响应式类型数据
在react中用state中的setState去设置动态改变的数据引起页面重新渲染，在vue中用ref和reactive去设置这些数据，怎么使用直接看代码。
编辑
<template>
<div class="person">
<h2>一个{{ car.brand }}的车 价值:{{ car.price}}</h2>
<button @click="changePrice">修改车的价格</button>
<button @click="changeCar">修改车</button>
<hr>
<h2>当前求和为:{{ sum }}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<script setup lang="ts" name="Person">
import { reactive,ref } from 'vue'
let car =reactive({brand:'奔驰',price:100})
// let car =ref({brand:'奔驰',price:100})
let sum = ref(0)
console.log(car);
const changePrice = ()=>{
car.price+=10
}
const changeCar=()=>{
//car.value={brand:'奥拓',price:1}//导致响应式数据变成普通对象 ref可以直接赋值
//可以用对象赋值的方法
Object.assign(car,{brand:'奥拓',price:1})
console.log(car);
}
const changeSum=()=>{
sum.value+=1
}
</script>
<style>
.person{
background-color: red;
}
button{
margin: 10px;
}
</style>
响应式数据就是需要ref或者reactive包裹前者使用基础数据类型和对象类型，后者用于对象类型，后者无法直接给对象赋值的方式赋值，需要用Object.assign()这种赋值属性的方法去覆盖更新一个新对象的属性，也就是地址永远不会发生改变。
3.计算属性
计算属性是当我们需要用一些数据去计算得出一个新数据的时候使用，而且会自动监听数据的变化而重新执行，有两种写法一种是只读的 computed(()=>{return }) 另一种compute({set(){}get(){}})这种可以读而且可以计算需要的原始数据。
<template>
<div class="person">
姓:<input v-model="firshName"></input><br>
名:<input v-model="secondName"></input><br>
<button @click="changeFull">将全名改为赵三</button>
全名:<span>{{ fullname }}</span><br>
全名:<span>{{ fullname }}</span><br>
全名:<span>{{ fullname }}</span><br>
全名:<span>{{ fullname }}</span><br>
</div>
</template>
<script setup lang="ts" name="Person">
import { ref,computed} from 'vue';
let firshName=ref('zhang')
let secondName=ref('三')
//计算属性是只读的
// let fullname = computed(()=>{
// console.log(1);
// return firshName.value.slice(0,1).toUpperCase()+firshName.value.slice(1)+''+secondName.value
// })
let fullname = computed({
get(){
return firshName.value.slice(0,1).toUpperCase()+firshName.value.slice(1)+''+secondName.value
},
set(val){
const [str1,str2] =val.split('-')
firshName.value=str1
secondName.value=str2
}
})
const changeFull=()=>{
fullname.value='li-sa'
//赋值就会自动调用set
}
</script>
<style>
.person{
background-color: red;
}
button{
margin: 10px;
}
</style>
只要给计算属性的返回值赋值就会触发set而且值会传入set作为参数。调用自动触发get，还有v-bind单向绑定用于显示数据作为默认值，v-model双向绑定。类似于react受控组件。还有v-for类似于数组的map
4.监视方法watch
类似于listen监听ref和reactive定义的响应式数据，如果数据改变就会执行第二个参数函数中的逻辑，
编辑
只能监听这四种数据。
<template>
<div class="person">
<h2>姓名：{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="changeName">修改姓名</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script setup lang="ts" name="Person">
import { ref,computed,watch} from 'vue';
let person=ref({
name:'章三',
age:12
})
const changeName=()=>{
person.value.name+='~'
}
const changeAge=()=>{
person.value.age+=1
}
const changePerson=()=>{
person.value={name:'王',age:2}
}
//监听情况一 监视ref定义的对象数据的类型 监视的是对象的地址值 如果想要监视内部属性变化需要手动设置
//watch第一个参数被监视的数据 第二个参数监视的回调 第三个参数配置对象
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue);
},{deep:true})
</script>
<style>
.person{
background-color: red;
}
button{
margin: 10px;
}
</style>
写法三个参数，第一个监听的数据，第二回调函数接收新数据和旧数据，一般只接收新数据，第三配置项比如这里开启深度监听，属性变化也会触发，reactive定义的默认开启深度监听。
编辑
