ES Module demo

--- theme: hydrogen highlight: a11y-dark --- # ⏳前言这是我参与更文挑战的第24天，活动详情查看：[更文挑战](https://juejin.cn/post/6967194882926444557) 之前写了两篇文章谈论 `vue3` 的新特性，然鹅……周一最近又 `get` 到了几个比较进阶的新特性，**比如：** ` vue2` 用 `watch` ， `vue3` 为什么用 `watchEffect` 。还有 `vue3` 为什么比 `vue2` 快， `vite` 为什么启动会非常快，以及 `vue3` 对全局注册 `API` 做出的重大改变。一起来了解一波 `vue3` 新特性📷 # 一、📗watch和watchEffect ## 1、watch和watchEffect的区别我们在 `vue2` 时，经常用 `watch` 来**监听数据**。但现在的 `vue3` 已经改用 `watchEffect` 来进行数据监听了。**这两者具体有以下区别：** - 两者都可以监听 `data` 属性变化； - `watch` 需要**明确监听哪个属性**； - 而 `watchEffect` 会根据其中的属性，**自动监听**其变化。 ## 2、举个例子 ### （1）wtach监听我们用 `watch` 来**监听数据**。**具体代码如下：** ```html ``` **此时浏览器的显示效果如下：** ![watch](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fadc5542505435d8650cada6f518c73~tplv-k3u1fbpfcp-zoom-1.image) 综上，我们可以知道，当使用 `watch` 进行属性监听时，需要**明确要监听哪一个属性**，并且如果想要**在初始化时就被监听**，需要加上**第三个可选参数** `immediate:true` 。这样看来，如果我们要监听多个属性时，那就要写很多个 `watch` ，属实有点麻烦。所以， `vue3` 就引进了 `watchEffect` 来解决这几个问题。 ### （2）watchEffect监听我们用 `watchEffect` 来**监听数据**。**具体代码如下：** ```html ``` **此时浏览器的显示效果如下：** ![watchEffect](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc718e7f4a6d4e5a899089d48b8fb201~tplv-k3u1fbpfcp-zoom-1.image) 从上图中可以看到， `watchEffect` 只要**做一次监听**，就可以**同时监听到三个属性**。同时，值得注意的是， `watchEffect `需要初始化，且初始化时**一定会先执行一次**，这个初始化的目的在于**收集要监听的数据**。所以，控制台打印的第一组数据就是初始化时的数据。第一次收集到它要监听这三个属性后，在此之后呢，这三个属性也相应地拥有了**响应式**的功能。相对应的三个计时器再打印出三组数据出来，所以一共是四组数据。 # 二、📘setup如何获取组件实例 ### （1）为什么需要获取组件实例刚听到这个概念时，我其实时有点懵的。为什么要用setup来获取组件的实例？其实说的就是一个this的指向问题。在 `vue2 ` 中， `Options API` 可以使用 `this` 来获取组件的实例，但是到现在的 `vue3` ，已经被摒弃掉了。在 `setup` 和其他 `Composition API` 中没有 `this` ，但是它提供了一个 `getCurrentInstance` 来获取当前的实例。 ### （2）举个例子我们先用 `Options API` 来获取实例。**具体代码如下：** ```html ``` **此时浏览器的显示效果如下：** ![optionAPI](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1dcd5dd2fd034408a5afcfaee9fa8227~tplv-k3u1fbpfcp-zoom-1.image) 正如我们所想的，用 `options API` ，具体的实例都可以如期的被调用出来。 *** 下面我们用 `Composition API` 来看看，是否可以调用出来。**具体代码如下：** ```html ``` **此时浏览器的显示效果如下：** ![CompositionAPI](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de1a00f5a0d3437dbecfc6ef861b69ff~tplv-k3u1fbpfcp-zoom-1.image) 通过上图我们可以知道，如果用 `Composition API` 来获取组件实例，是没有办法获取的。需要通过 `getCurrentInstance` 方法来**获取当前的组件实例**。 # 三、📒 Vue3为何比Vue2快有一次看面经的时候发现有一道题：**Vue3为何比Vue2快**。当时我也挺纳闷的，那个时候我的心里🤯： `vue3` 的出现不就是因为更好才出现嘛？不是更好难道还能更差？事实证明……**是我孤陋寡闻了**。 **Vue3 比 Vue2 快的原因主要体现在以下6个方面：** - Proxy响应式 - PatchFlag - hoistStatic - cacheHandler - SSR优化 - tree-shaking 接下来就让我们一起来了解一下吧🙋 ## 1、Proxy响应式 `vue3` 中实现响应式的 `Proxy` 会比 `vue2` 中的 `Object.defineProperty` 快。具体原因可翻看我的[另外一篇文章](https://blog.csdn.net/weixin_44803753/article/details/117900057)，这里不再讲述。 ## 2、PatchFlag ### （1）什么是PatchFlag - 在编译模板时，使用**动态节点**做标记； - 标记，分为**不同的类型**，如`TEXT` 、 `PROPS` ；有的是直接获取 `text` ，有的则是修改 `props` ； - `diff` 算法比较时，可以区分**静态节点**，以及**不同类型的动态节点**。此处要注意的是， `patchflag` 并不是专门对 `diff` 算法做优化，而是在输入上做一些变更和做一些标记，从而达到对 `diff` 算法的优化。 ### （2）举个例子🌰 我们用一个[在线网站](https://vue-next-template-explorer.netlify.app/)来演示 `patchflag` ，在线网站网址为https://vue-next-template-explorer.netlify.app/，大家可以根据需要自行演示~ **具体使用方式如下图所示：** ![在线网站演示](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a490105867b4d45b7d6e52a0bf52470~tplv-k3u1fbpfcp-zoom-1.image) 接下来我们来演示 `patchflag` ，此时右边的 `options` 不做选择。**我们在左边的框输入下面代码：** ```html

