《Vue3新版本特性 - 数据选项》由会员分享，可在线阅读，更多相关《Vue3新版本特性 - 数据选项（24页珍藏版）》请在金锄头文库上搜索。
1、数据选项破总览 BREAKING：data组件选项声明不再接受纯JavaScriptobject并需要function声明。 BREAKING：合并data来自mixin或扩展的多个返回值时，合并现在较浅而不是较深（仅合并了根级属性）。2.x语法在2.x中，开发人员可以data使用object或定义选项function。例如： const app = new Vue( data: apiKey: a1b2c3 ) const app = new Vue( data() return apiKey: a1b2c3 )12345678910111213141516171819尽管就具有共享状态的根
2、实例而言，这提供了一些便利，但是由于仅在根实例上才有可能导致混乱。3.x更新在3.x中，该data选项已被标准化为仅接受function返回的aobject。使用上面的示例，只有一种可能的代码实现： import createApp from vue createApp( data() return apiKey: a1b2c3 ).mount(#app)1234567891011Mixin合并行为更改另外，当data()从一个组件及其mixin或extended base合并时，合并现在将执行得很浅：const Mixin = data() return user: name: Jack,
3、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的深度合并是非常隐式的，会使代码逻辑更
4、难以理解和调试。碎片新总览在Vue 3中，组件现在正式支持多根节点组件，即片段！2.x语法在2.x中，不支持多根组件，并且在用户意外创建组件时会发出警告。结果，许多组件被包装在一个中，以解决此错误。 . . . 123456783.x语法在3.x中，组件现在可以具有多个根节点！但是，这确实需要开发人员明确定义属性应在何处分发。 . . .123456有关属性继承如何工作的更多信息，请参见非属性。功能组件破总览在变化方面，概括地说： 在2.x中，功能组件从2.x的性能提升现在可以忽略不计，因此我们建议仅使用有状态组件 只能使用接收一个普通的函数来创建功能部件props和context（即，slo
5、ts，attrs，emit） BREAKING：functional单文件组件（SFC）上的属性已删除 BREAKING： functional: true 功能创建的组件中的选项已删除有关更多信息，请继续阅读！介绍在Vue 2中，功能组件有两个主要用例： 作为性能优化，因为它们的初始化要比有状态组件快得多 返回多个根节点但是，在Vue 3中，有状态组件的性能已提高到可以忽略不计的程度。此外，有状态组件现在还具有返回多个根节点的功能。结果，功能组件唯一剩下的用例就是简单的组件，例如用于创建动态标题的组件。否则，建议您像往常一样使用有状态组件。2.x语法使用组件，它是负责呈现出相应的标题（即h1
6、，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或者，对于那些喜欢使用单文件组件的人：/ Vue 2 Functional Component Example with export default props: level12345678910111
7、213143.x语法函数创建的组件现在在Vue 3中，所有功能组件都使用普通函数创建。换句话说，不需要定义 functional: true component选项。他们将收到两个参数：props和context。的context参数是包含一个组件的一个对象attrs，slots和emit特性。此外，现在已全局导入而不是h在render函数中隐式提供h。使用前面提到的组件示例，现在是它的外观。import h from vueconst DynamicHeading = (props, context) = return h(h$props.level, context.attrs, cont
8、ext.slots)DynamicHeading.props = levelexport default DynamicHeading123456789单一文件组件（SFC）在3.x中，有状态组件和功能组件之间的性能差异已大大减少，在大多数使用情况下将不明显。因此，开发人员functional在SFC上使用的迁移路径是删除属性。无需其他工作。使用以前的示例，现在的样子。 export default props: level123456789101112主要区别在于：1. functional属性已于移除2. listeners现在作为一部分传递$attrs，可以删除下一步有关新功能组件的用法
9、以及总体上对呈现功能所做的更改的更多信息，请参见： 迁移：渲染功能 指南：渲染功能全局API破Vue 2.x具有许多全局性地改变Vue行为的全局API和配置。例如，要创建全局组件，可以使用如下所示的VponentAPI：Vponent(button-counter, data: () = ( count: 0 ), template: Clicked count times.)123456同样，这是声明全局指令的方式：Vue.directive(focus, inserted: el = el.focus()123尽管此方法很方便，但会导致两个问题。从技术上讲，Vue 2没有“应用”的概念。我
10、们定义为应用程序只是通过创建的根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
