Vue3.0最新动态：script-setup定稿，部分实验性API将弃用

 
 
 
 

  
  
  
  
// 导入 useContext 组件  
  
  
  
  
import { useContext } from "vue";  
  
  
  
  
// 获取 context  
  
  
  
  
const ctx = useContext(); 
 
 
 
 

 
 
 
 

  
  
  
  
// 导入 useAttrs 组件  
  
  
  
  
import { useAttrs } from "vue"; 
  
  
  
  
// 获取 attrs  
  
  
  
  
const attrs = useAttrs();  
  
  
  
  
// attrs是个对象，和 props 一样，需要通过 key 来得到对应的单个 attr  
  
  
  
  
console.log(attrs.msg); 
 
 
 
 

 
 
 
 

  
  
  
  
  
  
  
  
  
      
  
  
  
  
    
  
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  import ChildTSX from "@cp/context/Child.tsx";  
  
  
  
  
 
 
 
 
 

 
 
 
 

  
  
  
  
import { defineComponent, useSlots } from "vue";  
  
  
  
  
const ChildTSX = defineComponent({  
  
  
  
  
  setup() {  
  
  
  
  
    // 获取插槽数据  
  
  
  
  
    const slots = useSlots();  
  
  
  
  
    // 渲染组件  
  
  
  
  
    return () => (  
  
  
  
  
      
  
  
  
  
  
        // 渲染默认插槽  
  
  
  
  
        
{slots.default ? slots.default() : ""}
  
  
  
  
  
        // 渲染命名插槽  
  
  
  
  
        
{slots.msg ? slots.msg() : ""}
  
  
  
  
  
      

新增 defineExpose API

在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 expose 来完成。expose 也是 context 的一个组件成员，原来的用法，是从 useContext 里导出： 

 
 
 
 

  
  
  
  
// 导入 useContext 组件  
  
  
  
  
import { useContext } from "vue";  
  
  
  
  
// 启用expose组件  
  
  
  
  
const { expose } = useContext();  
  
  
  
  
// 定义一个想提供给父组件拿到的数据  
  
  
  
  
const msg: string = "Hello World!";  
  
  
  
  
// 显示暴露的数据，才可以在父组件拿到  
  
  
  
  
expose({  
  
  
  
  
  msg,  
  
  
  
  
}); 
 
 
 
 

由于 useContext 会在未来版本里移除，所以新增了 defineExpose API 来实现 expose 的功能。新的 API 用法： 

 
 
 
 

  
  
  
  
// 导入 defineExpose 组件  
  
  
  
  
import { defineExpose } from "vue";  
  
  
  
  
// 定义数据  
  
  
  
  
const msg: string = "Hello World!";  
  
  
  
  
// 暴露给父组件  
  
  
  
  
defineExpose({  
  
  
  
  
  msg,  
  
  
  
  
}); 
 
 
 
 

父组件就可以通过 ref API 去拿到子组件暴露出来的 msg 数据了。

改名 defineEmits API

使用 defineEmits 取待原来的 defineEmit API ，也就是改名了。好吧，我之前的文章还特地强调了 defineProps 是复数结尾，带有 s，而 defineEmit 没有，如今，都统一了，都是复数形式。从尤大的更新说明里看，大约只是一个 typo 更新，对比原来的 defineEmit ，目的是使用新的 defineEmits 与标准组件的 emits 命名上更为接近，和 defineProps 也更统一。╮(╯▽╰)╭ 所以用法方面和原来是没什么区别的： 

 
 
 
 

  
  
  
  
// 导入 defineEmits 组件  
  
  
  
  
import { defineEmits } from "vue";  
  
  
  
  
// 获取 emit  
  
  
  
  
const emit = defineEmits(["say-hi", "chang-name"]);  
  
  
  
  
// 调用 emit 打招呼  
  
  
  
  
emit("say-hi", "Hello!");  
  
  
  
  
// 调用 emit 改名  
  
  
  
  
emit("chang-name", "Tom"); 
 
 
 
 

新增 withDefaults API

说完 emits，经常与之同时出现的 props 也有一些变化，本次是带来了一个全新的 withDefaults API，用于辅助 defineProps 来指定 prop 的默认值。在以前的文章我有提及到，当你用 TypeScript 编程时，defineProps 有两种类型指定方式：

    1.  通过构造函数进行检查（传统方法）

第一种方式是使用 JavaScript 原生构造函数进行类型规定，使用这种方法时，如果你要限制 props 的类型和默认值，需要通过一个 “对象” 入参来传递给 defineProps，比如： 

 
 
 
 

  
  
  
  
// 导入 defineProps 组件  
  
  
  
  
import { defineProps } from "vue"; 
  
  
  
  
 // 定义 props  
  
  
  
  
defineProps({  
  
  
  
  
  name: {  
  
  
  
  
    type: String,  
  
  
  
  
    required: false,  
  
  
  
  
    default: "Petter",  
  
  
  
  
  },  
  
  
  
  
  userInfo: Object,  
  
  
  
  
  tags: Array,  
  
  
  
  
}); 
 
 
 
 

    1.  使用类型注解进行检查（TS 专属）

第二种方式是按照 TS 的书写习惯来定义数据类型，这种情况下需要遵循 TypeScript 的类型规范，比如字符串是 string，而不是 String。 

 
 
 
 

  
  
  
  
// 导入 defineProps 组件  
  
  
  
  
import { defineProps } from "vue";  
  
  
  
  
// 对象类型接口  
  
  
  
  
interface UserInfo {  
  
  
  
  
  id: number;  
  
  
  
  
  age: number;  
  
  
  
  
}  
  
  
  
  
// 定义 props  
  
  
  
  
defineProps<{  
  
  
  
  
  name: string;  
  
  
  
  
  phoneNumber: number;  
  
  
  
  
  userInfo: UserInfo;  
  
  
  
  
  tags: string[];  
  
  
  
  
}>();import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults(  
  
  
  
  
  defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
);  
  
  
  
  
import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults( 
  
  
  
  
   defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
); 
 
 
 
 

在此之前，使用第二种方法，是无法指定默认值的（在当时的 RFC 的文档里也有说明无法指定）。如今，这个新的 withDefaults API 可以让你在使用 TS 类型系统时，也可以指定 props 的默认值。它接收两个入参：

可能缺乏一些官方描述，还是看参考用法可能更直观： 

 
 
 
 

  
  
  
  
import { defineProps, withDefaults } from "vue";  
  
  
  
  
withDefaults(  
  
  
  
  
  defineProps<{  
  
  
  
  
    size?: number;  
  
  
  
  
    labels?: string[];  
  
  
  
  
  }>(),  
  
  
  
  
  {  
  
  
  
  
    size: 3,  
  
  
  
  
    labels: () => ["default label"],  
  
  
  
  
  }  
  
  
  
  
); 
 
 
 
 

顶级 await 的支持

不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup 。 

 
 
 
 

  
  
  
  
  
  
  
  
  
  const post = await fetch(`/api/post/1`).then((r) => r.json());  
  
  
  
  
 
 
 
 
 

它转换成标准组件的写法就是： 

 
 
 
 

  
  
  
  
  
  
  
  
  
  import { defineComponent, withAsyncContext } from "vue"; 
  
  
  
  
   export default defineComponent({  
  
  
  
  
    async setup() {  
  
  
  
  
      const post = await withAsyncContext(  
  
  
  
  
        fetch(`/api/post/1`).then((r) => r.json())  
  
  
  
  
      );  
  
  
  
  
      return {  
  
  
  
  
        post,  
  
  
  
  
      };  
  
  
  
  
    },  
  
  
  
  
  });  
  
  
  
  
 
 
 
 
 

参考资料

以上所有的资料都来自于尤大在 PR 227 的评论通告……传送门：script setup by yyx990803 · Pull Request #227 · vuejs/rfcsgithub.com[3]好隐蔽的说，而且原来的 RFC 仓库的文档也删除了，换了新的文档也是找了好久才翻到新的，本文先根据尤大的通告做一波简单的说明，文章首发在博客，只同步在知乎。Vue3.0 最新动态：script-setup 定稿 部分实验性 API 将弃用 - 程沛权 - 养了三只猫 chengpeiquan.com[4]后续将会详细更新到 Vue3.0 学习教程与实战案例[5] 里。 

当前名称：Vue3.0最新动态：script-setup定稿，部分实验性API将弃用
网页URL：http://www.mswzjz.cn/qtweb/news22/458222.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能