hello vue3 {{msg}} monday monday {{mag}} monday

``` **此时右边的框显示如下：** ```js import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue" export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", { id: "app" }, [ _createVNode("span", null, "hello vue3"), _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */), _createVNode("span", { class: _ctx.name }, "monday", 2 /* CLASS */), _createVNode("span", { id: _ctx.name }, "monday", 8 /* PROPS */, ["id"]), _createVNode("span", { id: _ctx.name }, _toDisplayString(_ctx.mag), 9 /* TEXT, PROPS */, ["id"]), _createVNode("span", { id: _ctx.name, msg: _ctx.msg }, "monday", 8 /* PROPS */, ["id", "msg"]) ])) } // Check the console for the AST ``` 大家可以看到，除了第一个是**静态节点**以外，**其他都是动态节点**。此时模板编译后的结果，在最后边有**对应的数字**出现，这个数字就是**标记**。 `vue3` 通过**给每个动态节点做数字标记**，达到优化 `diff` 算法的效果。 ## 3、hoistStatic ### （1）什么是hoistStatic - 将静态节点的定义，提升到父作用域上，并缓存起来； - 多个**相邻的静态节点**，会被合并起来； - 典型的**拿空间换时间**的优化策略。 ### （2）举个例子🌰 我们同样用在线网站来做一个演示。此时我们**在左边框输入以下代码：** ```html

monday monday monday {{msg}}

``` **此时右边的框显示如下：** ```js import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue" const _hoisted_1 = { id: "app" } const _hoisted_2 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */) const _hoisted_3 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */) const _hoisted_4 = /*#__PURE__*/_createVNode("span", null, "monday", -1 /* HOISTED */) export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", _hoisted_1, [ _hoisted_2, _hoisted_3, _hoisted_4, _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */) ])) } // Check the console for the AST ``` 通过以上代码可以发现， `vue3` 在每一个静态节点的外部都定义了父节点。这样看好像更冗余了一点，原因在于现在节点还比较少。 *** 下面我们来演示更多的节点，此时右边的 `options` 选择 `hoistStatic` 。**我们在左边框输入以下代码：** ```html

monday monday monday monday monday monday monday monday monday monday {{msg}}

``` **此时右边的框显示如下：** ```js import { createVNode as _createVNode, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue" const _hoisted_1 = { id: "app" } const _hoisted_2 = /*#__PURE__*/_createStaticVNode("mondaymondaymondaymondaymondaymondaymondaymondaymondaymonday", 10) export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", _hoisted_1, [ _hoisted_2, _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */) ])) } // Check the console for the AST ``` 此时可以看到， `vue3` 把所有的静态节点都包围成一个父节点了，就好像 `vue3 ` 跟它的甲方爸爸说，要不这样吧，我帮你做一个**静态节点的集合**，帮你把所有内容都定义到一起。 ## 4、cacheHandler ### （1）什么是cacheHandler - `cacheHandler` ，指**缓存事件**的意思。 ### （2）举个例子🌰 我们同样用在线网站来做一个演示，此时右边的 `options` 选择 `cacheHandler` 。**我们在左边框输入以下代码：** ```html

monday

``` **此时右边的框显示如下：** ```js import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue" export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("div", { id: "app" }, [ _createVNode("span", { onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.clickHandler && _ctx.clickHandler(...args))) }, " monday ") ])) } // Check the console for the AST ``` 观察代码 `onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.clickHandler && _ctx.clickHandler(...args)))` 可以发现， `vue3` 在处理点击事件时，会进行缓存。这行代码的意思就是，当有 `_cache[1]` 的值时就取 `_cache[1]` ，如果没有 `_cache[1]` 就再给 `_cache[1]` 定义一个函数。 ## 5、SSR优化 ### （1）什么是SSR优化 - 静态节点会直接进行输出，绕过了 `vdom` ； - 如果是**动态节点**，还是需要进行**动态渲染**。 ### （2）举个例子🌰 我们同样用在线网站来做一个演示，此时右边的 `options` 选择 `SSR` 。**我们在左边框输入以下代码：** ```html

monday

``` **此时右边的框显示如下：** ```js import { mergeProps as _mergeProps } from "vue" import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer" export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) { const _cssVars = { style: { color: _ctx.color }} _push(`mondaymondaymonday${ _ssrInterpolate(_ctx.msg) }`) } // Check the console for the AST ``` 通过以上代码可以发现，用 `SSR` 来进行模板编译时，静态节点会直接进行输出，直接绕过 `vdom` 。而如果是动态节点时，依然需要进行动态渲染。 ## 6、tree-shaking ### （1）什么是tree-shaking - 编译时，根据不同的情况，引入不同的 `API` 。 ### （2）举个例子🌰 同样用在线网站来做一个演示，此时右边的 `options` 不做选择。**左边框输入以下代码：** ```html

monday monday monday {{msg}}

``` **此时右边的框的第一行显示如下：** ```js import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue" ``` *** 再来演示另外一种情况。同样我们**在左边框输入以下代码：** ```html

``` **此时右边的框的第一行显示如下：** ```js import { createVNode as _createVNode, vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock } from "vue" ``` 大家可以发现， `vue3` 在编译时，它不会一次性引入很多 `API` ，而是根据我们所需要的，**我们要什么它就引入什么**，我们不要的，它一概不会帮我们引入。这在某种程度上就优化了很多性能。 # 四、📚Vite为什么启动非常快第一次看见 `vite` 是在 `vue3` 的官方文档里面，官方文档介绍： `vite` 是一个 `web` 开发构建工具，由于其使用 `原生ES模块` 导入方式，可以实现**闪电般**的**冷服务器启动**。通过在终端中运行相应的命令，可以使用Vite快速构建 `Vue` 项目。 ## 1、Vite是什么 - `vite` 是一个前端的**打包工具**，是 `vue` 作者发起的一个项目； - `vite` 借助 `vue` 的影响力，发展较快，和 `webpack` 有着一定的竞争关系； - 优势： `vite` 使得程序**在开发环境下无需打包**，且启动非常快速。 ## 2、Vite为何启动快？在开发环境下使用 `ES6 Module` ，无需打包，速度非常快；在生产环境下使用 `rollup` 打包，并不会快很多。 ## 3、ES Module演示 ### （1）基本使用在 `vue2` 时，我们加载一个工程文件需要先转为 `ES5` ，然后经过一些列的打包才能正式加载项目页面。而在 `vue3` ，生产环境目前还没有做到，但是在开发环境下，通过 `ES6 Module` 的方式，无需打包，速度非常快。下面我们讲演示集中 `ES Module` 在浏览器中的应用。 ### （2）ES Module在浏览器中的应用 #### 1）基本演示 ```html ES Module demo

基本演示

``` 我们在 ` ``` 同时，也可以通过 `src` 的方式直接引入外部js文件。 #### 3）远程引用 ```html ES Module demo

远程引用

``` 也可以直接引入 `cdn` 上的网址，即**远程引用**。 #### 4）动态引入 ```html ES Module demo

动态引入

``` 比如说我们要给两个 `button` 绑定两个事件，并且要让他们引入两个不同的 `js` 文件，那我们可以在执行点击后，在箭头函数里面进行 `import` 操作，按需引入，即想要让它引入哪个再引入哪个。 # 五、📙全局API修改讲完 `vite` ，我们再来将一个 `vue3` 的重大改变，那就是全局 `API` 的修改。具体看下方。 ## 1、Vue2全局API 在 `Vue2` 中，**全局API经常会遇到以下问题：** - 在**单元测试**中，全局配置非常容易**污染全局环境**； - 在不同的 `apps` 中，共享一份有不同配置的 `Vue` 对象，也变得非常困难。 **Vue2入口文件写法：** ```js import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [/^app-/] Vue.use(/*...*/) Vue.mixin(/*...*/) Vue.component(/*...*/) Vue.directive(/*...*/) Vue.prototype.customProperty = () = {} new Vue({ render: h => h(App) }).$mount('#app') ``` ## 2、Vue3全局API ### （1）Vue3新写法因此， `Vue3` 为了解决 `Vue2` 的问题，推出了新的写法。**具体代码如下：** **Vue3的新写法：** ```js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.config.isCustomElement = tag => tag.startsWith('app-') app.use(/*...*/) app.mixin(/*...*/) app.component(/*...*/) app.directive(/*...*/) app.config.globalProperties.customProperty = () = {} app.mount('#app') ``` ### （2）常见配置更新 **1）全局配置：Vue.config->app.config** - config.productionTip被删除 - config.ignoredElements改名为config.isCustomElement **2）全局注册类API** - Vue.component -> app.component - Vue.directive -> app.directive **3）行为扩展类API** - Vue.mixin -> app.mixin - Vue.use -> app.use # 六、📮结束语到这里，碎碎念一波！在学习过程中，要明白 `watch` 和 `watchEffect` 的不同之处，还要知道 `setup` 如何获取组件实例，这其中谈论的就是关于 `this` 的问题。最后的最后，就是 `Vue3` 为什么比 `Vue2` 快，涉及到**6个性能优化的方法**，学有余力之余，尽量用在线网站演示一波。随之，紧跟着 `vue3` 的步伐， `vite` 也成为了很多开发人员在开发环境中使用的工具。还有就是，解决全局污染等各种问题， `Vue3` 对全局注册 `API` 做出的改变。一波碎碎念结束， `vue3` 的进阶新特性讲解就结束啦！希望对大家有帮助！ > - 关注公众号 **星期一研究室** ，第一时间关注学习干货，**更多有趣的专栏待你解锁**~ > - 如果这篇文章对你有用，记得 **一键三连** 再走哦~ > - 我们下期见！🥂🥂🥂