weixin_43123984的博客

可视化demo

全局状态管理工具Pinia.js 有如下特点：官方文档Piniagit 地址 https://github.com/vuejs/pinia2.1、安装2.2、注册3、初始化Store仓库1、src下新建store文件夹2、新建一个[name].ts文件3、在新建的[name].ts文件下定义仓库4、新建一个store-namespace/index.ts文件用于名称管理4、pinia中state值修改的五种方式5、解构pinia中state值store转化为普通对象后的属性展示

js属于单线程语言。所谓单线程，也就是需要代码一行行的向下去执行，如果还是使用的是同步的方式，必然会造成页面的阻塞，所以此时就需要异步操作了。在js中，处理这种异步操作的机制就是事件循环（Event Loop）同步任务：代码从上到下按顺序依次执行。异步任务：1、宏任务：script（整体代码）、setTimeout、setInterval、ui交互事件、postMessage、Ajax、setImmediate2、微任务：Promise.then catch、MutaionObserver、proces

通常我们像vue全局添加一些功能时，会 采用插件 的模式，有以下两种写法。插件可以实现添加 全局的方法或资源（过滤器、过渡）等等2.1、对象类型写法2.2、函数类型写法3、引入及使用3.1、main.ts中引入3.2、其他组件中使用4、Loading插件Demo原文链接：https://blog.csdn.net/qq_41880073/article/details/124271358https://xiaoman.blog.csdn.net/article/details/123300

vue3中没有Prototype属性，使用app.config.globalProperties去替代

vue3的hook就相当于vue2的mixins，不同在于hook是函数vue2的mixins混入组件的data、methods、filters会覆盖mixins中的同名data、methods、filtersmixins混入中的生命周期会快于组件中的生命周期vue3的hook库 VueUse3、自定义hook（图片转base64）原文链接：https://xiaoman.blog.csdn.net/article/details/123271189...

vue3指令的钩子函数3、生命周期钩子参数第一个el为当前绑定的DOM元素第二个binging第三个为当前元素的虚拟DOM，也就是Vnode第四个为上一个虚拟节点，仅在beforeUpdate 和 updated 中可用仅需在mounted和updated时触发事件，而无需其他钩子函数。那么可以通过以下函数模式实现5、自定义拖拽案例原文链接：https://xiaoman.blog.csdn.net/article/details/123228132...

配置完成后，项目重启生成auto-import.d.ts 文件。ref，watch等无需导入，直接使用v-model实则就是一个语法糖，通过props和emit组合而成vue2与vue3间变化：原文链接：https://xiaoman.blog.csdn.net/article/details/123187523...

配置完成后，随便创建一个xxx.tsx文件，在别的界面引入即可使用1、使用ref需加.value2、支持 v-model、v-show3、不支持v-if、v-for原文链接：https://xiaoman.blog.csdn.net/article/details/123172735

子孙组件获取父组件数据、方法2、mitt事件总线原文链接：https://xiaoman.blog.csdn.net/article/details/123143981https://blog.csdn.net/qq1195566313/article/details/125453908

组件添加进入/离开过渡2、transition-group过度列表原文链接：https://xiaoman.blog.csdn.net/article/details/123000653https://xiaoman.blog.csdn.net/article/details/123058884

何为异步组件？vue3在调用这个组件时，它并不立即渲染，而是等到一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。suspense 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点展示异步请求完成后，显示的模板内容；fallback 插槽里的节点则展示异步请求加载中，显示的内容原文链接：https://xiaoman.blog.csdn.net/article/details/122909360.........

2、作用域插槽子组件绑定参数，传递父组件slot使用

1、在Vue2 的时候is是通过组件名称切换的，在Vue3 setup是通过组件实例切换的2、如果直接把组件实例放到reactive中代理，vue会发出警告。告知我们可以通过shallowRef 或者 markRaw 跳过proxy 代理。因为组件实例进行响应式代理毫无意义，且浪费性能子组件通过defineProps接受传参......

子组件通过defineProps接受传参2、子组件向父组件发射事件defineEmits派发一个事件3、父组件获取子组件方法、属性

计算属性，当依赖的属性值改变的时候触发2、watch使用深度监听ref对象属性需开启deep:truereactive对象属性，无论是否开启deep，都会深度监听2.1、watch中ref深度监听注意事项3、watchEffect使用非惰性，立即执行自动追踪回调中的数据，用到firstName，则追踪firstName数据变化未用到lastName，则不追踪lastName数据变化......

1、reactive使用reactive一般用来定义一个复杂类型的响应式数据无法定义基本数据类型的响应式数据2、readonly、shallowReadonly使用readonly 深度只读数据shallowReadonly 浅只读数据3、shallowReactive 使用只能对浅层的数据改变时视图改变如果是深层的数据只会改变值 不会改变视图3.1、shallowReactive注意事项toRef、toRefs、toRaw4、toRef使用为原响应式对象上的某个属性创建一个 r

1、ref、Ref 使用ref一般用来定义一个基本类型的响应式数据；还可用来获取元素Ref 范型使用2、isRef使用判断是否是ref对象3、shallowRef、triggerRef使用shallowRef浅响应式，只处理value的响应式不进行对象的响应式处理3.1、shallowRef注意事项4、customRef使用创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制需求: 使用 customRef 实现 debounce 的示例.........