[译] Vue 3: Data 江河日下,Events 拔犀擢象

Vue 3: Data down, Events up | Vue Mastery - Thorsten Lünborg

前言

在这篇文章中,我将展示一个我们可以应用 Vue 3 的新 Composition API 解决一个特定挑战的模式。我不会介绍所有的基础知识,因此熟悉这个 新 API 的基础知识 将对您有所帮助。

重要提示: Composition API 是一个添加剂,是一个新特性,它没有也不会取代 Vue 1 和 2 中你所了解和喜爱的很好的旧 “Options API”。只要把这个新的 API 看作你工具箱中另一个工具,那么在使用 Options API 解决有些笨拙的情况下,它可能会派上用场。


我喜欢 Vue 的新 Composition API。对我来说,Vue 的反应系统似乎已经摆脱了组件的约束,现在我可以使用它来编写任何我想要的反应代码。

根据我的经验,一旦您对它有所了解,它就是一个创建灵活、可重用代码的极好的方法,这些代码可以很好地组合,并让你看到组件的所有部分和特性是如何交互的。

我将以一个小工具开始这篇文章,你可以用它更容易地使用组件和 v-model


概述: v-model 指令

如果你使用过 Vue,你就知道 v-model 指令:

<input type="text" v-model="localStateProperty">

这是一个非常赞的快捷方式,以避免我们输入复杂的模板标记,像这样:

<input 
  type="text" 
  :value="localStateProperty" 
  @change="localStateProperty = $event.target.value"
>

最棒的是,我们还可以在组件上使用它:

<message-editor v-model="message">

这相当于做以下事情:

<message-editor 
  :modelValue="message" 
  @update:modelValue="message = $event"
>

但是,为了实现属性(prop)和事件(event)的约定,我们的 <message-editor> 组件必须看起来像这样:

<template> 
  <label> 
    <input type="text" :value="modelValue", @change="(event) => $emit('update:modelValue', event.target.value)" > 
  <label>
</template>

<script> export default { 
  props: { 
    'modelValue': String, 
  } 
}
</script>

然而,这似乎相当冗长。🧐

我们必须这样做,因为无法直接写到属性。我们必须发出正确的事件,并将其留给父组件来决定如何处理我们传递的更新,因为它是父组件的数据,而不是 <message-editor> 组件的数据。因此,在这种情况下,我们不能在 input 上使用 v-model。烦人。

你可能从 Vue 2 了解到 Options API 中有一些处理这个问题的模式,但是今天我想看看使用 Composition API 提供的工具如何以一种简洁的方式解决这个问题。


挑战: 减少样板

我们想要实现的是一个抽象,它允许我们在输入中使用相同的 v-model 快捷方式,即使我们实际上不想写入本地状态,而是想发出正确的事件。这是我们希望模板完成后的样子:

<template> 
  <label> 
    <input 
      type="text" 
      v-model="message" 
    /> 
  <label>
</template>

那么,让我们使用 Composition API 来实现这个:

import { computed } from 'vue'

export default { 
  props: { 
    'modelValue': String, 
  },
  setup(props, { emit }) { 
    const message = computed({ 
      get: () => props.modelValue, 
      set: (value) => emit('update:modelValue', value) 
    }) 

    return { 
      message,
    } 
  }
}

好吧,这是一段新的代码,也许有点异形。让我们来分解一下:

import { computed } from 'vue'

首先,我们导入 computed() 函数,该函数返回一个用于计算属性的引用(ref) —— 一个用于从其他反应性数据(例如 props)派生出值的包装器。

const message = computed({ 
  get: () => props.modelValue, 
  set: (event) => emit('update:modelValue')
})

在 setup 中,我们创建了这样一个计算属性,但是是一个特殊的属性:我们计算属性有一个 gettersetter,因此我们实际上可以读取它的派生值并为它赋一个新值。

这是我们计算属性在 Javascript 中使用时的行为:

message.value
// => '这返回一个字符串'
message.value = 'This will be emitted up'
// => 调用 emit('onUpdate:ModelValue', 'This will be fired up')

通过从 setup() 函数返回这个计算属性,我们将它暴露给模板。现在,我们可以将它和 v-model 一起使用,得到一个干净漂亮的模板:

<template> 
  <label> 
    <input 
      type="text" 
      v-model="message" 
    > 
  <label>
</template>

<script>
import { computed } from 'vue'

export default { 
  props: { 
    'modelValue': String, 
  },
  setup(props, { emit }) { 
    const message = computed({ 
      get: () => props.modelValue, 
      set: (value) => emit('update:modelValue', value) 
    }) 

    return { 
      message, 
    } 
  }
}
</script>

现在模板非常干净。但与此同时,我们必须在 setup() 中编写一堆样板文件来实现这一点。看起来我们只是将样板文件从模板移到了 setup 函数中。

因此,让我们将这个逻辑提取到它自己的函数中——一个 composition 函数——或者简称为 “composable”。


将其转换为 composable

composable 只是一个函数,我们使用它从 setup 函数中抽象出一些代码。可组合性(Composables)是这个新 Composition API 的优势,也是允许更好的代码抽象和组合的核心原则。

