Vue composition API 吃螃蟹指南

本文是Vue中3新的Composition API简单介绍及使用指南，具体内容可以自行阅读官方提供的RFC。

Motivation

所有API都不是偶然设计出来的，所以作者的设计的时候必定有他的含义，我们先看看文档中提到的两个设计动机。

  • 逻辑复用及代码整理
  • 更好的Typescript支持

像Vue这种现代框架已经很好解决了组件复用这一问题了，但是随着时间推移，你会发现组件里面的状态和逻辑也越来越多，越来越难维护，以一个普通的搜索组件为例，使用普通的语法就像下面的代码那样，用data定义组件的state，在methods里面定义组件的方法，看起来就像下面

export default {
  name: 'SearchComponent',
  data() {
    return {
      🔍
    }
  },
  methods: {
    🔍
  }
}

我们可能还需要一个过滤搜索条件的方法

export default {
  name: 'SearchComponent',
  data() {
    return {
      🔍
      📑
    }
  },
  methods: {
    🔍
    📑
  }
}

可以看到，处理同样逻辑的方法被划分在data和methods里面，我们可以回想一下除此之外定义一个组件有多少个组件选项。

  • components
  • props
  • data
  • computed
  • methods
  • lifecycle methods

处理一个逻辑，状态及方法就可能分离在这6个地方，维护时间一长了，很有可能看到这种千行代码的组件了。（Put some demo）

使用 Composition API 的话会变成什么样子呢，还是以上方搜索组件举例

