未找到适用于完成此操作的图像处理组件_Vue 3新特性RFC-0027自定义元素的操作...

目录

达瓦里希：Vue 3新特性RFC列表（翻译尚未完成）​zhuanlan.zhihu.com

Vue RFC*(Request For Comments)旨在为新特性进入Vue框架提供一个持久而可控的渠道。

可以通过正常的GitHub拉取请求工作流程来实现和检查许多更改，包括错误修复和文档改进。

但是，有些更改是“重要的”，我们要求对这些更改进行一些设计过程，并在Vue核心团队和社区之间达成共识。

• 开始日期：2020-03-25
• 目标主要版本：3.x
• 参考问题：N / A

摘要

• 解决：自定义元素的白名单现在在模板编译期间执行，其实应该通过对于编译器的配置而不是运行时的标注进行配置。
• 解决：将一个特殊的is Prop*（不一定是IS）的使用限制仅限为<component>标签。
• 引入新的v-is指令以支持2.x用例，其中is对本机元素使用该指令来解决本机HTML解析限制。

动机

• 以适宜的方式提供本机自定义元素支持
• 改进对自定义内置元素的支持。

详细设计

自主定制元素

在Vue 2.x中，将Tag作为自定义元素列入白名单是通过配置Vue.config.ignoredElements进行的。缺点是，使用此配置选项时，需要在每个vnode创建时进行一次检查。

在Vue 3.0中，此检查是在模板编译期间执行的。例如，给定以下模板：

<plastic-button></plastic-button>

默认生成的渲染功能代码为（伪代码）：

function render （） { 
  const  component_plastic_button  =  resolveComponent （'plastic-button' ）
  return  createVNode （component_plastic_button ）
}

如果未找到名为plastic-button的组件，这个渲染器将发出一个警告。

如果用户希望使用名为plastic-button的本机自定义元素，则所需的生成代码应为：

function render （） { 
  return  createVNode （'plastic-button' ） //渲染为本机元素
}

因此，为了指示编译器将其<plastic-button>视为自定义元素：

• 如果使用构建步骤：将isCustomElement选项传递给Vue模板编译器。如果使用vue-loader，则应通过vue-loader的compilerOptions选项传递：

// webpack 配置
rules: [
  {
    test: /.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag === 'plastic-button'
      }
    }
  }
  // ...
]

• 如果使用即时模板编译，则通过app.config传递

const app = Vue.createApp(/* ... */)

app.config.isCustomElement = tag => tag === 'plastic-button'

请注意，运行时配置仅影响运行时模板的编译，而不会影响预编译的模板。

自定义的HTML内建元素

通过将is属性添加到HTML内建元素，自定义元素规范提供了一种将自定义元素用作自定义HTML内建元素的方法：

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

Vue对is特殊属性的使用是在浏览器层级上全局可用之前模拟原生属性的行为。然而，在2.x版本中，它被实现为渲染一个name为plastic-button的Vue组件。这阻止了上述自定义内建元素的原生用法。

在3.0中，我们将Vue对isprop 的特殊处理限制在<component>标签上。

• 在<component>标签上使用时，其行为与2.x中的行为完全相同。
• 当在普通组件上使用时，它的行为类似于普通的属性：

<foo is="bar" />

• • 2.x行为：渲染bar组件。
  • 3.x行为：渲染foo组件并传递is属性。

• 当在普通元素上使用时，它将被作为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中，我们建议通过在本地标签上使用is属性来解决这些限制：

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

通过上述is提议的行为更改，我们需要引入新的指令v-is来解决这些情况：

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

注意v-is功能类似于动态2.x :is绑定-因此，要通过注册名称来呈现组件，其值应为JavaScript字符串。

采纳策略

• Compat版本可以检测到使用情况config.ignoredElements并提供适当的警告和指导。
• Codemod可以自动将所有2.x非<component>标记的is用法转换为<component is>（对于SFC模板）或v-is（对于In -DOM模板）。

其他RFC

达瓦里希：Vue 3新特性RFC列表（翻译尚未完成）​zhuanlan.zhihu.com