Vue3源码分析update

⑴ vue3.x新特性之setup函数，看完就会用了

最近有小伙伴跟我聊起setup函数，因为习惯了vue2.x的写法导致了，setup用起来觉得奇奇怪怪的，在一些api混编的情况下，代码变得更加混乱了，个人觉得在工程化思想比较强的团队中使用setup确实能更好的使用模块化开发，但是用得不好的话也确实降低了代码的可读性。本篇文章是从使用角度来聊聊setup的实际使用。

1、setup和以前的api（data，methods，computed等）并不冲突，也是可以相互访问的，值得注意的是setup里面不能用this，并且在setup执行的时候组件实例还未创建完毕，故不也能使用data，methods，computed定义的变量和函数。如下混编示例：

2、setup 还可以返回一个渲染函数，不过返回一个渲染函数将阻止我们返回任何其它的东西，当我们想暴漏函数给其父组件使用的时候，可以使用expose来处理这个问题。示例如下：

看到这里就完全可以使用setup来做项目了，接下来就是封山开路遇水搭桥，碰到不会的就各种查，磕磕碰碰总能成功。然而一篇帖子不能写到这里就结束了，后面还有一大堆相关的知识点呢。

为什么聊响应式呢，因为setup里面返回的变量虽然可以直接在模版语法中使用，但是它并不是响应式的，如上面第一个示例，我们如果在模版中使用了{{ count }}来展示count的值，然后我们改变count的值，值改变了，但是显示不会变化。

响应式这块在官网api比较多，只说几个用得比较多的。
1、上面有提到的ref，ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。最简单的例子，上面示例改成响应式的，如下：

2、reactive返回对象的响应式副本。这个比较好理解，跟以前2.x时代差别不大。

3、toRef 和 toRefs 这两个函数都是为了获取一个响应式的子项，并且跟以前的响应式数据进行关联

注意 ：toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用toRef，简单粗暴的理解toRef可以给源对象添加一个关联的响应式属性，如：（本想写在上面示例中，不过感觉不清晰，就单独列了一块伪代码）

使用 setup 函数时，它将接收两个参数：
Props
setup 函数中的第一个参数是 props 。正如在一个标准组件中所期望的那样， setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

但是，因为 props 是响应式的，你 不能使用 ES6 解构 ，它会消除 prop 的响应性，上面说到的toRefs可以很好的解决这个问题。

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下， toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

Context
传递给 setup 函数的第二个参数是 context 。 context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

在setup中可以访问到以下生命周期钩子：

这些函数接受一个回调函数，当钩子被组件调用时将会被执行，如：

原创不易，转载请注明出处，欢迎留言提议。

⑵ 手写实现vue3数据响应式 vue3全新vdom+编译器改进vue3编译器流程\x09vue3 p

摘要 reactive## 关于Vue3

⑶ vue3的生命周期

vue3的组合式api中，setup中的函数执行相当于在选项api中的beforeCreate和created中执行

除了beforeCreate和created外， 其他生命周期的使用都需要提前引入（轻量化）

除了beforeCreate和created被setup取代之外，选项式api和组合式api的映射如下：

beforeMount -> onBeforeMount ，在挂载前被调用

mounted -> onMounted ，挂载完成后调用

beforeUpdate -> onBeforeUpdate ，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上

updated -> onUpdated ，数据更新后调用，此时内存数据已经修改，页面数据也已经更新

beforeUnmount -> onBeforeUnmount ，组件卸载前调用

unmounted -> onUnmounted ，卸载组件实例后调用。

errorCaptured -> onErrorCaptured ，每当事件处理程序或生命周期钩子抛出错误时调用

renderTracked -> onRenderTracked ，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象

renderTriggered -> onRenderTriggered ，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象

activated -> onActivated ，与keep-alive一起使用，当keep-alive包裹的组件激活时调用

deactivated -> onDeactivated ，与keep-alive一起使用，当keep-alive包裹的组件停用时调用

⑷ vue3成熟吗

截至2022年4月，VUE 3 可以说是相对成熟了，但没有 VUE 2.× 成熟。

VUE 2.× 是一个比较稳定的版本，也是很长一段时间大家在使用的版本，社区生态已经十分完善了，所以，如果我们暂时还不必须去着急升级到VUE 3，毕竟等待vue3的生态成熟，还需要一段时间的积累，但是作为前端领域必不可少的一门技能，当然希望能够提前去接触到，毕竟前端的技术迭代更新就是这么快。

Vue.js 的主要特点：

1、易用：

在有HTML，CSS，JavaScript的基础上，快速上手。

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的对于其他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。

2、灵活：

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

3、性能：

20kb min+gzip 运行大小、超快虚拟DOM、最省心的优化。

以上内容参考：网络-Vue.js

⑸ vue3.0有哪些新特性

vue3.0新特性有：

1、性能比vue2.x快1.2 2倍- Performance ；

2、支持tree-shaking- Tree shaking support ；

3、引入了Composition API- Composition API ；

4、暴露了自定义渲染API- Custom Renderer API ；

5、新增三个组件（Fragment、Teleport、Suspense);

6、 更好的支持TS - Better TypeScript support；

一、Performance

二、 Three-shaking support

Vue3.x中的核心API都支持tree-shaking，这些API都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

三、Composition API
Vue2.x中，我们通常采用mixin来复用逻辑代码，使用起来虽然方便，但也存在一些问题：代码来源不清晰、方法属性可能出现冲突。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

