专栏首页云前端实用!最新的几个 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 条评论
登录 后参与评论

相关文章

  • 尤雨溪自述:打造Vue 3.0背后的故事

    在过去的一年中,Vue 团队一直都在开发 Vue.js 的下一个主要版本,我们希望能在今年上半年发布它(本文完成时这项工作尚在进行)。Vue 新版本的理念成型于...

    苏南
  • 「中文翻译」Vue3 的诞生之路

    因时间有限,文中翻译不对的地方还请指出,望海涵。想感受原汁原味还请移步上方链接。致敬尤大!

    童欧巴
  • 从源码解读 - Vue常考面试题

    SPA( single-page application )仅在 Web ⻚⾯初始化时加载相应的 HTML、JavaScript 和 CSS。⼀旦⻚⾯加载完成,...

    秋风的笔记
  • 尤雨溪:重头来过的 Vue 3 带来了什么?

    在过去的一年里,Vue团队一直在开发Vue.js的下一个主要版本Vue 3,我们希望能在2020年上半年将其发布(在撰写本文时,这项开发工作正在进行中)。

    前端达人
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    Java帮帮
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787
  • 预计2019年发布的Vue3.0到底有什么不一样的地方?

    还有几个月距离 vue2 的首次发布就满 3 年了,而 vue 的作者尤雨溪也在去年年末发布了关于 vue3.0 的计划,如果不出意外,我们将在今年的某个时间点...

    Fundebug
  • 2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库

    ​​html和css部分 1.如何理解CSS盒子模型 2.BFC 3.标签语义化? 4.css与javascript引入设置 5.如何理解CSS盒子模型 6.H...

    用户8644488
  • 2021秋招vue面试题+答案

    如果没有对 Vue 项目没有进行过优化总结的同学,可以参考本文作者的另一篇文章《 Vue 项目性能优化 — 实践指南 》,文章主要介绍从 3 个大方面,22 个...

    it优课
  • vue cli 3.0快速创建项目【内容仅供参考】

        命令行运行:     npm install -g npm     npm就自动为我们更新到最新版本

    双面人
  • 基于 TypeScript 的 Weex 优化实践

    Weex 作为一种成熟的跨平台程序框架被运用到许多产品中,有赞也不例外。有赞零售移动端团队从 2018 年就开始使用 Weex 构建页面,据不完全统计,有赞零售...

    有赞coder
  • Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]

    在上一篇文章中,我们了解了 Vue 3 将带来的性能改进。我们已经知道,用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重...

    疯狂的技术宅
  • 译文:使用Vue 3加快网络应用的速度

    译文:http://caibaojian.com/vue3-faster.html

    前端开发博客
  • Vue、React 和 Angular:该选择哪个框架?

    本文对三个最流行的 JavaScript 框架进行了全面的比较:Vue、React 和 Angular,如果你是正在开发或者目前正在考虑使用这些流行框架之一来...

    深度学习与Python
  • Vue 应用单元测试的策略与实践 01 - 前言和目标

    1. 在 TDD 做完 Tasking 列完实例化数据之后,完全没有 UT 基础不知道该怎么写单元测试?

    JimmyLv_吕靖
  • Vue3 对 Web 应用性能的改进[每日前端夜话0xE1]

    有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非...

    疯狂的技术宅
  • vue系列之面试总结

    答:Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue ...

    桃翁
  • Vue2.5 零基础开发去哪儿网实战(二) - 起步 Vue.js

    本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势。

    JavaEdge
  • Vue中的15个最佳做法

    在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测。

    刘亦枫

扫码关注云+社区

领取腾讯云代金券