vue3.2 到底更新了什么?根据原文内容的更新的内容主要有以下 5 块: - SSR:服务端渲染优化。@vue/server-renderer包加了一个ES模块创建,与Node.js解耦,使在非Node环境用@vue/serve-render做服务端渲染成为可能,比如(Workers、Service Workers)。
- New SFC Features:新的单文件组件特性。
- Web Components:自定义 web 组件。这个我们平时很少用到,但是应该知道。
- Effect Scope API:effect 作用域,用来直接控制响应式副作用的释放时间(computed 和 watchers)。这是底层库的更新,开发不用关心,但是应该知道。
- Performance Improvements:性能提升。这是内部的提升,跟开发无关。
setup 的简单介绍起初 Vue3.0 暴露变量必须 return 出来,template中才能使用; 这样会导致在页面上变量会出现很多次。 很不友好,vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题。 组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default , 甚至是自定义指令也可以在我们的template中自动获得。 变量、方法不需要 return 出来 显示的值{{flag }}
组件不需要再注册 你好-我是Vue
分析引入 setup 后组件的变化在 script setup 中, 引入的组件可以直接使用无需再通过components进行注册,[是不是真的很香啊!] 并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。 当我们的页面上需要使用很多组件时,它的功能一下就体现出来了。 新增 defineProps刚刚我一直在强调,不需要使用setup函数,机智的小伙伴会说: 那么子组件怎么接受父组件传递过来的值呢? props,emit怎么获取呢? 别担心,新的api出现了,我们的主角 defineProps defineProps 的使用父组件传递参数
子组件接受参数 你好-我是Vue 信息:{{ info}} {{ time }}
子组件怎么向父组件抛出事件?defineEmits的到来!子组件使用 你好-我是Vue
父组件
如何获取子组件中的属性值子组件 你好-我是Vue 性别:{{ sex}} 其他信息:{{ info}}
父组件
新增指令 v-memov-memod会记住一个模板的子树,元素和组件上都可以使用。 该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。 如果数组中的每个值都和上次渲染的时候相同,则整个子树的更新会被跳过。 即使是虚拟 DOM 的 VNode 创建也将被跳过,因为子树的记忆副本可以被重用。 因此渲染的速度会非常的快。 需要注意得是:正确地声明记忆数组是很重要。 开发者有责任指定正确的依赖数组,以避免必要的更新被跳过。 {{ item.name }}
v-memod的指令使用较少,它的作用是:缓存模板中的一部分数据。 只创建一次,以后就不会再更新了。也就是说用内存换取时间。 style v-bind 该同学已经从实验室毕业了经过尤大大和团队的努力, 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |