vue3.2新特性setup汇总


vue3.2 到底更新了什么?

根据原?内容的更新的内容主要有以下 5 块:

1.SSR:服务端渲染优化。@vue/server-renderer包加了?个ES模块创建,

与Node.js解耦,使在?Node环境?@vue/serve-render做服务端渲染成为可能,

?如(Workers、Service Workers)

2.New SFC Features:新的单?件组件特性

3.Web Components:?定义 web 组件。这个我们平时很少?到,但是应该知道

4.Effect Scope API:effect 作?域,

?来直接控制响应式副作?的释放时间(computed 和 watchers)。

这是底层库的更新,开发不?关?,但是应该知道

5.Performance Improvements:性能提升。这是内部的提升,跟开发?关

setup 的简单介绍

3.0 暴露变量必须 return 出来,template中才能使?; 这样会导致在页?上变量会出现很多次很不友好,vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题。

.组件只需引?不?注册,属性和?法也不?返回,

也不?写setup函数,也不?写export default ,

甚?是?定义指令也可以在我们的template中?动获得。

变量、?法不需要 return 出来



 

组件不需要在注册



使?的页?

分析引? setup 后组件的变化

在 script setup 中,
引?的组件可以直接使??需再通过components进?注册,[是不是真的很?啊!]
并且?法指定当前组件的名字,它会?动以?件名为主,也就是不?再写name属性了。
当我们的页?上需要使?很多组件时,它的功能?下就体现出来了。

新增 defineProps

刚刚我?直在强调,不需要使?setup函数,机智的?伙伴会说:
那么?组件怎么接受?组件传递过来的值呢?
props,emit怎么获取呢?
别担?,新的api出现了,我们的主? defineProps

defineProps 的使?

?组件传递参数


?组件接受参数


 

?组件怎么向?组件抛出事件?defineEmits的到来!

?组件使?

别担?,我们使?defineEmits。它可以像?组件抛出事件。

?组件


 

 

如何获取?组件中的属性值

?组件


父组件


 

新增指令 v-memo

v-memod会记住?个模板的?树,元素和组件上都可以使?。
该指令接收?个固定长度的数组作为依赖值进?[记忆?对]。
如果数组中的每个值都和上次渲染的时候相同,则整个?树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过,因为?树的记忆副本可以被重?。
因此渲染的速度会?常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组,以避免必要的更新被跳过。
  • for="item in listArr" :key="item.id" v-memo="['valueA','valueB']"> {{ item.name }}
  • v-memod的指令使?较少,它的作?是:缓存模板中的?部分数据。 只创建?次,以后就不会再更新了。也就是说?内存换取时间。

     

    style v-bind 该同学已经从实验室毕业了

    经过尤??和团队的努?,