Vue 3 中的新功能

Question

Vue 3 于 2020 年 9 月 18 日发布 。 Vue 3 包括许多改进，包括更加模块化的核心、 组合 API 和许多性能改进。 然而，即使有了这些新的改进，它仍然感觉像 我们熟悉和喜爱的旧 Vue ，只是有一些新的令人愉快的惊喜。 这是您可以开始的方法。

你好，Vue 3

与 Vue 2.x 一样，您可以从 npm 安装 Vue ，也可以 从 CDN 加载 Vue 。 要从 npm 安装 Vue 3，请运行：

npm install vue@3.x

你也可以用一个加载 Vue <script> 来自 CDN 的标签，例如 unpkg 。

<script src="https://unpkg.com/vue@3.x"></script>

Vue 的基本 JavaScript 语法没有太大变化。 我们在 Vue 2 中使用的 row, row, row your boat 这个小例子在经过一些小的改动后也可以在 Vue 3 中使用：

<div></div>

<script src="https://unpkg.com/vue@3.x"></script>
<script>
  Vue.createApp({
    data: () => ({ message: 'Row' }),
    template: `
    <div>
      <h1>{{message}} your boat</h1>
      <button v-on:click="message += ' row'">Add</button>
    </div>
    `
  }).mount('#content');
</script>

下面是一个活生生的例子：

我们需要进行 2 处更改才能使此应用程序在 Vue 3 中运行：

1. Vue 3 不导出类，而是导出 POJO 以更好地与解构集成 import 报表 。 所以不要打电话 new Vue()，你应该使用 Vue.createApp(). 否则你会得到一个 TypeError: Vue is not a constructor错误。
2. $mount()现在只是 mount(). 这 1 个字符的变化是一个更重要变化的结果： Vue 3 有一个单独的应用程序实例概念 。 与 Vue 2 不同，你的顶级 app并且你的组件是同一个类的实例，Vue 3 有一个单独的应用程序概念。 这意味着不需要前缀 mount()作为 $mount()以免与您的冲突 data特性。

服务器端渲染

我们如此看好 Vue 的首要原因是 Vue 的多功能性。 Vue 在 Node.js 或浏览器中基本上“正常工作”； 使用原始 HTML、SFC 或 JSX； 和 render() 函数或模板； 输出 vanilla HTML 或安装在 DOM 上。

在 Vue 2 中，您可以使用现有的 Vue 实例并 在 Node.js 中呈现为 HTML 字符串 vue-server-renderer，在 Vue 3 中，语法略有变化，但总体思路是相似的。 代替 vue-server-renderer，你现在应该使用 @vue/server-renderer:

npm install vue@3.x @vue/server-renderer@3.x

@vue/server-renderer 包出口一个 renderToString() 可用于呈现 Vue 应用程序的函数：

const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = createSSRApp({
  data: () => ({ to: 'World' }),
  template: '<h1>Hello, {{to}}</h1>'
});

void async function main() {
  const html = await renderToString(app);
  console.log(html); // "<h1>Hello, World</h1>"
}();

注意这个例子使用了 Vue 3 的新 createSSRApp() 功能， createApp()。这是 Vue 推荐的服务器端渲染方法，但对于 静态站点 来说并不是绝对必要的，因为两者之间的主要区别 createApp() 和 createSSRApp() 是 对客户端水合作用 的支持。

例如，下面的脚本与上面的脚本工作方式相同，即使它使用 createApp() 而不是 createSSRApp()。

const { createApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = createApp({
  data: () => ({ to: 'World' }),
  template: '<h1>Hello, {{to}}</h1>'
});

void async function main() {
  const html = await renderToString(app);
  console.log(html); // "<h1>Hello, World</h1>"
}();

介绍组合 API

Composition API 是一组相当复杂的工具，可以更轻松地重用 Vue 组件的逻辑。 Composition API 从新的开始 setup() 组件上的功能 。 setup() 函数是组件的 入口点。

例如，以下是如何在 Vue 3 中创建 Hello, World 组件：

const app = createApp({
  data: () => ({ to: 'World' }),
  template: '<hello v-bind:to="to"></hello>'
});

app.component('hello', {
  props: ['to'],
  // "<h1>Hello, World</h1>"
  template: '<h1>Hello, {{to}}</h1>'
});

这 setup()function 可以让你做各种需要在 Vue 2 中的 Vue 实例上定义属性的事情，比如定义反应式属性或注册 生命周期钩子 。

例如，您可以通过从 setup() 功能：

const app = createApp({
  data: () => ({ to: 'World' }),
  template: '<hello v-bind:to="to"></hello>'
});

app.component('hello', {
  props: ['to'],
  // "<h1>Hello, WORLD</h1>"
  template: '<h1>Hello, {{toUpper}}</h1>',
  setup: function(props) {
    return { toUpper: props.to.toUpperCase() };
  }
});

Vue global 也有辅助函数，比如 onMounted() 和 onErrorCaptured() 让你从注册生命周期挂钩 setup() 功能。 这些函数不会覆盖现有的生命周期挂钩，这意味着您可以轻松地为同一个组件生命周期事件定义多个挂钩。

const app = Vue.createApp({
  data: () => ({ to: 'World' }),
  template: '<hello v-bind:to="to"></hello>'
});

// Prints 'Mounted from component!' followed by 'Mounted from setup!'
app.component('hello', {
  props: ['to'],
  template: '<h1>Hello, {{to}}</h1>',
  mounted: function() {
    console.log('Mounted from component!');
  },
  setup: function(props) {
    Vue.onMounted(() => console.log('Mounted from setup!'));
    return {};
  }
});