记录--Vue使用CDN引入，响应式失效？

背景

最近心血来潮，想要在本地开发时，也用CDN的方式引入 Vue，想着既然通过CDN引入了，那么在项目中就没必要再 import Vue，然后把项目中引入 Vue 的地方都删掉，结果改完后，界面看似正常运行，但数据变更后，界面没有重新渲染。经过一番折腾，终于定位到问题。

vue版本：Vue2.7+；打包工具：Vite；核心插件：@vitejs/plugin-vue2;

在解决这个问题之前，我们需要先搞清楚两个事情：1）@vitejs/plugin-vue2的作用；2）@vitejs/plugin-vue2的工作原理。

vite不做赘述，具体内容看官网。

在聊@vitejs/plugin-vue2的作用之前，我们必须搞清楚什么是单文件组件？

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

很明显，这是 Vue 自己定义并实现的组件模板，不能直接在浏览器中运行，在实际项目中，我们一般会使用集成了 SFC 编译器的构建工具，比如 Vite 或者 Vue CLI (基于 webpack)。本文只讨论使用 Vite 的情况。

@vitejs/plugin-vue2 就是提供对 Vue 2.7 的单文件组件支持。如果大家的Vue项目是使用 Vite ，下面这段代码应该不陌生：

// vite.config.js
import vue from '@vitejs/plugin-vue2'

export default {
  plugins: [vue()]
}

想要*.vue 文件能正常在浏览器中运行，我们就需要做以上配置。

扒了一下这个插件的源码，发现一行至关重要的代码，如下图：

这个插件在工作时，要依赖 Vue，上面红色框标注的部分，就是它如何去查找 Vue 的逻辑。如果我们在配置文件中，配置了 Vue alias，则会使用配置的alias，否则默认使用本地安装的 Vue。如何使用alias，参加vite文档alias。

这里可以先记住这个逻辑，后面有用。

我们先看看复现问题的路径：1. 在 index.html 直接引入 Vue CDN；2. 删除项目中import Vue 的代码。

然后本地Run起来，界面看起来很正常，但是，修改数据后，发现界面没有重新渲染。为什么呢？

我们先看经过 @vitejs/plugin-vue2 处理之后生成的代码是什么样的，如下图：

因为我在项目中，没有为 Vue 配置 alias，所以**@vitejs/plugin-vue2直接使用了我本地安装的 Vue**。原因见@vitejs/plugin-vue2的工作原理

但问题是，我在项目中删除了 import Vue 的代码，这个时候界面之所以能正常运行，是因为我在index.html引入的 Vue 有正常初始化，这里就产生了一个冲突：

最后@vitejs/plugin-vue2处理的产物中，是使用本地 Vue 导出的 Ref 来处理响应式变量，但真正执行 Vue 初始化动作依赖的却是 CDN。这会带来什么问题？

也就是说，数据变化后，能正常执行响应式逻辑，但是 notify 的时候，却找不到可通知对象（此时，是触发了本地安装 Vue 的代码逻辑），因为初始化的时候，收集依赖关系时，执行的是 CDN 导入的 Vue 代码逻辑，这两者之间没有正确建立联系，导致数据变了，但是界面没有重新渲染。

如果看不懂，可能需要了解一下 Vue 初始化时干了啥，主要是要知道如何收集依赖，并触发DOM更新，要理解Watcher是如何工作的。

很简单，我们只要保证初始化和最后数据变化执行的代码逻辑来自同一个源就可以，而不是一个来自本地安装的 Vue，一个来自CDN。

最简单的方法，就是在项目中手动import Vue，这个时候，初始化的时候，就会走本地安装的 Vue 的代码逻辑。

不过这样的话，还是会加载两次 Vue，不是特别优雅。也可以使用 CDN 加载的 Vue，也得在项目中 import Vue，只不过引入的路径要变化。

import Vue from '具体的 Vue 路径'

可以通过配置 alias，简化 from 后面的路径，变成 import Vue from 'Vue'。