明天也要努力的博客

Pinia 对比 VuexPinia 同时支持 Vue2 以及 Vue3 ，这让同时使用两个版本的小伙伴更容易上手；Pinia 中只存在 State，getter，action，剔除掉了 Vuex 中的 Mutation 及 Module；Pinia 中的 action 可同时支持同步任务、异步任务；更友好的支持了 TypeScript ，无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断；

toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。（若先触发 changeCar 再触发 changeAddress ，car 的页面信息会进行更新，因为 address 的改变带动了页面的更新 ）它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set。强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。如果一个对象属性数据，后续功能不会修改该对象中的属性，而是新生对象来替换。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

很简单，假如有非常多的弹窗，那么如何管理它们的 z-index 呢，也就是同时弹窗时的层级关系，如果每个弹窗都在各自的父组件中，那么我们是没法控制的，所有有必要把它们都拧出来，放在同一个父元素下面，这样就可以方便的设置层级关系了。但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。...

概览很多同学对Vue的第一印象就是“响应式”、“双向绑定”等特性，而v-model就是实现双向绑定的语法糖，用过Vue的小伙伴一定都非常熟悉。但是在Vue3中，v-model发生了一些改动，使得它不再兼容Vue2的用法，具体是什么呢？非兼容用于自定义组件时，v-modelprop和事件默认名称已更改；prop事件非兼容v-bind的.sync修饰符和组件的model选项已移除，可在v-model上加一个参数代替；新增介绍。...

我们在写项目中，总会遇到变量的定义，在 Vue2 里面，我们只需要直接定义变量就行，但是在 Vue3 里面，官方为我们推出了定义变量的方式，那么接下来我们来看看，官方给出的函数：reactive、ref、toRef、toRefs。reactive 会对传入的引用类型进行包裹，创建一个该对象的 Proxy 代理。它是源对象的响应式副本，不等于原始对象。它“深层”转换了源对象的所有嵌套 property，解包并维持其中的任何 ref 引用关系。reactive 将解包所有深层的 refs，同时维持 ref 的

总结：在 Vue3 中没有 $refs，因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的方式来获取。Vue3 需要借助生命周期方法，因为在 setup 执行时，template 中的元素还没挂载到页面上，所以必须在 mounted 之后才能获取到元素。总结： 先申明 ref 响应式数据，再返回给模版使用，模板中通过 ref 绑定数据；总结： 先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数中可以通过参数得到单个元素，这个元素一般可以放

1. watch 的使用语法import { watch } from "vue" watch( name , ( curVal , preVal )=>{ //业务处理 }, options ) ；共有三个参数，分别为： name：需要帧听的属性； (curVal,preVal)=>{ //业务处理 } 箭头函数，是监听到的最新值和本次修改之前的值，此处进行逻辑处理。 options ：配置项，对监听器的配置，如：是否深度监听。1.1 监听 ref 定义的响应式数据&l