Vue3笔记

# setup
    1. 理解：Vue3中一个新的配置项，值为一个函数
    2. setup是所有Composition API(组合API)'表演的舞台'
    3. 组件中所用的：数据、方法等等、均要配置在setup中
    4. setup函数的两种返回值
        1.若返回一个对象，则对象中的属性、方法，值在模板中均可以直接使用
        2.若返回一个渲染函数：则可以自定义渲染内容
    5. 注意点：
        1.尽量不要与Vue2.x配置混用
            - Vue2.x配置(data、methods、computed...) 中可以访问到setup中的属性、方法。
            - 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
            - 如果有重名,setup优先
        2.setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性（后期也可以返回一个Promise实例，但需要Suspense和组件配合）

# ref函数
    1.作用:定义一个响应式的数据
    2.语法: const xxx = ref(initValue)
        1.创建一个包含响应式数据的引用对象 (reference对象，简称ref对象)
        2.JS中操作数据:xxx.value
        模板中读取数据:不需要.value，直接: <div>{{xxx}}</div>
    备注:
        3.接收的数据可以是:基本类型、也可以是对象类型
        4.基本类型的数据:响应式依然是靠object.defineProperty()的get与set完成的。。对象类型的数据:内部“求助”了Vue3.0中的一个新函数-reactive函数

# reactive函数
    1.作用:定义一个对象类型的响应式数据(基本类型不要用它，要用 ref 函数)
    2.语法: const 代理对象= reactive(源对象)接收一个对象(或数组)，返回一个代理对象 (Proxy的实例对象，简称proxy对象)
    3.reactive定义的响应式数据是“深层次的”。
    4.内部基于ES6的 Proxy实现，通过代理对象操作源对象内部数据进行操作。

# reactive对比ref
    - 从定义的角度对比：
        1.ref用来定义:基本类型数据
        2.reactive用来定义：对象（或数组）类型数据
        3.备注：ref也可以用来定义对象（数组）类型数据，它内部会自动通过reactive转为代理对象
    - 从原理角度对比：
        1.ref通过object.definProperty()的get与set来实现响应式（数据劫持）
        2.reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
    - 从使用角度对比:
        1.ref定义的数据: 操作数据需要 value ，读取数据时模板中直接读取不需要 .value.
        2.reactive定义的数据: 操作数据与读取数据: 均不需要 value。

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

# setup的两个注意点
    - setup执行的时机
        1 在beforeCreate之前执行一次，this是undefined。
    - setup的参数
        1 props: 值为对象，包含: 组件外部传递过来，且组件内部声明接收了的属性
        2 context:上下文对象
            1 attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs
            2 slots: 收到的插槽内容,相当于 this.$slots。
            3 emit:分发自定义事件的函数,相当于 this.$emit。

# 计算属性与监视
    - computed函数
        1.与Vue2.x中computed配置功能一致
        2.写法
            import {computed} from 'vue'
            setup(){

                // 计算属性简写
                let fullName = computed(()=>{
                    return person.firstName + '-' + person.lastName
                })

                // 计算属性完整写法
                let fullName = computed({
                    get(){
                        return person.firstName + '-' + person.lastName
                    },
                    set(value){
                        const nameArr = value.split('-')
                        person.firstName = nameArr[0]
                        person.lastName = nameArr[1]
                    }
                })
            }

# watch函数
    - 与Vue2.x中watch配置功能一至
    - 两个小‘坑’：
        1.监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视（deep配置失效）
        2.监视reactive定义的响应式数据中某个属性时：deep配置有效

    // 情况一：监视ref所定义的响应式数据
    watch(sum,(newValue, oldValue) => {
      console.log(newValue, "+++++++++", oldValue);
      },{ immediate: true, deep: true });

    // 情况二：监视ref所定义的多个响应式数据
    watch([sum, msg],(newValue, oldValue) => {
        console.log(newValue, "+++++++++", oldValue);
      },{ immediate: true, deep: true });

     * 情况三：监视reactive所定义的响应式数据
     *  1.若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue
     *  2.若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
     */
    watch(person, (newValue, oldValue) => {
      console.log(newValue, "+++++++++", oldValue);
    },{immediate:true,deep:false}); // 此处的deep配置不在奏效

    // 情况四：监视reactive所定义的一个响应式数据中的某个属性
    watch(()=>person.title,(newValue, oldValue)=>{
      console.log(newValue, oldValue);
    },{immediate:true})

    // 情况五：监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.title,()=>person.name],(newValue, oldValue)=>{
      console.log(newValue, oldValue);
    },{immediate:true})

# watchEffect函数
    - watch的套路是:既要指明监视的属性，也要指明监视的回调
    - watchEffect的套路是: 不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
    - watchEffect有点像computed:
        1.但computed注重的计算出来的值 (回调函数的返回值)，所以必须要写返回值
        2.而watchEffect更注重的是过程 (回调函数的函数体)，所以不用写返回值 

    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
    watchEffect(()=>{
        const x1 = sum.value
        const x2 = person.age
        console.log("watchEffect配置的回调执行了")
    })

# 自定义hook函数
    - 什么是hook？————本质是一个函数，把setup函数中使用的Composition API进行了封装。
    - 类似于vue2.x中的mixin
    - 自定义hook的优势：复用代码、让setup中的逻辑更清楚易懂

