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的简单介绍

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

1.组件只需引入不用注册，属性和方法也不用返回，
也不用写setup函数，也不用写export default ，
甚至是自定义指令也可以在我们的template中自动获得。

变量、方法不需要 return 出来

组件不需要在注册

使用的页面

分析引入setup 后组件的变化

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

新增defineProps

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

defineProps的使用

父组件传递参数

子组件接受参数

子组件怎么向父组件抛出事件？defineEmits的到来

子组件使用

别担心，我们使用defineEmits。它可以像父组件抛出事件。

父组件

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

子组件

父组件

新增指令 v-memo

v-memo会记住一个模板的子树,元素和组件上都可以使用。
该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。
如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
因此渲染的速度会非常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。

    {{ item.name   }}

v-memo的指令使用较少，它的作用是:缓存模板中的一部分数据。
只创建一次，以后就不会再更新了。也就是说用内存换取时间。

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

经过尤大大和团队的努力，

文章转载于

链接: 点我跳转

复制跳转：https://juejin.cn/post/7058171455309086751