Vue3新版本特性 - 数据选项
数据选项破总览 BREAKING：data组件选项声明不再接受纯JavaScriptobject并需要function声明。 BREAKING：合并data来自mixin或扩展的多个返回值时，合并现在较浅而不是较深（仅合并了根级属性）。2.x语法在2.x中，开发人员可以data使用object或定义选项function。例如：<!- Object Declaration -><script> const app = new Vue( data: apiKey: a1b2c3 )</script><!- Function Declaration -><script> const app = new Vue( data() return apiKey: a1b2c3 )</script>12345678910111213141516171819尽管就具有共享状态的根实例而言，这提供了一些便利，但是由于仅在根实例上才有可能导致混乱。3.x更新在3.x中，该data选项已被标准化为仅接受function返回的aobject。使用上面的示例，只有一种可能的代码实现：<script> import createApp from vue createApp( data() return apiKey: a1b2c3 ).mount(#app)</script>1234567891011Mixin合并行为更改另外，当data()从一个组件及其mixin或extended base合并时，合并现在将执行得很浅：const Mixin = data() return user: name: Jack, id: 1 const CompA = mixins: Mixin, data() return user: id: 2 123456789101112131415161718192021在Vue 2.x中，结果$data为： user: id: 2, name: Jack 123456在3.0中，结果将是： user: id: 2 12345迁移策略对于依赖对象声明的用户，我们建议： 将共享数据提取到外部对象中，并将其用作data 重写对共享数据的引用以指向新的共享对象对于依赖mixin的深度合并行为的用户，我们建议重构代码以避免完全依赖，因为mixin的深度合并是非常隐式的，会使代码逻辑更难以理解和调试。碎片新总览在Vue 3中，组件现在正式支持多根节点组件，即片段！2.x语法在2.x中，不支持多根组件，并且在用户意外创建组件时会发出警告。结果，许多组件被包装在一个<div>中，以解决此错误。<!- Layout.vue -><template> <div> <header>.</header> <main>.</main> <footer>.</footer> </div></template>123456783.x语法在3.x中，组件现在可以具有多个根节点！但是，这确实需要开发人员明确定义属性应在何处分发。<!- Layout.vue -><template> <header>.</header> <main v-bind="$attrs">.</main> <footer>.</footer></template>123456有关属性继承如何工作的更多信息，请参见非属性。功能组件破总览在变化方面，概括地说： 在2.x中，功能组件从2.x的性能提升现在可以忽略不计，因此我们建议仅使用有状态组件 只能使用接收一个普通的函数来创建功能部件props和context（即，slots，attrs，emit） BREAKING：functional单文件组件（SFC）上的属性<template>已删除 BREAKING： functional: true 功能创建的组件中的选项已删除有关更多信息，请继续阅读！介绍在Vue 2中，功能组件有两个主要用例： 作为性能优化，因为它们的初始化要比有状态组件快得多 返回多个根节点但是，在Vue 3中，有状态组件的性能已提高到可以忽略不计的程度。此外，有状态组件现在还具有返回多个根节点的功能。结果，功能组件唯一剩下的用例就是简单的组件，例如用于创建动态标题的组件。否则，建议您像往常一样使用有状态组件。2.x语法使用<dynamic-heading>组件，它是负责呈现出相应的标题（即h1，h2，h3，等），这可能是在2.x的书面作为一个单一的文件组成：/ Vue 2 Functional Component Exampleexport default functional: true, props: level, render(h, props, data, children ) return h(h$props.level, data, children) 12345678或者，对于那些喜欢<template>使用单文件组件的人：/ Vue 2 Functional Component Example with <template><template functional> <component :is="h$props.level" v-bind="attrs" v-on="listeners" /></template><script>export default props: level</script>12345678910111213143.x语法函数创建的组件现在在Vue 3中，所有功能组件都使用普通函数创建。换句话说，不需要定义 functional: true component选项。他们将收到两个参数：props和context。的context参数是包含一个组件的一个对象attrs，slots和emit特性。此外，现在已全局导入而不是h在render函数中隐式提供h。使用前面提到的<dynamic-heading>组件示例，现在是它的外观。import h from vueconst DynamicHeading = (props, context) => return h(h$props.level, context.attrs, context.slots)DynamicHeading.props = levelexport default DynamicHeading123456789单一文件组件（SFC）在3.x中，有状态组件和功能组件之间的性能差异已大大减少，在大多数使用情况下将不明显。因此，开发人员functional在SFC上使用的迁移路径是删除属性。无需其他工作。使用<dynamic-heading>以前的示例，现在的样子。<template> <component v-bind:is="h$props.level" v-bind="$attrs" /></template><script>export default props: level</script>123456789101112主要区别在于：1. functional属性已于移除<template>2. listeners现在作为一部分传递$attrs，可以删除下一步有关新功能组件的用法以及总体上对呈现功能所做的更改的更多信息，请参见： 迁移：渲染功能 指南：渲染功能全局API破Vue 2.x具有许多全局性地改变Vue行为的全局API和配置。例如，要创建全局组件，可以使用如下所示的Vue.componentAPI：Vue.component(button-counter, data: () => ( count: 0 ), template: <button click="count+">Clicked count times.</button>)123456同样，这是声明全局指令的方式：Vue.directive(focus, inserted: el => el.focus()123尽管此方法很方便，但会导致两个问题。从技术上讲，Vue 2没有“应用”的概念。我们定义为应用程序只是通过创建的根Vue实例new Vue()。从同一个Vue构造函数创建的每个根实例都共享相同的全局配置。结果是： 全局配置使测试过程中意外污染其他测试案例变得容易。用户需要仔细存储原始的全局配置，并在每次测试后将其还原（例如，重置Vue.config.errorHandler）。像一些APIVue.use和Vue.mixin甚至没有办法恢复自己的影响。这使得涉及插件的测试特别棘手。实际上，vue-test-utils必须实现一个特殊的APIcreateLocalVue来处理此问题：import createLocalVue, mount from vue/test-utils/ create an extended Vue constructorconst localVue = createLocalVue()/ install a plugin “globally” on the “local” Vue constructorlocalVue.use(MyPlugin)/ pass the localVue to the mount optionsmount(Component, localVue )12
