15 分钟掌握 vue-next 函数式 api

最新推荐文章于 2024-09-02 08:38:33 发布

littlelyon

最新推荐文章于 2024-09-02 08:38:33 发布

阅读量523

点赞数

分类专栏： vue 文章标签： vue vue-next 前端 javascript

本文链接：https://blog.csdn.net/littlelyon/article/details/102765290

版权

本文详细介绍了Vue-next中的函数式API，重点解析了setup、state、props、context和生命周期等关键概念。通过实例展示了如何声明和使用响应式状态，并与Vue2进行了对比，强调了Vue-next在响应式系统和生命周期管理上的改进。

摘要由CSDN通过智能技术生成

写在前面

在分享 vue-next 各个子模块的实现之前，我觉的有必要比较全面的整理下 vue-next 中提出的函数式 api，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。

类似的东西在网上有很多，只是会比较零碎，同时有些也相对过时了，当然当前整理的这些也有可能会过时，毕竟代码还处于 pre-alpha 的阶段，但其中的设计思想应该是不会改变了。

往期文章

15 分钟掌握 vue-next 响应式原理

vue-next/runtime-core 源码阅读指南

setup

setup 会作为编写组件业务逻辑的主战场，各种 hook 类型的方法均需要在 setup 这个作用域下调用，直接来看 RFC 中的例子：

<template>
  <button @click="increment">
    Count is: {
  { state.count }}, double is: {
  { state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count \* 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

其代码结构看起来和 vue2 基本保持一致，不过有以下几点需要注意：