qq_39576711的博客

在setup中使用插槽，需要配合render渲染函数，先上代码。子组件slotsTest.vue:<script lang="ts">import { h,renderSlot,Slots,reactive } from "vue";interface SetupContext { slots:Slots}interface Data { [key:string]:unknown}interface listData { id:number, te

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。先看一个简单的示例：var proxyObj = new Proxy( {a:123,b:456}, { get:function(target,key){ //target是目标对象,key是目标对象的键,当读取代理对象proxyObj的属性的时候，会进入到这里 return target[key]+"hello"

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。正因为可以修改名称，vue3支持在单个组件上，绑定多个不同名字的v-model，来看示例。父组件index.vue：<script lang="ts">import { ref } from "vue"import ModelTest from './modelTest.vue'export defa

我们的vue组件在初始化的时候，把根组件挂载到了一个元素上，后续所有的子组件都在这个根组件的里边，就像这样：但是有时候，为了能够快速的定位到元素，我们不想让vue把内容渲染到id="app"这个元素里，比如你写了一个全屏的组件，或者一个弹窗组件。在vue2的时候，我们可以使用原生js去把组件内容主动渲染到其他位置，比如body下面。但是vue3我们不必这样做了，vue3提供了一个新的内置组件 teleport，他接受一个参数to，值为目标。你可以把他看成slot，他包裹的内容就会被渲染到to指向的标签内

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup选项里使用watch有两种办法。第一种：使用watchEffect，watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。示例：<script lang="ts">import { ref,watchEffect } from 'vue'

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup选项里使用computed需要手动引入computed方法，computed接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。下面来看示例。父组件index.vue：&lt

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context通常情况下，我们用props把数据传递给子组件，子组件通过emit把数据传递给父组件。但是当层级比较多的时候，比如祖先组件和重孙组件需要传递数据，而中间的那些组件不需要，用props和emit就显得有些繁琐了，这时候我们可以用provide和inject。provide提供一个具有名字的变量传递给子孙组件，子孙组件用

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup里边，第一个参数就是props，下面来看示例。子组件propsTest.vue：<script lang="ts">import { toRefs } from 'vue'interface Data { [key:string]:unknown}export defaul

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在vue2中，我们通常使用this.$refs.childNode.clickButton()调用子组件方法。vue3中setup也是可以用这种方法，只不过需要用ref小小的处理一下。ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。父

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context注意：setup语法糖是不可以使用render的，所以只有用setup选项才可以。<script setup lang="ts">//这里不能使用render渲染</script>我们可以在setup选项里直接return ()=> h() 或者多个return ()=>

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} context在setup里边因为不能访问this，所以也没有this.router和this.router和this.router和this.route。但是我们可以通过vue-router提供的函数来进行访问router：useRoute返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。他接受两个参数：{Data} props{SetupContext} contextemit就是第二个参数的一个属性：下面看一下用例，子组件 renderTest.vue：<script lang="ts">import { h } from "vue"interface Data { [key: string]: unknown}interface SetupConte