Vue3.0尝鲜体验

发表于 更新于 分类于

Vue3.0尝鲜体验。

这次来体验下Vue3.0。

首先我们去vue3.0的github仓库：

vue-next

区别

最近也在看Vue3.0中关于reactivity包的源码，感觉挺新奇的。

Vue2对属性改变的监听用的是Object.defineProperty，需要遍历每个对象的每个属性。

而Vue3用的是Proxy，监听的为整个对象，而且对数组的支持更好了。

最最最重要的是Vue3完全由TypeScript开发，而且也支持通过TypeScript来编写组件，相当的香。

在Vue2的时候，整个项目完全使用了JavaScript进行编写，为了能够支持静态类型检查，而引入了flowjs，不使用TypeScript的原因是重构成本过高，而flowjs可以平滑的引入的项目中。

不过随着TypeScript的发展，VSCode的出现，以及ECMAScript规范的不断更新，Vue3就基本完全使用TypeScript来编写了。

想当初使用React也是因为支持TypeScript（复杂TypeScript用法我也不会 🤣，只能写写基本类型定义这个样子。

编译 Vue-next 项目生成库文件

电脑必须有node的环境，如果不知道有没有的可以在cmd输入node -v来查看。

先把项目给克隆到本地，我们的目的就是用过构建这个项目来生成一个Vue.js的js库，然后使用它。

  • git clone https://github.com/vuejs/vue-next.git

然后我们就在本地有了一份Vue-next的源码。

IDE推荐用idea或者VSCode，使用起来非常舒服。

在控制台输入以下命令：

  • yarn

此命令用于安装依赖，注意是在文件夹的内部使用，如果没有安装yarn，可以使用npm install来执行。

接着我们可以看看package.json里面的script命令。

发现有挺多的，但是我们只要运行第一条命令即可，dev命令会在package/vue/dist下生成vue.global.js的文件，这个就是开发环境下的文件了。

  • yarn dev

没有yarn的，运行npm run dev的效果是一样的。

这样就得到了一个可以通过script引入的库文件了。

新建项目来使用生成的库文件

新建一个文件夹，我这边的命名为vue3，我们的目的是搭建一个node的服务器来，然后通过html文件来引入js库来使用Vue3。

  • 运行npm init来初始化项目；
  • 把生成的库文件找个地方放起来，我这边是建了个lib的文件夹；
  • 建个html文件夹来存放我们的 html 文件。

上面做完后，目录大致和下面一样：

有node_modules文件夹是因为使用了一些依赖，下面讲。

接下来使用Koa来搭建一个静态的服务器。

先引入依赖：

  • 运行yarn add koa或者npm install koa；
  • 运行yarn add koa-static或者npm install koa-static。

koa是一个node平台的web框架，使用了async和await的语法，挺不错的。

但是我们基本用不到这些语法，因为我们主要是当作静态资源服务器，只要简单的配置就可以使用。

koa-static用于处理静态资源。

我们在项目的根目录下建立全局入口文件index.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 导入依赖
const Koa = require("koa");
const KoaStatic = require("koa-static");
const path = require("path");
// 新建一个app
const app = new Koa();
// 获取当前项目的路径并通koa-static生成一个中间件
const home = KoaStatic(path.join(__dirname));
// 使用中间件
app.use(home);
// 监听端口
app.listen(3030, (err) => {
  if (err) throw err;
  console.log("服务器已经运行");
});

接下来我们在 html 文件夹下面新建一个vue.html来使用Vue3：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  <head>
    <title>vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 导入依赖 -->
    <script type="text/javascript" src="/lib/vue.global.js"></script>
    <!-- 编写想实验的代码 -->
    <script type="text/javascript">
      const { reactive } = Vue;
      const component = Vue.createApp({
        setup() {
          const data = reactive({
            msg: "Hello~ Vue3",
          });
          return {
            data,
          };
        },
        template: `<h1>{{data.msg}}</h1>`,
      }).mount("#app");
    </script>
  </body>
</html>

到此，静态服务器搭建完成。

  • 运行 node index.js；
  • 浏览器打开 localhost:3030/html/vue.html就可以看到我们的网页了。

然后我们在控制台可以输入component.data.msg = &#39;Hello lwf&#39;就可以观察到视图发生变化了。

更多的Api可以看下面的网站。

Vue3 的 Api