Vue3-组合API基础

一、setup的基本使用1.setup()-组合API的入口函数为什么要用setup？在实际开发中，为了实现一个功能，其逻辑可能需要data、computed、methods、watch几项共同作用才能实现。当组件变大时，逻辑关注点会变得支离破碎，不利于阅读和维护。因此，在处理单个逻辑关注点时，将这些相关的代码配置在一起。这是设置的目的。如何使用？调用setup()，这里使用所有的组合API函数，setup()只在初始化时执行一次。如果返回一个对象，对象中的属性或方法，可以在模板中直接使用但是直接在setup()中声明的变量没有响应，您需要使用ref()函数。2.ref()ref是一个函数，它的作用是：定义一个响应式数据的基本类型，返回值是一个引用对象，对象中有一个value属性，用来保存响应式的值data，DOM模板中不需要使用.value属性写入3.reactive()响应式时对象数据需要在setup中声明，使用reactive()reactive()收到正常object，然后根据内部的ES6Proxy实现返回普通对象的响应代理对象，通过代理对象操作源对象，内部数据都是响应式的。二、setup详解1、setup的执行时机在beforeCreate执行之前执行。这个时候组件对象还没有创建。这是未定义的，不能用于访问数据/计算/方法/道具。this2、setup的返回值一般返回一个对象，为模板提供数据，即对象中的所有属性/方法都可以直接在模板返回对象中的属性会和数据函数返回的对象的属性合并成为组件对象的属性。返回对象中的方法将与methods中的方法合并，形成一个组件对象。如果该方法具有相同的名称，则设置优先。注意：一般不需要mix：setup提供的属性和方法可以在methods中访问，但是data和methods不能在setup中访问。setup不能是异步函数：因为返回值不再是return的对象，而是一个promise，所以模板看不到return的属性数据3.setup参数setup(props,context)setup(props,{attrs,slots,emit})props参数：包含组件props配置声明和传入的所有props。attrs参数：包含props配置中未声明的属性对象，相当于this。$attrsslots参数：包含所有传入slot的对象contents，相当于this.$slotsemit参数：可以用来分发自定义事件，相当于this.$emit定义一个子组件Child.vue在App中使用子组件三、reactive和ref都是Vue3组合API中最重要的两个响应式API。ref用于处理基本类型的数据，reactive用于处理对象（递归深度响应）。如果你使用ref处理对象或数组，对象/数组将在内部自动转换为反应式。代理对象ref内部：通过在value属性中添加getter/setter来劫持数据Reactive内部：通过代理劫持对象内部的所有数据，使用Reflect操作ref对象内部的数据：在ref对象中在js中使用。value获取数据，可以直接在模板中使用