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 出来
<template><divclass="home"> 显示的值<button@click="changeHander">改变值</button></div></template><!-- 只需要在script上添加setup --><scriptlang="ts"setup>import { ref } from'vue'; <!--flag变量不需要在return出去-->letflag=ref("第一次循环") <!--函数也可以直接引用,不用在return中返回-->letchangeHander=():void=>{ flag.value='第二次循环' } </script>
组件不需要在注册
<!-- 这个是组件 --><template><div><h2> 你好-我是XX</h2></div></template>使用的页面 <template><divclass="home"><test-com></test-com></div></template><scriptlang="ts"setup>// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!//在使用的使用直接是小写和横杠的方式连接 test-comimportTestComfrom"../components/TestCom.vue"</script>
分析引入 setup 后组件的变化
在 script setup 中， 引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!] 并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。 当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。 如果想要定义name可以定义两个Script，也可以用vite-plugin-vue-setup-extend插件
新增 defineProps
刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说: 那么子组件怎么接受父组件传递过来的值呢? props，emit怎么获取呢? 别担心,新的api出现了,我们的主角 defineProps
defineProps 的使用
// 父组件传参 <template><divclass="home"><test-com:info="msg"time="42分钟"></test-com></div></template><scriptlang="ts"setup>// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!importTestComfrom"../components/TestCom.vue"letmsg='第一次循环'</script>// 子组件传参 <template><div><h2> 你好-我是XX</h2><p>信息:</p><p></p></div></template><scriptlang="ts"setup>import {defineProps} from'vue'defineProps({ info:{ type:String, default:'----' }, time:{ type:String, default:'0分钟' }, }) </script>
子组件怎么向父组件抛出事件？defineEmits的到来！
// 子组件 别担心，我们使用defineEmits。它可以像父组件抛出事件。 <template><div><h2> 你好-我是XX</h2><button@click="hander1Click">新增</button><button@click="hander2Click">删除</button></div></template><scriptlang="ts"setup>import {defineEmits} from'vue'// 使用defineEmits创建名称，接受一个数组let$myemit=defineEmits(['myAdd','myDel']) lethander1Click=():void=>{ $myemit('myAdd','新增的数据') } lethander2Click=():void=>{ $myemit('myDel','删除的数据') } </script>// 父组件 <template><divclass="home"><test-com@myAdd="myAddHander"@myDel='myDelHander'></test-com></div></template><scriptlang="ts"setup>// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!//在使用的使用直接是小写和横杠的方式连接 test-comimportTestComfrom"../components/TestCom.vue"letmyAddHander=(mess):void=>{ console.log('新增==>',mess); } letmyDelHander=(mess):void=>{ console.log('删除==>', mess); } </script>
如何获取子组件中的属性值
// 子组件 <template><div><h2>你好-我是XX</h2><p>性别:</p><p>其他信息:</p></div></template><scriptlang="ts"setup>import { reactive, ref,defineExpose } from"vue"; letsex=ref('男') letinfo=reactive({ like:'喜欢XX', age:27}) // 将组件中的属性暴露出去，这样父组件可以获取defineExpose({ sex, info}) </script>// 父组件 <template><divclass="home"><test-com@myAdd="myAddHander"@myDel='myDelHander'ref="testcomRef"></test-com><button@click="getSonHander">获取子组件中的数据</button></div></template><scriptlang="ts"setup>importTestComfrom"../components/TestCom.vue"import {ref} from'vue'consttestcomRef=ref() constgetSonHander=()=>{ console.log('获取子组件中的性别', testcomRef.value.sex ); console.log('获取子组件中的其他信息', testcomRef.value.info ); } </script>
