vue小上手

vue3
比2运算量更小更快
1、（采用新的diff算法，在创建虚拟dom的时候有变化的才会添加过来，没有变化的不算）
2、静态提升(以前的没有变化的dom只有第一次创建后面都是直接复用)
3、时间侦听器缓存（diff算法中只有有静态标记的才会进行比较追踪，一个事件在第一次之后就不会一直对他监听了（标记消失））
4、ssr渲染

在命令行输入vue ui 可以通过图形化界面来创建新项目等！！！这个很爽

安装
可以通过vue-cli或webpack或vite（vue官方开发的意图取代webpack的工具）创建项目
npm install create-vite-app -g
create-vite-app projectName进行创建，然后安装依赖就可以了

组合api(解决data，method分散问题)
新增了一个setup()函数，这个就是组合api的入口函数
import {ref} from ‘vue’ 监听简单数据类型变化
import {reactive} from ‘vue’ 监听数组对象类型变化的，返回的是一个proxy对象
//如果是其他的类型那么数据变化dom是不会变化的，想要变化需重新赋值
这两个都用的递归算法，如果数据量大的话很影响性能。
setup(){
let count = ref(0) //在组合api中这样定义变量可以使数据改变就改变dom
function change(){
alert(123)
}
let state = reactive({
stus:[{a:1,b:2},{a:2,b:3}]
})
function uber(index){
state.stus = state.stus.filter((stu,idx)=>{idx!=index}) //调用数组里的数据state.stus调用
}
return {count,change,state} //在组合api中一定要return暴露出去才可以被外部使用
}

为使代码清洁大都这样写
setup(){
let {state,uber} = Wrap()
return{state,uber}
}
function uber(){
let state = reactive({
stus:[{a:1,b:2},{a:2,b:3}]
})
function uber(index){
state.stus = state.stus.filter((stu,idx)=>{idx!=index})
}
}

setup函数是在beforecreate之前执行（组件刚被创建，data和method还没被创建好）
setup是无法获取data和method的，setup()前面不能加async异步的不然就不会执行

let state = ref({a:’’,b:’’})ref里如果是对象的话要用state.a.value =’'来改变值
ref的底层就是reactive只不过reactive会自动给你添加value
为了解决reactive和ref数据量大的时候每层都封装成proxy对象降低性能，出现了shallowReactive()和shallowRef()只把对应的第一层监听，如果不改变第一层的话其它层改变也渲染不到
在shalloRef中如果只想改变某一层的值，用triggerRef()

采用toRaw()获取reactive之前的数据
let obj = {name:’’,age:’’}
let state = reative(obj)
let obj2 = toRaw(state) 这个时候obj2是等于obj的
采用MarkRaw使元素无法被追踪（改变不了值）
obj = markRaw(obj)

toRef()是引用
let state = toRef(obj,‘name’) 把obj里具体某个key引用设为响应式但数据会改变页面并不会改变
要是想把对象里的多个属性都转为响应式的话用toRefs() let state = toRefs(obj)

customRef() 可以自定义ref对象
function myRef(value){
return customRef((track,trigger)=>{ 返回一个customRef
（如果有网络请求接口写在这个地方不能写在get里）
return{
get(){track() return value} //track告诉vue数据需要追踪的
}
set(newValue){value=newValue trigger()} //trigger触发页面更新
})
}
export default{
let boj = myRef(666)
}
获取值的时候调用get，设置值的时候调set
为什么用customRef–在回调的时候方便管理执行，一般有回调的都会定义一个customRef

vue3里如何拿到某个dom节点

123

vue3中没有这个$refs了 ,vue import {onMounted} from 'vue' 现在生命钩子也要引入了

setup(){
let box = ref(null)
onMounted(()=>{console.log(box.value )})

return {box}

}
通过这种方式来拿到dom节点，setup在beforecreate前所以拿不到
xin

readonly，shallowreadyonly
let state = readonly({name:’’,age:’’})
这个state值改不了内存中的也改不了
shallowreadyOnly类似于shallowRef

vue3的生命周期(都需要在vue中import引入)
setup() onBeforeMounted() onMounted() onBeforeUpdate() onUpdated() onBeforeUnmount() onUnmunted()
onActived()和onDeactivated()这两个钩子是在的时候会有，当然2里的也能用但就不要用了

新增的几个生命周期函数
onRenderTracked((event)={})（跟紧每一步的结果给你展示,event就是所有跟进的值）
onRenderTriggered((event)=>{})（只跟踪一个值新值旧值跟紧展示，event就是你现在跟进的值）
这两个都是用来调式的

onErrorCaptured捕获异常的钩子
setup(){
onErrorCaptured((err)=>{})
}

watch使用
注：document.title可更改网页的标题（不在本页面的用原生）
watch(text,(old,new)=>{

})
watch([text，text2],(old,new)=>{

}) //还可以监听一个数组，有wran警告的话()=>text2这样写text2，通过箭头函数调getter来使text2

Teleport组件（可以把组件自由的挂载到你想挂载的组件）
之前都是所有的都挂在到app这个节点上是在index.html

中
现在可以

然后再其他一个组件中就可以挂载到index.html最外层的节点上

suspense组件
相当于做了个能判断的组件内置两个插槽有时第一个没有时第二个

import {defineComponent} from ‘vue’ //这个是ts下无法给组件正确提供参数使用的
export default defineComponent{
async setup(){
const data = await axios.get() //在这个defineComponent下可以异步
}
}