四、 Fragment、Teleport、Suspense

Fragment
在书写Vue2.x时，由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的（这和React 中的Fragment组件是一样的）。
Teleport
Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

五、API- Custom Renderer API

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。

⑹ vue3请求数据好一会才请求到

网速问题。
vue3新特性：数据响应重新实现（ES6的proxy代替Es5的Object.defineProperty）源码使用ts重写，更好的类型推导虚拟DOM新算法（更快，更小）提供了compositionapi，为更好的逻辑复用与代码组织自定义渲染器（app、小程序、游戏开发）。

⑺ vue2.0和3.0区别

项目目录不同

1、vue-cli3.o移除了config.文件夹。

2、多了vue.config.js文件。

3、新增了一个views文件夹。

4、删除了static新增了public文件夹。

5、index.html移动到public了。

配置项不同

1、vue-cli2.0的域名配置，分为开发环境和生产环境。

2、所以配置域名时，需要在config中的dev.env.js和。

3、prod.env.js中分别配置3.0 config.文件已经被移除。

4、但是多了。env.proction和env.development文件。

5、除了文件位置，实际配置起来和2.没什么不同。

创建项目的方式不一样

1、vue-cli2.0，vue init webpack项目名。

2、vue-cli3.0 vue create项目名。

⑻ vue生命周期详解

vue源码中最终执行生命周期函数都是调用 callHook 方法， callHook 函数的逻辑很简单，根据传入的生命周期类型 hook ，去拿到 vm.$options[hook] 对应的回调函数数组，然后遍历执行，执行的时候把 vm 作为函数执行的上下文。

1. new Vue(options) ：创建一个vm实例；

2. mergeOptions(resolveConstructorOptions(vm.constructor), options, vm) ：合并Vue构造函数里options和传入的options或合并父子的options。比如：在mergeOptions函数中会调用mergeHook方法合并生命周期的钩子函数，mergeHook方法原理是只有父时返回父，只有子时返回数组类型的子。父、子都存在时，将子添加在父的后面返回组合而成的数组。这也是父子均有钩子函数的时候，先执行父的后执行子的的原因；

3. initLifecycle(vm)、initEvents(vm)、initRender(vm) ：在创建的vm实例上初始化生命周期、事件、渲染相关的属性；

4. callHook(vm, 'beforeCreate') ：调用beforeCreate生命周期钩子函数；

5. initInjections(vm)、initState(vm)、initProvide(vm) ：初始化数据：inject、state、provide。initState 的作用是初始化 props、data、methods、watch、computed 等属性；

6. callHook(vm, 'created') ：调用created生命周期钩子函数；

7. vm.$mount(vm.$options.el) ： $mount 方法在多个文件中都有定义，如"src/platform/web/entry-runtime-with-compiler.js"、"src/platform/web/runtime/index.js"、"src/platform/weex/runtime/index.js"。因为 $mount 方法的实现是和平台、构建方式相关的。以"entry-runtime-with-compiler.js"为例，关键步骤是查看 vm.$options 中是否有render方法，如果没有则会根据el和template属性确定最终的template字符串，再调用 compileToFunctions 方法将template字符串转为render方法，最后，调用原先原型上的$mount方法，即开始执行"lifecycle.js"中 mountComponent 方法；

8. callHook(vm, 'beforeMount') ：调用beforeMount生命周期钩子函数；

9. vm._render() => vm._update() => vm.__patch__() ：先执行vm._render方法，即调用createElement生成虚拟DOM，即VNode ，每个VNode有children ，children 每个元素也是⼀个 VNode，这样就形成了⼀个 VNode Tree；再调用vm._update方法进行首次渲染，vm._update方法核心是调用vm. patch 方法，这个方法跟vm.$mount一样跟平台相关；vm. patch 方法则是根据生成的VNode Tree递归createElm方法创建真实Dom Tree挂载到Dom上；

10. callHook(vm, 'mount') ：调用mount生命周期钩子函数：VNode patch 到 Dom 之后会执行 'invokeInsertHook'函数，把 insertedVnodeQueue 中保存的mount钩子函数执行一遍，insertedVnodeQueue队列中的钩子函数是在根据VNode Tree递归createElm方法创建真实Dom Tree过程生成的钩子函数顺序队列，因此mounted钩子函数的执行顺序是先子后父；

11. data changes ：数据更新，nextTick中执行 flushSchelerQueue 方法，该方法会执行watcher队列中的watcher；

12. callHook(vm, 'beforeUpdate') ：执行watcher时会执行watcher的before方法，即调用beforeUpdate生命周期钩子函数；

13. Virtual DOM re-render and patch ：重新render生成新的Virtual DOM，并且patch到DOM上；

14. callHook(vm, 'updated') ：调用updated生命周期钩子函数；

15. vm.$destroy() ：启动卸销毁过程；

16. callHook(vm, 'beforeDestroy') ：调用beforeDestroy生命周期钩子函数；

17. Teardown watchers, childcomponents and event listeners ：执行一系列销毁动作，在 $destroy 的执行过程中，它又会执行 vm.__patch__(vm._vnode, null) 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroyed 钩子函数执行顺序是先子后父，和 mounted 过程一样。

18. callHook(vm, 'destroyed ') ：调用destroyed 生命周期钩子函数。