vue3学习笔记
生命周期：
vue2： vue3：
beforeCreate( 创建前 ) Not
created ( 创建后） Not
beforeMount (挂载前) onBeforeMount（setup还在此之前）
mounted(挂载后) onMounted
beforeUpdate (更新前) onBeforeUpdate
updated (更新后) onUpdated
beforeUnmount （销毁前） onBbeforeUnmount
unmounted （销毁后） onUnmounted
变量定义：
vue2实在data中定义
vue3：
setup(){
// 此处定义的变量是非响应式的
let testData = {
name:'test',
age:19
}
//使用ref则是响应式写法
let testNum = ref(888)
// 仅仅是ref的话是不完善的，对象和数组最好是使用reactive
let testDataText = reactive(
{
name:'test',
age:19
}
)
let dataChange = ()=>{
// 对于数据的操作徐使用value来进行
testNum.value = 20;
// 而对于使用reactive定义的变量，则不需要value可以直接操作
testDataText.name = 'testName'
}
// 除此之外还需要return出来，不然html模板中是不能使用的
return {
testData,testNum,testDataText
}
}
vue3中的toRef和toRefs:
setup(){
let testData = {
name:'test',
age:19
}
//使用toRef可以使其变为响应式但是UI页面上面并不会更新，可以在控制台打印
let testNum = toRef(testData,'age' )
// 如果想使其在UI页面上也会更新，就要使用toRefs
let testDataText = toRefs(testData )
let dataChange = ()=>{
// 对于数据的操作徐使用value来进行
testNum = 20;
// 需要注意的是toRefs是将多个转化为响应式和toRef稍有不同
testDataText.name = 'testName'
console.log(testNum,testDataText)
}
// 也可以直接在return中使用toRefs，需要注意的是在UI页面中testData是无法读取的，直接使用name和age即可
//对于页面数据比较多的情况下也可以使用data定义整个变量，然后toRefs出来
//需要注意的是toRefs只能针对单层级对象和数组使用不能使用多层嵌套
return {
testData,testNum,testDataText,...toRefs(testData)
}
}
监听数据变化
vue2中监听数据变化有computed和watch
vue3有computed，watch，watchEffect
setup({
let testData = rective({
name:"test",age:19,sex:'man'
})
//computed:有两种写法
let names01 = computed({
get(){
return 'first name' + testData.name;
},
set(value){
//names数据发生变化时触发
}
})
let names02 = computed()=>{
return 'first name' + testData.name;
}
//watch,可以同时监听多个数据
let age = watch(testData.age,(newValue,oldValue)=>{
console.log(oldValue,newValue)
},{immediate:true,deep:true})
//上面的方法控制台可能会有警告，因为只适合监听ref定义的数据，rective定义的如下
watch([()=>testData.sex],(newValue,oldValue)=>{
console.log(newValue,oldValue) })
)
//watchEffect类似于computed，但是只能获取到new的值，old的值获取不到
watchEffect(()=>{
const sex= testData.sex
console.log(sex)
})
})
vue文件拆分（vue，scss，ts）引入
在vue2中，在data中定义完数据后在html部分就可以直接用了，因为data 的时候就替我们return啦（具体原理不展开）
但是vue3，setup里面定义完数据后需要我们再手动的去return一遍，对于数据量比较大的页面来说就会很痛苦
庆幸的是我们可以在script的地方直接设置setup：
我们可以在标签里面直接使用setup，这样就避免了在此return的烦恼 <script lang="ts" setup></script> 但是setup不支持src引入，即： <script lang="ts" setup src="index.ts"></script> 这样是会报错的 如果你代码量比较大，使用拆分而且又不想return，那么我们只能使用一种拆分方式： vue = vue + html + scss 其中 vue： <template src="./index.html"></template> <script lang="ts" setup></script> <style lang="scss"> @import './index.scss' </style> html和scss直接写就可以了
