关于的vue小笔记

### setup 
    
    vue3.0 中的一个配置项，值是函数

    setup是组合Composition API中的入口函数，也是第一个要使用的函数。

    setup只在初始化时执行一次，所有的Composition API函数都在此使用。

    组件中使用的的数据、方法等，都需要配置在setup中 

    setup需要返回值 ： 
        1.返回值为对象：返回值的中的属性、方法均可以在模板中使用 
        2.返回值是函数（不常用）,需要借助h函数

### ref
    作用：定义一个响应式数据 
    用法： ref(数据值)  比如 let name=ref('张三')
           返回一个包含响应式数据的引用对象 RefImpl  
            在模板中直接使用 name,不需要value
            而在js操作中 name.value 
    接收的数据：可以是基本数据类型，也可以是对象
    基本数据类型: 响应式依然是依靠definedProperty的get和set实现的      
    
    引用数据类型： 内部是依靠proxy

    注意： 在Vue2中我们通过this.$refs来获取dom节点， 
           Vue3中我们通过ref来获取节点
          首先需要在标签上添加ref='xxx'，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致

### reactive
    作用： 定义一个对象类型的响应式数据 
    用法   reactive(对象数据)  接收对象或者是数组  返回值一个proxy对象（代理对象） 
    reactive 定义的响应式数据是深层次的
    内部基于es6的proxy实现，通过代理对象操作源对象内部数据都是响应式的   

### Vue2.X的响应式原理
    实现原理：
        对象类型：通过definedProperty()对属性的读取、修改进行拦截（数据拦截）
        数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）
    用法：
        Object.definedProperty(data,'属性',{
            get(){},
            set(){}
        })
    缺点：
        新增属性、删除属性，界面不会更新
        直接通过下标修改数组、界面不会更新

### Vue3.0的响应式原理
    实现原理
        通过Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写、属性的添加、属性的删除等
        通过Reflect（反射）: 对被代理的属性进行操作
    用法：
        new Proxy(data,{
            // 拦截读取属性值
            get(target,prop){
                return Reflect.get(target,prop)
            },
            // 拦截设置属性值或添加新属性
            set(target,prop,value){
                return Reflect.set(target,prop,value)
            },
            // 拦截删除属性
            deleteProperty(target,prop){
                return Reflect.deleteProperty(target,prop)
            }
        })

### watchEffect函数
    监视属性，不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性     

### 生命周期函数
    Vue3.0可以继续使用Vue2.x中的生命周期函数，但有两个被更名
        beforeDestory 改为  beforeUnmount
        destoryed 改为 unmounted

    Vue3.0也提供了composition API形式的生命周期函数，与Vue2.x钩子对应关系如下：
        beforeCreate  ====> setup()
        created       ====> setup()
        beforeMount   ====> onBeforeMount
        mounted       ====> onMounted
        beforeUpdate  ====> onBeforeUpdate
        updated       ====> onUpdated
        beforeUnmount ====>onBeforeUnmount
        unmounted     ====> onUnmounted

### 自定义hook函数

    什么是hook函数
        本质是一个函数，把setup中使用的composition API进行了封装
    类似于vue2.x中的mixins
    优势：复用代码，让setup中的逻辑更加清楚易懂

### toRefs
    1) 作用
        把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

    2) 应用
        我们使用reactive创建的对象，如果想在模板中使用，就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。当然小伙伴们可以自行开发更多应用场景。

### 其他的composition API
    1. shallowReactive shallowRef
        shallowReactive 只处理对象最外层属性的响应式（浅响应式）
        shallowRef  只处理基本数据类型 不处理对象的响应式

    2. readonly shallowReadonly
        readonly 让一个响应式数据变成只读（深只读）
        shallowReadonly   让一个响应式数据变成只读（浅只读）

    3. toRaw  markRaw
    4. customRef
    5. provide inject