这几天抽空把vue3的文档整个看了一遍。简介 | Vue.js

23年写过一个vue2的项目，24年写了一个vue3的项目，页面功能比较简单，用几个简单的API，watch、watchEffect、ref、reactive就能实现的业务功能。

写了几年的react的，初上手vue时对比着用再翻翻别人的代码，点对点的翻阅一下官方文档，能解决大多数的问题。当时忙也就没能够系统进行学习。

这次整体看了一遍，也就能发现其中的精妙，以及解决之前困惑但是没能细究的一些问题，比如

1、nextTick是干什么的

全局 API：常规 | Vue.js

等待下一次 DOM 更新刷新的工具方法。

确保回调函数在 DOM 更新完成后执行，解决因异步更新导致的数据与 DOM 状态不一致问题。

2、nutui组件库没看见注册怎么就能使用了

app.component()注册全局组件

3、h（）这个函数是干什么的

h() 函数用于创建 vnodes

对比react作者似乎封装了很多常用功能，一些细节的处理更节省用户的心智，比如

1、双向数据绑定 v-model，还有一些其他指令 v-show、v-if、v-for、v-html、v-bind（：）、v-on（@）

2、事件处理后缀

• .stop

• .prevent

• .self

• .capture

• .once

• .passive

3、watchEffect自动追踪依赖 ，react里useeffect需要显示指定；computed和useMemo差不多；

4、使用keepAlive组件多了两个生命周期

5、组合式函数和react的自定义hook很像，作者的灵感来源也是这里

6、插槽的话，vue一个组件可以有多个插槽，name区分；react只有一个children；

7、依赖注入provide inject 的思想则和react的usecontext 可以类比一下

8、teleport组件和react的？？API一样的效果

9、suspense则解决了异步依赖的加载结果显示的问题

10、vue同样支持jsx

对比vue2则是

1、在响应式原理上做了提升，proxy替代了object.definedProperty，文档里作者没提解决了什么问题；其实是解决 添加或删除属性时不能追踪到的问题

2、最大的一个亮点是组合式API的使用，能更好的复用代码逻辑；选项式API同时保留，作者建议小型项目可以使用，大型复杂的则使用组合式API；选项式API也是基于组合式API封装而来的，vue3暴露了更多底层的方法；

3、typescript开发的，支持typescript那是必须的，多了类型校验

4、性能优化方面：tree-shaking减小包体积，异步组件 代码分割

5、文档中作者多次提及，vue3自动对代码进行优化，无需用户在做多余的优化处理

6、diff方法优化，在节点上标记是哪种类型的更新，缓存静态节点

再一点就是代码组织方式上定义属性、方法、事件的一些区别

1、选项式API。this指向当前组件实例

import { defineComponent } from 'vue'export default defineComponent({// 启用了类型推导props: {name: String,id: [Number, String],msg: { type: String, required: true },metadata: null},mounted() {this.name // 类型：string | undefinedthis.id // 类型：number | string | undefinedthis.msg // 类型：stringthis.metadata // 类型：any}
})

2、组合式API。没有this

<script setup>
import { ref, onMounted } from 'vue'onMounted(() => {console.log(`the component is now mounted.`)
})const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'export default {setup(props, { attrs, slots, emit, expose }) {...}
}export default {setup() {const count = ref(0)// 返回值会暴露给模板和其他的选项式 API 钩子return {count}},mounted() {console.log(this.count) // 0}
}
</script><template><button @click="count++">{{ count }}</button>
</template>

组合式API离不开setup这个函数，这个函数是在beforeCreate之前就调用了；setup() 钩子是在组件中使用组合式 API 的入口。

我的学习习惯更喜欢看完全局了解大概，再逐一进行深究。