qq_44741577的博客

添加组件的灵活性，原先由于布局、层级等原因【类似按钮和触发弹窗等】，需要拆分到不同位置【不同组件】的相关联操作，也可以更好的封装起来。子组件的加载方式为异步加载 ，或者子组件的setup应返回一个Promise，async关键字为隐性的Promise返回。Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。await将setup隐性添加了一个async的关键字，也就是 Promise的返回。用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置。

当props为一个对象，路由参数key和value就定死了。这两种传参方式一样，本文只以声明式举例，编程式跳转的。query传参的特点参数会在路由路径后面。对象，可以根据这个路由信息按需返回参数。只能接收params参数。函数的参数就是当前的。

官方对自定义 hook 定义：在 Vue 应用的概念中，“组合式函数” (Composables) 是一个利用 Vue 组合式 API 来封装和复用有状态逻辑的函数。其实 Hooks 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。自定义 Hooks 可以复用代码, 让 setup 中的逻辑更清楚易懂。自定义Hooks是为了处理组件逻辑的一种模式。它可以让我们在不使用组件之间复制粘贴代码的情况下重用状态逻辑。自定义hooks是简单的javaScrpt函数，

在Vue 3中，可以使用reactive函数将普通JavaScript对象转换为响应式对象，这样当对象的属性发生变化时，就会自动更新相应的UI。但使用 reactive 时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解 reactive 失去响应的情况下慎用，而更推荐使用 ref。对使用reactive 函数定义的变量直接赋值（重新分配一个新对象会丢失响应性）// 定义一个响应式变量name: "",

注意：使用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。使用异步回调创建一个侦听器，则不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。这个回调函数接受三个参数：新值、旧值，以及一个用于清理副作用的回调函数。是懒执行的：当数据源发生变化时，才会执行回调。的主要功能是相同的，都能响应式地执行回调函数。传入一个响应式对象，会默认创建一个深层侦听器，所有嵌套的属性变更时都会被触发，并且。接受两个参数，第一个参数是数据发生变化时执行的回调函数，用法和。

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。监视ref定义的【对象类型】数据：直接写数据名注意：监视的是对象的【地址值】，若想监视对象内部的属性，需要手动开启深度监视。若修改的是ref定义的对象中的属性，因为它们是同一个对象（内存地址不变），所以newValue和oldValue都是新值。若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。age: 13,});

所以当我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。但是如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们可以使用计算属性computed() 方法来描述依赖响应式状态的复杂逻辑，返回值为一个计算属性 ref。在模板中，分别使用了方法和计算属性四次，然而，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。当你尝试修改一个计算属性时，你会收到一个运行时警告。

上一篇学习了ref 全家桶，在此基础上一起学习下 reactive 全家桶type T = {arr: [],});}, 100);

和 ref() 不同，浅层 ref （shallowRef）的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。可以无脑使用 ref 代替 reactive，使用 ref 方便书写，使用 reactive 突出数据的关联性。强制触发依赖于一个浅层 ref （shallowRef）的副作用（强制更新页面DOM）接收一个内部值并返回一个响应式且可变的 ref 对象（RefImpl的实例对象）。JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

有些情况我们需要根据情况不同绑定不同的事件，比如：当这个元素为button的时候我需要绑定click事件，当为input的时候，我需要绑定change事件。

ref 函数，ref 属性除了能够获取元素外，还可以主要用于创建一个响应式数据，它会将一个普通的JavaScript对象转换为一个响应式的对象，从而使数据的变化可以被Vue实例所追踪，当数据发生变化时，Vue会自动更新相关视图。此时可以使用 toRef 解决此问题，使用 toRef 解构对象某个属性时，先检查对象上是否存在该属性，如果存在就继承对象上的属性值，如果不存在就会创建一个。接收一个对象作为参数，遍历对象上的所有属性，将对象上的所有属性变成响应式数据。将响应式对象转为原始对象。最终值为 “李四”。

因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过。说白了，这个方法 适合在开发组件库的情况下使用，不适合日常业务开发中使用。子组件通知父组件触发一个事件，并且可以传值给父组件。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过。，那么子组件内部的方法与响应式数据父组件也是可以使用的。是在子(后代)组件里使用的，可以网上取值。方法获取组件的属性与事件(包含:原生。

/ 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)// 第一个参数是你的应用中 Store 的唯一 ID。// 其他配置...})这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。

不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。除此之外，发现所有的静态节点（HOISTED 为 -1），都保存为一个变量进行静态提升，可在重新渲染时直接引用，无需重新创建。Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。

手把手教你创建vue3项目的最佳方式。