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 出来
class="home"> 显?的值{{flag }}
组件不需要在注册
你好-我是肖鹤云
使?的页?
class="home">
分析引? setup 后组件的变化
在 script setup 中,
引?的组件可以直接使??需再通过components进?注册,[是不是真的很?啊!]
并且?法指定当前组件的名字,它会?动以?件名为主,也就是不?再写name属性了。
当我们的页?上需要使?很多组件时,它的功能?下就体现出来了。
新增 defineProps
刚刚我?直在强调,不需要使?setup函数,机智的?伙伴会说:
那么?组件怎么接受?组件传递过来的值呢?
props,emit怎么获取呢?
别担?,新的api出现了,我们的主? defineProps
defineProps 的使?
?组件传递参数
class="home">"msg" time="42分钟">
?组件接受参数
你好-我是肖鹤云
信息:{{ info}}
{{ time }}
?组件怎么向?组件抛出事件?defineEmits的到来!
?组件使?
别担?,我们使?defineEmits。它可以像?组件抛出事件。你好-我是肖鹤云
?组件
class="home">"myAddHander" @myDel='myDelHander'>
如何获取?组件中的属性值
?组件
你好-我是肖鹤云
性别:{{ sex}}
其他信息:{{ info}}
父组件
class="home">"myAddHander" @myDel='myDelHander' ref="testcomRef">
新增指令 v-memo
v-memod会记住?个模板的?树,元素和组件上都可以使?。
该指令接收?个固定长度的数组作为依赖值进?[记忆?对]。
如果数组中的每个值都和上次渲染的时候相同,则整个?树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过,因为?树的记忆副本可以被重?。
因此渲染的速度会?常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组,以避免必要的更新被跳过。
style v-bind 该同学已经从实验室毕业了
经过尤??和团队的努?,