Vue.js
[译] Vue 3 迁移策略 —— 自定义元素的互操作的变化（破坏性改动）__Vue.js
发布于 4 年前 作者 banyungong 1533 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

需要调研 vue 2 到 vue 3 的迁移方案，来做内部分享。

我看网上貌似目前只有一人翻译了，翻译了前几章。

但是我着急用，只能自己翻了。译者四级没过，全靠有道和谷歌了。

vue 3 官方文档原文—— custom-elements-interop

这篇太难了。。。完全不知道怎么翻译。。。

自定义元素的互操作的变化

概览

破坏性改动

  • 现在，自定义元素白名单是在模板编译期间执行的，应通过编译器选项而不是运行时配置进行配置。
  • 特殊的 is 使用仅限于保留的 <component> 标签

新功能

  • 有一个新的 v-is 指令可支持 2.x 用例，其中在原生元素上使用 is 可以解决本机 HTML 解析限制。

自主定制元素

如果要添加在 Vue 之外的自定义元素（例如，使用 Web Components API），则需要“告诉” Vue 将其视为自定义元素。以下模板为例。

<plastic-button></plastic-button>

2.x 语法

在 Vue 2.x 中，通过 Vue.config.ignoredElements 将标签作为自定义元素添加到白名单：

// 使 Vue 忽略在 Vue 之外的自定义元素
Vue.config.ignoredElements = ['plastic-button']

3.x 语法

在 Vue 3.0 中，是在模板编译期间执行检查的。 指示编译器将 <plastic-button> 视为自定义元素：

  • 如果使用构建步骤：将 isCustomElement 选项传递给 Vue 模板编译器。如果使用 vue-loader，则应通过 vue-loader 的 compilerOptions 选项传递：
// in webpack config
rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === 'plastic-button'
      }
    }
  }
  // ...
]
  • 如果使用即时模板编译，请通过 app.config.isCustomElement 传递它：
const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'plastic-button'

需要着重注意的是，运行时配置仅影响运行时模板的编译，而不会影响预编译的模板。

自定义内置元素

Custom Elements 规范提供了一种将定制元素用作 Customized Built-in Element 的方法，通过将 is 属性添加到内置元素：

<button is="plastic-button">Click Me!</button>

Vue 使用 is 特殊 prop 是在将原生属性在浏览器中普遍使用之前模拟该属性。 但是，在 2.x 中，它被解释并渲染成名为 plastic-button 的 Vue 组件。 这阻止了上述自定义内置元素的原本用法。

在 3.0 中，我们将 Vue 对 is prop 的特殊处理仅限于 <component> 标签。

  • 当在保留标签 <component> 上使用时，其行为与2.x中的行为完全相同；

  • 当在通常组件上使用时，其行为类似于普通的 prop 属性

    <foo is="bar" />
    • 2.x 行为：渲染 bar 组件
    • 3.x 行为：渲染 foo 组件并传递 is prop。

  • 当在普通元素上使用时，它将作为 is 选项传递给 createElement 调用，同事还作为原生属性来渲染。这支持自定义内置元素的使用。

    <button is="plastic-button">Click Me!</button>
    • 2.x 行为：渲染为 plastic-button 组件。
    • 3.x 行为：通过调用渲染为原生按钮
      document.createElement('button', { is: 'plastic-button' })

v-is 用于 In-DOM 模板解析解决方法

注意：本部分仅影响将 Vue 模板直接写入页面 HTML 的情况。 使用 In-DOM 模板时，该模板应遵守原生 HTML 解析规则。 某些 HTML 元素（例如 <ul>，<ol>，<table> 和 <select>）对可以在其中显示哪些元素有限制，而某些元素（例如 <li>，<tr> 和 <option>）只能 出现在某些其他元素内。

2.x 语法

在 Vue 2 中，我们建议通过在原生标签上使用 is prop 来解决这些限制：

<table>
  <tr is="blog-post-row"></tr>
</table>

3.x 语法

随着 is 的行为变化，我们引入了新的指令 v-is 来解决这些情况：

<table>
  <tr v-is="'blog-post-row'"></tr>
</table>

warning!

v-is 方法类似于 2.x 中的动态绑定 :is —— 因此，要通过其注册名称来呈现组件，其值应为 JavaScript 字符串字面量：

<!-- Incorrect, nothing will be rendered -->
<tr v-is="blog-post-row"></tr>

<!-- Correct -->
<tr v-is="'blog-post-row'"></tr>

迁移策略

  • 将 config.ignoredElements 替换为 vue-loader 的 CompilerOptions（带有构建步骤）或 app.config.isCustomElement（带有即时模板编译）
  • 将所有非 component 标签的 is 更改为 <component is="...">（对于SFC模板）或 v-is（对于 in-DOM 模板）

    版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: zhaozhe0831 原文链接：https://juejin.im/post/6865199136803815432

回到顶部