这就是我们的目标:

📄 modelWrapper.js

import { computed } from 'vue'

export function useModelWrapper(props) { 
  /* 暂时不讨论实现 */
}

📄 MessageEditor.vue

import { useModelWrapper } from '../utils/modelWrapper'

export default { 
  props: { 
    'modelValue': String, 
  } 
  setup(props, { emit }) { 
    return { 
      message: useModelWrapper(props), 
    } 
  }
}

注意,我们的 setup() 函数中的代码是如何简化为一行代码的(如果我们假设我们在一个很好的编辑器中工作,它可以为我们自动添加 useModelWrapper 的导入,比如 VSCode)。

我们是怎么做到的呢?实际上,我们所要做的就是将 setup 中的代码复制粘贴到这个新函数中!这是它的样子:

📄 modelWrapper.js

import { computed } from 'vue'

export function useModelWrapper(props) { 
  return computed({ 
    get: () => props.modelValue, 
    set: (value) => emit('update:modelValue', value) 
  })
}

好吧,这很简单,但我们能做得更好吗? 是的,我们可以!

不过为了理解我们可以用什么方式,我们将绕一小圈回到 v-model 如何在组件上工作……

在 Vue 3 中,v-model 可以使用额外的参数将其应用到 modelValue 以外的属性上。如果组件想要公开多个属性作为 v-model 的目标,这是非常有用的。

v-model:argument

<message-editor 
  v-model="message" 
  v-model:draft="isDraft" 
/>

第二个 v-model 可以这样实现:

<input
  type="checkbox" 
  :checked="draft",
  @change="(event) => $emit('update:modelValue', event.target.checked)"
 >

再重复一遍冗长的模板代码。是时候调整新的 composition 函数,这样我们也可以在这个例子中重用它。

要实现这一点,我们需要向函数添加第二个参数,该函数指定我们实际想要封装的属性名称。由于 modelValuev-model 的默认属性名称,我们也可以将它作为包装器的第二个参数的默认名称:

📄 modelWrapper.js

import { computed } from 'vue'

export function useModelWrapper(props, name = 'modelValue') { 
  return computed({ 
    get: () => props[name], 
    set: (value) => emit(`update:${name}`, value) 
  })
}

就是这样。现在我们可以对任何 v-model 属性使用这个包装器。

所以最终的组件看起来是这样的:

<template> 
  <label> 
    <input type="text" v-model="message" > 
    <label> <label> 
    <input type="checkbox" v-model="isDraft"> Draft 
  </label>
</template>

<script>
import { useModelWrapper } from '../utils/modelWrapper'

export default { 
  props: { 
    modelValue: String, 
    draft: Boolean
  },
  setup(props, { emit }) { 
    return { 
      message: useModelWrapper(props, 'modelValue'), 
      isDraft: useModelWrapper(props, 'draft') 
    }
  }
}
</script>

下一步

这种可组合性不仅在我们希望将 modelValue 属性映射到模板中的输入时有用,还可以使用它将计算属性引用传递给其他需要引用的可赋值组合。

通过像上面那样,首先包装 modelValue 属性,其次组合函数可以不知道我们实际上没有处理局部状态的事实。我们在可组合的小 useModelWrapper 中抽象了实现细节,因此其他可组合的可以将其视为本地状态。


“快速输入,否则丢失”

作为一个公认的愚蠢示例,我们有一个名为 useMessageReset 的可组合组件。当你停止输入 5 秒后,它会将你的信息重置为空字符串。它是这样的:

function useMessageReset(message) {
  let timeoutId
  const reset = () => {
    if (timeoutId) {
      clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(() => (message.value = ''), 5000)
    watch(message, () => message.value !== '' && reset())
  }
}

此可组合使用 watch(),这是 Composition API 的另一个功能。

  • 每当消息更改时,第二个参数中的回调函数就会运行。
  • 如果消息不是空的,它将(重新)启动超时,5 秒后将消息重置为空值。

注意,这个函数期望接收一个它可以监视的引用并为其赋值。

我们在使用 modelValue 属性时会遇到问题,因为我们不能直接写入它。但使用 useModelWrapper,我们可以提供一个可写的计算属性引用到这个组合:

import { useModelWrapper } from '../utils/modelWrapper'
import { useMessageReset } from '../utils/messageReset'

export default {
  props: { modelValue: Boolean },
  setup(props, { emit }) {
    const message = useModelWrapper(props)
    useMessageReset(message)
    return { message }
  }
}

注意,这个可组合组件是如何不知道 message 实际上是为父组件的 v-model 发出一个事件的。就像我们通过普通的 ref() 一样,它只能分配给 .value

还要注意,我们的其余功能是如何不受此影响的。我们仍然可以在模板中使用 message,或者以其他方式使用它。


最后的感想

对于每个想要使用它的 Vue 开发人员来说,composition API 是一个伟大的、灵活的工具。上面显示的只是冰山一角。

本作品采用《CC 协议》,转载必须注明作者和本文链接

初出茅庐,一知半解,望有识之士多多赐教。

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!