您应该知道的 Vue 3 组合 API 提示

随着 Vue 3 Alpha 的推出，许多开发人员正在尝试新的更改——最大的更改是 Composition API。

我花了一些时间研究新的组合 API，并学习如何实现它。以下是一些需要一些时间才能弄清楚的事情。希望它能为您节省一些设置时间。

在本文结束时，您应该对组合 API 以及如何在项目中实现它有更多了解。

1.正确使用它以保持井井有条

组合 API 的主要好处是有效地组织和重用代码。在选项 API 中，单个功能的代码可以分隔到不同的组件选项中。现在，一切都集中在一个地方。

建议的设计模式之一是将代码编写进去分开函数，返回要公开的属性，然后将它们包含在设置方法中。

组合 API 的主要好处是能够更有效地组织和重用代码。

export default {

  setup() {

    const search = configureSearch()

    // ...

    return {

      search,

    }

  },

}

// can even be in separate file and imported

function configureSearch() {

  // ...

  return { search, findString, autoComplete }

}

这对于创建更具可读性的组件非常有用。此外，这意味着您甚至可以将功能提取到单独的文件中，并将它们导入到任何您需要的地方。

2. 何时使用 ref 或 reactive

因为 Composition API 直接暴露了 Vue 的反应式 API，所以我们有两种不同的方法来创建反应式数据：和 。refreactive

const value = ref(0)

// OR

const state = reactive({

  value: 0,

})

根据我的经验，我倾向于总是使用 ，但这绝对是一个有争议的话题。ref在这里查看我的视频，了解我为什么使用 ref

如果您想更深入地了解反应性何时丢失，组合 API RFC是一个很好的起点。

3. 您可以在 setup（） 中访问道具

在 Vue2 中，我们可以使用this.propName

选项 API 和组合 API 之间的一个巨大区别是我们使用该方法的事实。setup 的访问权限与我们的 Options API 方法不同。setup()this

虽然这不是访问组件数据和方法的问题——因为它们将在我们的设置方法中定义——但在尝试引用组件的 props 时，它确实会导致问题。

值得庆幸的是，我们的 setup 方法接受 components props 作为其第一个参数。

export default {

  setup(props) {

    console.log(props)

  },

}

使用这种语法，我们现在可以在设置方法中访问组件的 props。这意味着我们的数据、方法、计算值等都可以使用对道具的引用。

请记住，道具应该是只读的，永远不要更改。

4. setup()也有一个 context 参数

除了接受 props 作为参数之外，还有第二个可选参数：一个 context 对象，它公开了 Vue 实例的三个属性。setup()

• Attrs （阿特瑞斯）– 组件的属性

• 插槽–一个组件的插槽

• 发出– 允许我们从这个组件发出一个事件

我们可以像这样访问这个上下文对象。

export default {

  setup(props, context) {

    console.log(props)

    console.log(context)

    context.emit('eventName')

  },

}

或者，如果我们不需要整个上下文对象，我们可以解构它。

export default {

  setup(props, { emit }) {

    console.log(props)

    emit('eventName')

  },

}

结论

新增功能最佳做法、技术和设计模式将在未来 Vue 3 正式发布时出现。但就目前而言，这些只是我希望在我开始使用 Composition API 时知道的一些事情。

希望您学到了一些东西，并对新的变化感到更自在。

祝您编码愉快！