1. ref是一个函数，响应式数据。使用前要引入，
impor{ref} fro】vue
let name= ref('张三'),
改变数据： name.value='李四'
vue3对不同对象处理不同！
数据劫持才是响应式的根本，getset
处理对象用proxy，获取直接获取
如果用reactive，直接改变就可以 job.a=3
2.添加属性 Vue.set(this.person,"sex","女)
this.$set(this.person,"sex","女)
3.vue3响应式原理：通过proxy代理，加上reflect反射
const p = new Proxy(person,{
//读取属性值
get(target,propName){
return Reflect.get(target,propName)
},
//添加或者更新属性值
set(target,propName,value){
Reflect.set(target,propName,value)
},
//删除属性值
deleteProperty(target,propName){
return Reflect.deleteProperty(target,propName)
},
})
3.ref基本类型，reactive对象或者数组
ref通过object.defineProperty的get和set数据劫持
reactive通过proxy来实现响应式，通过reflect操作源对象内部的数据
一般是把数据封装成对象然后通过reactive。。
let data=reactive({
person:{},
name:{}
})
4.set up()在beforecreate前面，他没有this，
set up(props,context)
props:传递的参数
context:上下文 包括 attrs:组件外部传递的对象但是没在props里的、slots:插槽、emit触发自定义事件
5.计算属性 变成了一个函数
//直接在person中增加一个属性 不用return了,简写
/* person.full=computed(()=>{
return person.name+'-'+person.age
}) */
//完整版，考虑到属性的更新修改
person.full=computed({
get(){
return person.name+'-'+person.age
},
set(value){
const a = value.split('-')
person.name=a[0]
person.age=a[1]
}
})
6.监视属性
监视多个，写成数组的形式（ref）
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue);
})
立刻执行，第三个参数。（ref）
watch(sum,(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue);
},{immediate:true})
监视的是reactive，new和old返回的不对，会发现他两个返回的数据相同，并且强制开启了深度监视
watch(person,(newValue,oldValue)=>{
console.log('person',newValue,oldValue);
})
监视reactive中的某一个属性,不能写person.age，写成一个函数，deep深度监视有效
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person',newValue,oldValue);
})
监视reactive中的某多个属性,不能写person.age，写成一个函数
watch(【()=>person.name，()=>person.age】,(newValue,oldValue)=>{
console.log('person',newValue,oldValue);
})
监视函数体中定义的东西，只要发生了改变就会调用，有点像computed，（因为只要里面发生变化，函数就会改变），但是computed注重的是结果，监视注重的是过程
watchEffect(()=>{
const x1= sum.value
const x2 =person.name
console.log('watch effect回调执行了');
})
7.组合式api生命周期的钩子，用之前要引入import
beforcrate、created不能向setup中写，
以下钩子都是函数
beforemount--onbeforemount\mounted--onmounted
beforeupdate--onbeforeupdate
beforeunmount--onbeforeunmount\unmounted---onunmounted
8.自定义hook函数，export default function（）{} 然后引入应用的页面即可
相当于vue2中的mixin
复用代码
9.toref 把什么东西变成ref，相当于地址传递
let name=toRef（person,'name'） 把person里的name属性传地址给name
ref（person.name）是复制一个
toRefs（person） 把person里的所有属性
10.ref可以处理任何类型，shallowref不处理对象类型的
shallowreactive只处理对象最外层属性的响应（浅响应
11.readonly只读，不能改变
shallowreadonly最外层的不能改变，但是深层的数据可以改变
12.vue2不能直接监视数组得变化，就是可以改变数组，但是改变了不能显示到页面上，必须用this.$set，
所以vue3中运用了proxy来监视，
13.toraw：将响应式转为普通对象
markRaw：永远不会变为响应式对象
14.自定义ref函数！！
function myRef(value){
let timer
return customRef((track,trigger)=>{
return{
get(){
track()//通知vue跟踪value得变化
return value
},
set(newValue){
clearTimeout(timer)
timer=setTimeout(() => {
value=newValue
trigger()//通知vue重新解析模板
}, 200);
}
}
})
}
15.provide：实现祖孙组件间通信 inject孙组件得到数据
16.vue3：组合式api，更优雅得组织代码，让相关功能的代码更有序地组织在一起，更大的发挥自己得优势，要运用hook函数！！直接引入
vue2：配置api，要写很多配置，功能很多都拆散了
17.新组件，
Fragment：vue3中不用写根标签，是把他们一起放到了fragment标签中，减少标签层级。
Teleport：从某个标签 传送到另一个标签中
Suspense：等待异步组件
异步引入 defineAsyncComponent（（）=>import（‘/’））
suspens有两个插槽default(放要显示的组件)和fallback（如果default没展示，展示这个）
<Suspense>
<template v-slot:default>
<Child/>
</template>
<template v-slot:fallback>
</template>
</Suspense>
suspense+promise可以使组件加载等待几秒
18.全局api的转移