function 🔍() { // Search state & methods }
function 📑() { // Sort state & methods }

export default {
  name: 'SearchComponent',
  setup() {
    🔍
    📑
  }
}

组件状态及方法单独分离出来了！下面我们接着看一下如何用setup代替以前的方法。

How

我们还是以上面搜索组件为例，我们先转化成较为真实的代码

<template>
  <div class="search">
    <form>
      <input v-model="searchValue" type="text" />
      <button @click="search"></button>
    </form>

    <ul class="result">
      <li class="result__item" v-for="item in filterData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <span v-if="loading">loading</span>
  </div>
</template>

<script>
export default {
  data() {
    searchValue: '',
    loading: true,
    searchResult: []
  },
  computed: {
    filterData() {
      return searchResult.filter(i => i.id > 3)
    }
  },
  methods: {
    async search() {
      this.loading = true
      const { data } = await fetch('/search', body: this.searchValue.trim())
      this.searchResult = data.toJSON()
      this.loading = false
    }
  },
  mounted() {
    // Get initial data
    this.search()
  }
}
</script>

逻辑不复杂，只有一个简单的搜索方法和一个过滤数据的computed方法，组件挂载的时候执行下搜索方法初始化列表数据。我们看一下这部分代码在 Composition API下是怎么工作的。

<template>
  <div class="search">
    <form>
      <input v-model="state.searchValue" type="text" />
      <button @click="search"></button>
    </form>

    <ul class="result">
      <li class="result__item" v-for="item in filterData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <span v-if="state.loading">loading</span>
  </div>
</template>

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

export default {
  setup() {
    // Initial State
    const state = reactive({
      searchValue: '',
      loading: true,
      searchResult: []
    })

    // Computed
    const filterData = computed(() => state.searchResult.filter(i => i.id > 3))

    // Methods
    async function search() {
      state.loading = true;
      const { data } = await fetch('/search', body: this.searchValue.trim())
      state.searchResult = data.toJSON()
      state.loading = false;
    }

    // Lifecircle hook
    onMounted(() => {
      search()
    })

    return { ...toRef(state), filterData, search }
  }
}
</script>

从这里我们可以看到两个明显的变化：

  1. 组件从原本的选项配置变成了函数定义
  2. 由于1中的改变，组件也不需要使用this去指定当前组件执行的上下文

这是组件逻辑复用重要的一步。

逻辑分离和复用

上方简单介绍了如何使用新的API去重构我们的组件，但是还没真正的感受到它的魅力，我们继续拿上方重写好的组件继续改造，把逻辑抽离出来进行复用。我们一开始就知道组件中有搜索和过滤搜索条件两部分重要功能，所以我们目标就是把这两部分逻辑抽离出来。

// Search logic
function useSearch() {
  const searchValue = ref('')
  const searchResult = ref([])
  const loading = ref(true)

  function search() {
    loading.value = true;
    const { data } = await fetch('/search', body: this.searchValue.trim())
    searchResult.value = data.toJSON()
    loading.value = false;
  }

  onMounted(() => search());

  return { searchValue, searchResult, loading, search }
}

// Filter logic
function useFilterSearchResult(searchResult) {
  const filterData = computed(() => searchResult.value.filter(i => i.id > 3))
  return { filterData }
}

// Component Instance
export default {
  setup() {
    const search = useSearch()
    return { ...search, ...useFilterSearchResult(search.searchResult) }
  }
}

从这里我们已经完全将组件中的状态都独立出来了，到此已经大概将Composition API运行方式及使用方式大概介绍完毕了，我们知道了如何把组件的状态单独分开维护，以及使用这些如何使用这些API去组合所有状态及方法。

缺点

聊完 Composition API 的优点，那么我们来聊下它的缺点。Vue中的是使用依赖追踪的方式去通知变更的，所以在开发Vue组件的时候我们只需要用this.x = y重新赋值某个状态，DOM Tree就会自动响应变更。这是Vue的优势，但在Composition API中就变了一个需要重点关注的点，如果使用不好，甚至会变成缺点。

我是可以从试着从Vue的实现原理去查找此原因。Vue2中是使用Object.defineProperty，而Vue3则使用了Proxy，但无论使用哪种方法，我们在访问和设置某个state的时候实际是调用了他们getter/setter的方法，但是这个state作为一个返回值或者参数的时候，它实际是作为一个值传递到了另外要给方法中，所以他的getter/setter将会丢失，数据无法响应。这是什么意思呢，我们可以看到下面的例子

我们先建立一个获取鼠标坐标的hook

function useMousePostion() {
  const pos = reactive({
    x: 0,
    y: 0
  })
  
  onMount(() => {
    // Add Event Listener
  })

  return pos
}

// comsuming component
export default {
  setup() {
    const { x, y } = useMousePosition()

    // 响应丢失
    return { x, y }

    // 响应丢失
    return { ...useMousePositon() }

    // It's work
    return {
      pos: useMousePosition()
    }
  }
}

这是为什么呢？这涉及到Javascript里面的一些基础知识 引用传递及值传递

引用传递及值传递

思考下面的代码

function changeStuff(a, b, c) {
  a = a * 10
  b.item = 'changed'
  c = { item: 'changed' }
}

var num = 10
var obj1 = { item: 'unchanged' }
var obj2 = { item: 'unchanged' }

changeStuff(num, obje1, obj2)
console.log(num)
console.log(obj1.item)
console.log(obj2.item)

10
changed
unchanged

这说明Javascript中参数传递是以值传递的方式进行传递的，而传递的内容是它自己本身的引用值

用官方提供的图表示可能更为直观（左为引用传递，右为值传递）

image

所以上面响应丢失的问题就可以解释了

export default {
  setup() {
    // 这里只取了useMousePosition返回值的引用值
    // 而值里面的getter/setter丢失
    const { x, y } = useMousePosition()

    // 响应丢失
    return { x, y }

    // 响应丢失
    // 同上
    return { ...useMousePositon() }

    // It's work
    // 这里的pos实际是useMousePositon里面的pos的值
    // 所以pos.x与pos.y的属性依旧存在
    return {
      pos: useMousePosition()
    }
  }
}

怎么解决这些问题

使用官方提供的API

看上面的代码，官方有提供有两种方式解决这个问题，我们修改一下useMousePosition，首先是toRefs

function useMousePostion() {
  const pos = reactive({
    x: 0,
    y: 0
  })
  
  onMount(() => {
    // Add Event Listener
  })

  return toRefs(pos)
}

// comsuming component
export default {
  setup() {
    // Work!
    const { x, y } = useMousePosition()
    return { x, y }

    // Work
    return { ...useMousePositon() }
  }
}

另外一个是使用ref去初始化state

function useMousePostion() {
  const x = ref(0)
  const y = ref(0)
  
  onMount(() => {
    document.body.addEventListener('mousemove', (e) => {
      x.value = e.x
      y.value = e.y
    })
    // Add Event Listener
  })

  return { x, y }
}

export default {
  setup() {
    // Work!
    const { x, y } = useMosuePosition()
    return { x, y }

    // Work!
    return { ...useMousePostion() }
  }
}

使用Typesciprt

使用Typescript能严格控制函数参数的类及以及确定函数返回值，结合 Composition 会发生怎样的化学反应呢，我们看以下代码，还是刚才的useMousePosition例子

function useMosuePosition1():  {
  const pos = reactive({
    x: 0,
    y: 0
  })

  return pos
}

function useMousePostion2() {
  const x = ref(0)
  const y = ref(9)

  return { x, y }
}

export default {
  setup() {
    // Code IntelliSense
    // x is number
    // y is number
    const { x, y } = useMousePosition1()

    // x is Ref<number>
    // y is Ref<number>
    const { x, y } = useMousePosition2()
  }
}

而且 Compotion API 的出现的另外一个原因就是为了解决在2中一直被诟病的typescript支持问题，使用函数代替配置的形式能更好地支持类型推断，不会出现像以前拓展了Vue的prototype而推断不出里面的实例方法。

Summary 总结

新的 Composition API 让我们有了更好的方式去组织我们的组件状及方法，但是也像官方介绍文档说的一样 More Flexibility Requires More Discipline，获得更多灵活性同时需要更多的条件去约束。

不管是React Hooks还是Vue Componsition API，我们都可以知道前端工程会变得越来越复杂，前端的架构设计也在不断的进步，现代框架对前端Javascript基本知识是越来严格，各种软件设计模式在前端工程中也会越来越重要。

希望此文对大家吃螃蟹有所启发，共勉之 🙆‍♀️

Vue Composition API RFC —— Vue Composition API介绍
Vue Compostion Repository —— Vue Composition API Github仓库
求值策略 —— 引用传递、值传递介绍

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,684评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,143评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,214评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,788评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,796评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,665评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,027评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,679评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,346评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1赞 331
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,412评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,015评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2赞 343

推荐阅读更多精彩内容