聊一聊Vue3.2中setup语法糖+volar
前言
现在,Vue3已经成为默认版本了。Vue3与Vue2相比较,变化还是比较大的。由原来的的组合式API变为选项式API。所以代码风格变化也是比较大的。为什么会有选项式API?我个人觉得very good!。
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台。而Vue3.2之后官方就退出setup语法糖,使我们在写代码的时候更爽!!!
安装volar
如果你的VScode之前安装有vuter
插件,请先把他禁用或者卸载掉,然后安装volar
。因为,vuter
插件是针对Vue2的,而Vue3的写法跟Vue3是有区别的,特别是使用setup语法糖之后,所以写代码的时候可能会有报错(编译不会)什么的。volar
插件则是针对Vue3的。安装之后就不报错,而且有提示出来。而且点击右上角的小图标,还可以将html代码、js代码和css代码做分开展示,特别好!!!
Vue3中变量和方法
之前的用法
通过这个例子,我们可以知道,Vue3中HTML模板不再需要一个根标签了,数据也不用在data
中定义,方法也不需要在methods
中定义。而且,模板中需要的数据、方法必须在setup
中返回(return)。
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button></template><script>import { ref } from 'vue'export default { setup() { let count = ref(0) const increment = () => { count.value ++ } return { count, increment } }}</script>
现在的用法(setup语法糖)
在中,需要在script标签加上setup属性,就不再需要写setup函数,而且模板中用到的变量和方法不需要返回(return)。代码一对比,是不是觉得有点东西了呢?
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button></template><script setup>import { ref } from 'vue'let count = ref(0)const increment = () => {count.value ++}</script>
Vue3中使用组件
之前的用法
// App.vue<template> <demo /></template><script>import Demo from './components/Demo.vue'export default { components: { Demo }}</script>
现在的用法(setup语法糖)
在中,只需要在引入组件即可在模板中使用,不再需要自己去注册组件。
// App.vue<template> <demo /></template><script setup>import Demo from './components/Demo.vue'</script>
Vue3中接收Props --> defineProps()
之前的用法
传递数据给组件,传递的方式不变,接收时,需要在props中定义接收。setup函数被调用接收到的以第一个参数就是props。
// App.vue<template> <demo msg="hi Demo, I'm your father!"/></template><script setup>import Demo from './components/Demo.vue'</script>
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button> <h3>{{msg}}</h3></template><script>import { ref } from 'vue'export default {props: {msg: {type: String}},setup(props) {let count = ref(0)const increment = () => {count.value ++}console.log(props.msg)return {count,increment}}}</script>
现在的用法(setup语法糖)
在中,我们没有机会写setup函数,就接收不到他调用时传递的参数。所以有一个新的APIdefineProps
它是一个函数。defineProps
会返回一个对象,其中包含了可以传递给组件的所有 props。
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button> <h3>{{msg}}</h3></template><script setup>import { ref, defineProps } from 'vue'const props = defineProps(['msg'])console.log(props.msg)let count = ref(0)const increment = () => {count.value ++}</script>
Vue3中射出自定义事件 --> defineEmits()
之前的用法
子组件射出自定义事件给父组件,则需要通过emits
定义好要传递的事件,setup函数中的第二个参数就是上下文对象(这里我们不详细介绍了),然后通过这个对象去调用emit
方法就可以射出自定义事件了。
// components/Demo.vue<template><h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button><h3>{{msg}}</h3></template><script>import { ref } from 'vue'export default {props: {msg: {type: String}},emits: ['hanlde-count'],setup(props, centext) {let count = ref(0)const increment = () => {count.value ++centext.emit('hanlde-count', count.value)}console.log(props.msg)return {count,increment}}}</script>
// App.vue<template> <demo msg="hi Demo, I'm your father!" @hanlde-count="hanldeCount" /></template><script>import Demo from './components/Demo.vue'export default { components: { Demo }, setup() { const hanldeCount = count => { console.log(count) } return{ hanldeCount } }}</script>
现在的用法(setup语法糖)
在中,子组件想要射出自定义事件时,则需要通过defineEmits
来定义自定义事件。
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button> <h3>{{msg}}</h3></template><script setup>import { ref, defineProps, defineEmits } from 'vue'const props = defineProps(['msg'])const emit = defineEmits(['hanlde-count'])console.log(props.msg)let count = ref(0)const increment = () => {count.value ++emit('hanlde-count', count.value)}</script>
Vue3中父组件获取组件的数据或方法 --> defineExpose()
之前的用法
在子组件中,暴露组件变量或者方法时,不用做其他操作,只需要确保setup
函数中return
该变量或方法。因为在script
标签中所有代码都使用expost default
暴露了。而在父组件中需要通过给子组件添加ref
属性,然后在onMounted
生命周期函数中获取子组件的dom
即可获得子组件的变量和方法。
注意:获取dom是,一定在onMounted
声明周期获取,因为页面没有渲染,就获取不要dom
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button> <h3>{{msg}}</h3></template><script>import { ref } from 'vue'export default {props: ['msg'],emits: ['hanlde-count'],setup(props, context) {let count = ref(0)const name = ref('vernin')const increment = () => {count.value ++context.emit('hanlde-count', count.value)}return {count,increment,name}}}</script>
// App.vue<template> <demo ref="demo" msg="hi Demo, I'm your father!" @hanlde-count="hanldeCount" /></template><script> import Demo from './components/Demo.vue' import { ref, onMounted } from 'vue' export default { components: { Demo }, setup() { const demo = ref(null) // 记得把 demo return 出去 // 错误写法:setup 函数无法获取dom -- setup相对于vue2的created钩子 // console.log(demo.value.name) // 报错 // console.log(demo.value.count) // 报错 // 正确写法: onMounted(() => { console.log('子组件Demo的count:', demo.value.count) console.log('子组件Demo的name:', demo.value.name) }) const hanldeCount = count => { console.log(count) } return { demo, hanldeCount } } }</script>
现在的用法(setup语法糖)
在中,没有写export default
暴露,为了在组件中明确要暴露出去的变量或方法,需要使用defineExpose
来变量,在父组件中,也是通过给子组件ref
属性获取。
// components/Demo.vue<template> <h2>Vue3.2中setup语法糖的使用</h2> <button @click="increment">舔我 {{ count }} 次了</button> <h3>{{msg}}</h3></template><script setup>import { ref, defineProps, defineEmits, defineExpose } from 'vue'const props = defineProps(['msg'])const emit = defineEmits(['hanlde-count'])let count = ref(0)const increment = () => {count.value ++emit('hanlde-count', count.value)}const name = ref('vernin')defineExpose({name,count})</script>
// App.vue<template> <demo ref="demo" msg="hi Demo, I'm your father!" @hanlde-count="hanldeCount" /></template><script setup> import Demo from './components/Demo.vue' import { ref, onMounted } from 'vue' const demo = ref(null) onMounted(() => { console.log('子组件Demo的count:', demo.value.count) console.log('子组件Demo的name:',demo.value.name) }) const hanldeCount = count => { console.log(count) }</script>
总结
使用setup语法糖和setup函数对比,我们不难看出,使用语法糖是,代码整洁了好多,不会有那么多的对象嵌套。也不用做什么额外的return,代码也简化了不少。
我前面说道要使用Vue3,那必须得会setup
,实则不然,在Vue3中也是兼容Vue2的写法的,不一定非得使用setup
。但是,通过使用setup之后,特别是用setup语法糖,不得不说,真是爽得不要不要的~~~
最后看看官方给出组合式API的优点以及官方给出选项式API和组合式API的对比图
- 更灵活的代码组织
- 更灵活的代码组织
- 更好的类型推导
- 生产包体积更小