old brother stable

vue3 采用的 `diff` 算法名为快速 diff 算法，整个 `diff` 的过程分为以下5个阶段完成。 1. 处理前置节点 2. 处理后置节点 3. 处理仅有新增节点 4. 处理仅有删除节点 5. 处理其他情况（新增 / 卸载 / 移动）

对于 vue3 的生命周期，我们经常性会去疑问，生命周期有哪些呢，它是怎么去实现的， 又是什么时候调用的。

在 vue 中 patch 函数的作用是在渲染的过程中，比较新旧节点的变化，通过打补丁的形式，进行新增、删除、移动或替换操作，此过程避免了大量的 dom 操作，提升了运行的性能。

我们通过阅读源码了解到，createApp 函数是 vue3 的入口函数，通过 createApp 函数我们可以创建一个应用。createApp 的实现是借助了 createRenderer 函数，createRenderer 的实现内部包装了createAppAPI。createApp 函数接收一个组件，然后返回一个应用，这个应用中有一个 mount 方法，这个 mount 方法就是用来将应用挂载到容器中的。

通过对computed的源码分析，我们可以看到 vue3 如何实现计算属性的。当我们创建一个计算属性时，vue 会收集这个计算属性的所有依赖项。然后，当这些依赖项发生变化时，vue 会重新计算这个计算属性的值。并通过_dirty这个标志位来判断是否需要执行副作用函数并更新_value的值。这种机制使得我们可以方便地创建基于其他响应式依赖项的计算属性。

1.初始化vue项目 1.1环境初始化 1.安装node。官网直达 2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue脚手架vue-cli。 npm install --global vue-cli 1.2创建项目

通过传入不同参数来调用不同的接口这样的场景在熟悉不过了，通常情况下会这样写到：// A.vueexportdefault{props:{type:String},queryList(){constapiMaps=newMap([['类型A','接口A'],['类型B','接口B'],['类型C','接口C'],['类型D','接口D']])}constap.........

个人观点：有写更新还是比较实用的，但是其中又包含太多的黑魔法了。。。

这篇文章主要介绍了 vue 3 的响应式原理，其中涉及到了reftoReftoRefsshallowRef等函数的实现。ref：ref 函数用于创建一个包含响应式数据的引用对象，它接受一个基本类型或对象类型的参数，并返回一个具有 value 属性的对象。当访问或修改 value 属性时，会触发响应式更新。ref 函数会对对象类型的参数进行深度响应式转换，即递归地将对象的所有属性都转换为响应式的。

reactive：函数返回一个对象的响应式代理。reactive 函数会调用createReactiveObject函数，根据对象的类型，创建不同的代理处理器。reactive函数的参数必须是一个对象，否则会报错。：函数根据对象的类型，创建不同的代理处理器。如果对象是一个数组，会创建一个 collectionHandlers 对象；如果对象是一个普通对象，会创建一个 baseHandlers对象。代理处理器是一个包含 get、set、deleteProperty 等方法的对象，用于拦截对象的属性访问和修改。

在Vue中如何将通用的方法抽象出来进行封装，mixin是一种方式，但是mixin的缺点也很明显，关于mixin的缺点这里不做过多介绍，也可以通过这篇文章介绍的通过装饰器对通用列表的分装也是一种比较好的处理方式。.........

更新的scss版本在vue cli3的项目里面的配置需要修改参数设置，具体在vue.config.js文件很多博客里面的写法都是这样的 css: { loaderOptions: { sass: { // @/ is an alias to src/ data: `@import "@/styles/variables.scss"...