vue3常用知识点梳理

1，setup

vue3中一个新的配置项，值为函数。组件中所用到的数据，方法，生命周期，监视属性，计算属性等都要配置在setup中。

setup函数的两种返回值

        1,若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。

        2,若返回一个渲染函数：则可以自定义渲染内容。

注意点

        1,尽量不要与Vue2.x配置混用

        2,setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。

        3,vue3不需要最外层的div,可以直接在template里面写

2，ref函数

作用：定义一个响应式数据。创建一个包含响应式数据的引用对象(处理对象数据)。

3，reactive函数

作用：定义一个对象类型的响应式数据，基本类型还是用ref

语法：const 代理对象=reactive(源对象)接收一个对象或数据，返回一个代理对象Proxy的实例对象,内部是基于ES6 Proxy来进行实现的，通过代码理对象操作源对象内部数据进行操作。

4，reactive对比ref

从定义数据角度

1，ref用来定义基本类型数据（ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代码对象）

2，reactive用来定义对象或数组类型数据

从原理对比角度

1，ref是通过Object.defineProperty()的访问器属性get和set来实现响应的

2，reactive是通过ES6中的proxy来实现响应，并通过Relect操作源对象内部的数据

5，setup的两个注意点

1，set的执行时机：在beforeCreate之前只执行一次，this是undefined。(setup的执行比beforeCreate要早)

2，setup的参数（一共有两个props和context）

        (1) props：值为对象，包含：组件外部传递过来，且组件内部声明接收 了的属性。

        (2) context上下文对象

                --1-- attrs:值为对象，包含：组件外部传递过来，但没有props配置中声明的属性，相当于this.$attrs

                --2-- slots:收到的插槽内容, 相当于 this.$slots。

                --3-- emit:分发自定义的事件函数，相当于this.$emit。

//父组件




//子组件

6，计算属性与监视属性

        1，computed函数，用之前需要先引用。

2，watch函数

两种常用的监视用法

其它的监视写法

            let Obj=reactive({
                name:"张三",
                age:18,
                other:{
                    job:"软件开发工程师"
                }
            })
            /* 
			情况三：监视reactive所定义的一个响应式数据的全部属性
				1.注意：此处无法正确的获取oldValue
			    2.注意：强制开启了深度监视（deep配置无效）
			*/
			/* watch(Obj,(newValue,oldValue)=>{
				console.log('Obj变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效 */

			//情况四：监视reactive所定义的一个响应式数据中的某个属性,需要是一个函数
			/* watch(()=>Obj.name,(newValue,oldValue)=>{
				console.log('Obj的name变化了',newValue,oldValue)
			})  */

			//情况五：监视reactive所定义的一个响应式数据中的某些属性,监视多个，需要一个数组
			/* watch([()=>Obj.name,()=>Obj.age],(newValue,oldValue)=>{
				console.log('Obj的name或age变化了',newValue,oldValue)
			})  */

			//特殊情况
			watch(()=>person.job,(newValue,oldValue)=>{
				console.log('Obj的job变化了',newValue,oldValue)
			},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效                             
            

7，watchEffect函数

watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

      1，但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
      2，而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

8，hooks

1，hooks就是把setup函数中使用的composition API进行封装，和vue2中的mixin很相。

2，可以进行代码复用，让setup中的逻辑更清晰易懂。

具体使用

在src下新建一个hooks文件里面包含一个setup.js文件用于鼠标点击空白处，获取对应的坐标

import { reactive,onMounted,onBeforeUnmount } from "vue"
export default function(){
    let point=reactive({
        x:0,
        y:0
    })
    //封装一个公用方法
    function savePoint(event){
        point.x=event.pageX
        point.y=event.pageY
        console.log(event.pageX,event.pageY)
    }
    onMounted(()=>{
        // window.addEventListener('click',(event)=>{
        //     point.x=event.pageX
        //     point.y=event.pageY
        //     console.log(event.pageX,event.pageY)
        // })
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })
    return point
}

在其它页面中的使用

9，toRef和toRefs

1，toRef创建一个ref对象，其value值指向另一个对象中的某个属性

2，语法const name=toRef(Obj,"name")

3，要将响应式对象中的某个属性单独提供给外部使用

4，toRefs与toRef的功能一样，但可以批量创建多个ref对象

10，其它Composition API

        一，shallowReactive与shallowRef

                1，shallowReactive：只处理对象最外层的响应式（只处理一层）

                2，shallowRef:只处理基本数据类型的响应式，不进行对象的响应式处理

        什么时候使用

                什么时候使用？

                A:如果有一个对象数据，结构比较深，但变化时只是最外层的属性变化就用 shallowReactive

                B:如果有一个对象数据，后续功能不会修改该对象中的属性，而是新的对象来替换就使用shallowRef

shallowReactive的使用

二，readonly与shallowReadonly

        readonly：让一个响应式数据变为直读的(深度)

        shallowReadonly:让一个响应式数据变为只读的(只读一层)

        应用场景，不希望数据被修改

三，toRaw与markRaw

toRaw

        作用：将一个由reactive生成的响应式对象转为普通对象

        使用场景：用于读取响应式对象中的普通对象，这个普通对象的所有操作，不会引起页面更新

markRaw

        作用：标记一个对象，使用其不会成为响应式对象

        应用场景:
                1,有些值不应该被设置为响应式的，例如复杂的第三方库等

                2,当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

   四，customRef

        作用：创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。

五，provide和inject

作用：实现祖与后代组件之间的通信

用法：父组件有一个provide选择来提供数据，后代组件有一个inject选项来开始使用这些数据

//祖祖组件




//父组件
//子组件里面也可以使用inject




//孙子组件

六，响应式数据的判断

isRef:检查一个值是否为一个ref对象

isReactive:检查一个对象是否由reactive创建的响应式代理

isReadonly:检查一个对象是否由readonly创建的只读对象

isProxy:检查一个对象是否由react或者readonly方法创建的代理对象

11，Teleport

        teleport是一种能够将我们的组件html结构移动到指定位置的技术

        例如父组件里面包含子组件，子组件是一个弹窗，需要把弹窗移动给body

        

//父组件




//子组件，要移动的组件

12，Susperse

等待异步组件渲染时做一些其它的事情

使用步骤

1，引入异步组件

2，使用Susperse包裹好组件，并配置好default与fallback