vue3`

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的转移