# toRef
    - 作用：创建一个ref对象，其value值指向另一个对象中的某个属性
    - 语法：const name = toRef(person,'name')
    - 应用：要将响应式对象中的某个属性单独提供给外部使用时
    - 扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
    - 区别：
        toRef：复制单个reactive里面的单个属性转为ref
        toRefs：复制reactive里面的所有属性并转成为ref

# Composition API
    1.shallowReactive 与 shallowRef
        shallowReactive：只处理对象最外层属性的响应式（浅响应式）
        shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
        什么时候使用？
            如果有一个对象数据，结构比较深，但变化时只是外层属性变化==>shallowReative
            如果有一个对象数据，后续功能不会修改该对象中的属性，而是最新的对象来替换-->shallowRef

# readonly 与 shallowReadonly
    1.readonly：让一个响应式数据变为只读的（深只读）
    2.shallowReadonly：让一个响应式数据变为只读的（浅只读）
    3.应用场景：不希望数据被修改时

# toRaw 与 markRaw
    - toRaw：
        1.作用：将一个由reactive生成的响应式对象转为普通对象
        2.使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
    - markRaw：
        1.作用：标记一个对象，使其永远不会再成为响应式对象
        2.应用场景：
            1.有些值不应被设置为响应式的，例如复杂的第三方类库等
            2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

# customRef
    - 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制
    - 实现防抖效果：
        <template>
            <input type="text" v-model="keyWord" />
            <h3>{{ keyWord }}</h3>
        </template>

        <script>
            import {customRef} from 'vue'
            export default {
                name: "App",

                setup() {
                    // 自定义一个myRef
                    function myRef(value) {
                        let timer
                        // 通过customRef去实现自定义
                        return customRef((track, trigger) => {
                            return {
                                get() {
                                    track(); // 告诉Vue这个Value值是需要被'追踪'的
                                     value;
                                },
                                set(newValue) {
                                    clearTimeout(timer)
                                    timer = setTimeout(() => {
                                        value = newValue;
                                        trigger(); // 告诉Vue去更新界面
                                    }, 500);
                                },
                            };
                        });
                    }

                    let keyWord = myRef("hello"); // 使用程序员自定义的ref
                    return {
                        keyWord,
                    };
                },
            };
        </script>

# provide 与 inject
    - 作用：实现祖孙组件间通信 跨级组件
    - 套路：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据
    - 具体写法：
        1.祖组件中：
            setup(){
                let car = reactive({name:'泵吃',price:168})
                provide('car',car)
            }
        2.孙组件中
            setup(){
                let car = inject('car')
                return{
                    car
                }
            }

# 响应式数据的判断
    - isRef:检查一个值是否为一个 ref 对象
    - isReactive:检查一个对象是否是由reactive创建的响应式代理 
    - isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
    - isProxy: 检查一个对象是否是由reactive 或者 readonly 方法创建的代理

# 新的组件
    1.Fragment
        - 在Vue2中: 组件必须有一个根标签
        - 在Vue3中: 组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中
        - 好处: 减少标签层级,减小内存占用
    2.Teleport
        - 什么是Teleport?- Teleport 是一种能够将我们的组件html结构移动到指定位置的技术
            <teleport to="移动位置">
                <div v-if="isShow" class="mask">
                    <div class="dialog">
                        <h3>我是一个弹窗</h3>
                        <button @click="isShow = false">关闭弹窗</button>
                    </div>
                </div>
            </teleport>

# Suspense
    1.等待异步组件时渲染一些额外内容，让应用有更好的用户体验
    2.使用步骤:
        异步引入组件
        import {defineAsyncComponent} from 'vue'
        const Child = defineAsyncComponent(()=>import('./components/Child.vue')) // 异步引入

        使用 suspense 包裹组件，并配好 default 与 fallback
        <template>
            <div class="app">
                <h3>我是App组件</h3>
                <Suspense>
                    <template v-slot:default>
                        <Child/>
                    </tempIate>
                    <template v-slot:fallback>
                        <h3>加载中.....</h3>
                    </template>
                </Suspense>
            </div>
        </template>

# 插槽
 - 默认插槽和vue2一样
 - 具名插槽
    父组件：
        <template #header>
            <div>22222222222</div>
        </template>
    子组件：
        <slot name="header"></slot>

 - 作用域插槽
    父组件：
        <template #headers="headerProps">
            <div>{{ headerProps.message }}</div>
        </template>
 - 子组件：
        <slot name="headers" message="hello"></slot>

 - 一个插槽只能插在一个跟标签?
    不是

# 自定义指令
    <template>
      <input v-focus />
    </template>

    <script setup>
        // 在模板中启用 v-focus
        const vFocus = { // 标签里面v-focus自定义指令，那么这里命名驼峰
            mounted: (el) => el.focus()
        }
    </script>

# vue3 通过注册插件来注册全局组件，单独创建一个js文件，然后在main.js中引入，在use.(使用)
  - import NavLink from './NavLink.vue'
    export default {
        install(app) {
            // 通过插件方式注册全局组件
            app.component('NavLink', NavLink)
        }
    }

## v-for 遇到 v-if 会怎么样呢？
  bug：Property "item" was accessed during render but is not defined no instance.
  - 为什么呢？
        因为 v-if 优先于v-for 执行，
        所以当v-if 执行时候，使用item变量，这个时候v-for没  行，所以item没有定义
        注意：当v-for 和 v-if 在同一个标签上写的时候，才会  在优先级问题
  - 解决方式：v-for先执行，在v-if，将v-if绑定到父级元素上