专栏首页云前端实用!最新的几个 Vue 3 重要特性提案

实用!最新的几个 Vue 3 重要特性提案

在几天前开启的 SFC Improvements #182 中,yyx990803 提交了 3 个改进开发者体验的征求意见稿。

虽然看上去都不是体量很大的改动,但都相当实用,开发者谁用谁知道!一起来先睹为快:

1. <component> 组件导入语法糖

在目前的写法中,要引入其它组件,就得先在 <script> 中 import,再将其模块名放入组件的 components: {} 属性对象中。比如:

<template>
  <Foo/>
</template>

<script>
import Foo from './Foo.vue'

export default {
  components: {
    Foo
  }
}
</script>

又或者异步组件:

<template>
  <Foo/>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    Foo: defineAsyncComponent(() => import('./Foo.vue'))
  }
}
</script>

这样写起来既费力,又在使用新的 Composition API 显得不那么“新”,还是要 props、components 写一大堆。

有鉴于此,新的提案设计成这样:

<component src="./Foo.vue"/>
<component async src="./Bar.vue"/>
<component src="./Baz.vue" as="Qux" />

<template>
  <Foo/>
  <Bar/>
  <Qux/>
</template>

2. 简化 Composition API 的 <script setup>

正如上面提到过的,在使用新的 Composition API 时,对于不用引入其它组件的、相对简单的那些组件来说,只包含一个 setup() 的组件声明对象也很常见。比如:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc
    }
  }
}

新提案将其简化为:

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

export const count = ref(0)
export const inc = () => count.value++
</script>

另外,<script setup> 中将隐式注入几个对象:

  • $props
  • $attrs
  • $slots
  • $emit

比如之前的写法为:

import { watchEffect } from 'vue'

export default {
  setup($props, { emit: $emit }) {
    watchEffect(() => console.log($props.msg))
    $emit('foo')
    return {}
  }
}

简化后 <script setup> 中写为:

import { watchEffect } from 'vue'

watchEffect(() => console.log($props.msg))
$emit('foo')

声明其它组件选项

使用 <script setup> 后,如果还想手动指定 props 等组件选项,可以用一个 export default 解决,即:

<script setup>
import { computed } from 'vue'

export default {
  props: {
    msg: String
  },
  inheritAttrs: false
}

export const computedMsg = computed(() => $props.msg + '!!!')
</script>

结合 TypeScript

要声明 props 或 emit 等隐式对象的 TS 类型,采用下面的语法:

<script setup lang="ts">
import { computed } from 'vue'

// 使用 TypeScript 语法声明 props
declare const $props: {
  msg: string
}

export const computedMsg = computed(() => $props.msg + '!!!')
</script>

重要的是,这些 TS 声明会被自动编译成等价的运行时声明。如以上代码将转化为:

<script lang="ts">
import { computed, defineComponent } from 'vue'

type __$props__ = { msg: string }

export default defineComponent({
  props: (['msg'] as unknown) as undefined,
  setup($props: __$props__) {
    const computedMsg = computed(() => $props.msg + '!!!')

    return {
      computedMsg
    }
  }
})
</script>

这样也避免了为静态检查和运行时写两遍重复的声明。

3. 状态驱动的 <style> 中 CSS 变量注入

以往要根据状态或属性来影响样式的话,还是比较麻烦的。首先要提前在 <style> 中写好几种 className 对应的样式,再利用脚本动态在模版中赋相应的 className 才行。

新提案结合原生的 CSS variables 特性,提供了更方便的联动方案:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style :vars="{ color }">
.text {
  color: var(--color);
}
</style>

总结

再次重复,这几个特性仅仅是最新的提案,并不一定是最终的样子;但鉴于其实用性,开发者还是有必要早做了解,多提建议。

提案地址如下:https://github.com/vuejs/rfcs/pull/182 --End--

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 更可靠的 React 组件:单一职责原则

    原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-c...

    江米小枣
  • 照方抓药 - 重构 React 组件的实用清单

    本文尝试将相关的概念做一个总结,列出一张可用、实用的方法论清单,让我们每次新建组件、修改组件时有章可循,真诚是让一切变好的基础,但实用的套路也是必不可少的。

    江米小枣
  • [译] React 中的 dumb 组件和 smart 组件

    原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a6...

    江米小枣
  • Python 竟能绘制出如此酷炫的三维图

    通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的:

    double
  • WDCP 504 MySQL server has gone away 解决方法

    打算用帝国做个垃圾站,用的是WDCP环境,一个512的VPS就做了一个站,而且还刚起步,生成目录时老是出现”504 Gateway Time-out”以及“My...

    用户1191760
  • WDCP 504 MySQL server has gone away 解决方法

    用户1272546
  • 坦克大战游戏的设计

          这个坦克大战实现了我方坦克(玩家控制)以及敌方坦克(程序随机控制)的对战,当击毁所有敌方坦克之后玩家获胜,当我方坦克生命值被消耗完毕后失败。游戏中,...

    Enjoy233
  • 创建 REST API 的最佳入门教程

    如果你看到这里,你以前可能听说过API 和REST,然后你就会想:“这些都是什么东西?”。也许你已经了解过一些这方面的知识,但却不知道从何入手。在这个教程中,我...

    用户5807183
  • 这个冬天,来点不一样的“叫床服务”

    镁客网
  • 周志华主导,南京大学率先推出AI人才本科培养体系

    5 月 6 日,南京大学人工智能学院院长周志华教授在微博上分享了的《南京大学人工智能本科专业教育培养体系》。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券