Vue3编程流畅技巧使用setup语法糖拒绝写return

这篇文章主要为大家介绍了Vue3编程流畅技巧使用setup语法糖拒绝写return的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Vue3.2 setup语法糖

Vue3.2 setup语法糖 [ 单文件组件的语法糖<script setup> ]

如果你对Vue3语法糖有一定了解，配和我另外一篇一起食用更好哦！Vue3必学技巧-自定义Hooks-让写Vue3更畅快

阅读本来，默认你已经对Vue3.0的composition API有一定了解，但困扰于setup函数内需要繁琐return相关的变量和函数，那setup的语法糖<script setup> 你将收获满满。语法糖<script setup> 的引入让你写Vue3更爽，让Vue3更丰满。本文是在官方文档基础上写的，如果有时间，建议上官方文档上看，本文写得更为语义化和通俗，希望你能喜欢。

解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template/>使用的问题

1.<script setup>在<template/>使用

//import引入的内容

import { getToday } from './utils'

// 变量

const msg = 'Hello!'

// 函数

function log() {

console.log(msg)

}

</script>

//在template中直接使用声明的变量、函数以及import引入的内容

<p>{{getToday()}}</p>

</template>

标准组件<script> 需要写setup函数并繁琐retrun

//import引入的内容

import { getToday } from './utils'

export default{

setup(){

// 变量

const msg = 'Hello!'

// 函数

function log() {

console.log(msg)

}

//想在tempate里面使用需要在setup内return暴露出来

return{

msg,

log,

getToday

}

</script>

<p>{{getToday()}}</p>

</template>

小结：<script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露声明的变量、函数以及import引入的内容，即可在<template/>使用，并且不需要写export default{}

console.log('script');//多次实例组件,只触发一次

export default {

setup() {

console.log('setupFn');//每次实例化组件都触发和script-setup标签一样

}

</script>

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

2、<script setup>引入组件将自动注册

不需要在引入组件后，通过 components:{}注册组件，可直接使用

import MyComponent from './MyComponent.vue'

//components:{MyComponent} 不需要注册直接使用

</script>

</template>

3、组件通信:

在<script setup>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits

defineProps 和 defineEmits具备完整的类型推断并且在 <script setup> 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)

defineProps 代替props

接收父组件传递的数据（父组件向子组件传参）

父组件:

</template>

import {ref} from 'vue'

import Child from './child.vue'

const msg = ref('父的值') //自动返回，在template直接解套使用

</script>

子组件：

<template/> 中可以直接使用父组件传递的props （可省略props.）

<div>父组件传递的值：{{title}}</div>

</template>

//import {defineProps} from 'vue' 不需要引入

//语法糖必须使用defineProps替代props

const props = defineProps({

title: {

type: String

}

});

//script-setup 需要通过props.xx获取父组件传递过来的props

console.log(props.title) //父的值

</script>

defineEmit 代替emit

子组件向父组件传递数据（子组件向外暴露数据）

子组件代码:

<button @click="toEmits">子组件向外暴露数据</button>

</template>

import {ref} from 'vue'

const name = ref('我是子组件')

//1、暴露内部数据

const emits = defineEmits(['childFn']);

const toEmits = () => {

//2、触发父组件中暴露的childFn方法并携带数据

emits('childFn',name)

}

</script>

父组件代码:

<p>接收子组件传递的数据{{childData}} </p>

</template>

import {ref} from 'vue'

import Child from './child.vue'

const childData = ref(null)

const childFn=(e)=>{

consloe.log('子组件触发了父组件childFn，并传递了参数e')

childData=e.value

}

</script>

4.<script setup>需主动向父组件暴露子组件属性：defineExpose

使用 <script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码：

import { ref } from 'vue'

const a = 1

const b = ref(2)

//主动暴露组件属性

defineExpose({

})

</script>

父组件代码:

<button @click='getChildData'>通过ref获取子组件的属性 </button>

</template>

import {ref} from 'vue'

import Child from './child.vue'

const childRef= ref() //注册响应数据

const getChildData =()=>{

//子组件接收暴露出来得值

console.log(childRef.value.a) //1

console.log(childRef.value.b) //2 响应式数据

}

</script>

5.语法糖其他功能

useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在<template/>通过<slot/>标签就可以渲染插槽）

如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代

需要引入：import { useSlots ,useAttrs } form 'vue'

在<template/>中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）

父组件:

</template>

<footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>

</template>

</Child>

</template>

// 引入子组件

import Child from './child.vue'

</script>

子组件：

<p>{{ attrs.msg == $attrs.msg }}</p>

<p>{{ slots == $slots }}</p>

</template>

import { useSlots, useAttrs, reactive, toRef } from 'vue'

const state = reactive({

name: '张三',

age: '18'

})

const slots = useSlots()

console.log(slots.default()); //获取到默认插槽的虚拟dom对象

console.log(slots.title()); //获取到具名title插槽的虚拟dom对象

// console.log(slots.footer()); //报错不知道为啥有插槽作用域的无法获取

//useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。

const attrs = useAttrs()

</script>

useSlots或许在JSX/TSX下更实用

想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx

useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容

import { defineComponent, useSlots } from "vue";

export default defineComponent({

setup() {

// 获取插槽数据

const slots = useSlots();

// 渲染组件

return () => (

<div>

{slots.default?slots.default():''}

{slots.title?slots.title():''}

</div>

);

});

</script>

大部分人是SFC模式开发，在<template/>通过<slot/>标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的

6.在setup访问路由

访问路由实例组件信息：route和router

setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）

推荐：使用useRoute 函数和useRouter函数替代this.$route 和 this.$router

import { useRouter, useRoute } from 'vue-router'

const route = useRoute()

const router = useRouter()

function pushWithQuery(query) {

router.push({

name: 'search',

query: {

...route.query,

})

}

导航守卫

仍然可以使用路由实例组件的导航守卫

import router from './router'

router.beforeEach((to,from,next)=>{

})

也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 与 beforeRouteLeave 相同，无法访问 `this`

onBeforeRouteLeave((to, from) => {

const answer = window.confirm(

'Do you really want to leave? you have unsaved changes!'

)

// 取消导航并停留在同一页面上

if (!answer) return false

})

const userData = ref()

// 与 beforeRouteUpdate 相同，无法访问 `this`

onBeforeRouteUpdate(async (to, from) => {

//仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改

if (to.params.id !== from.params.id) {

userData.value = await fetchUser(to.params.id)

}

})

组合式 API 守卫也可以用在任何由 `<router-view>` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

小结：setup的语法糖作为Vue3的补充，让Vue3更加丰满，让我们写Vue3更爽。如果觉得写得还不错不吝啬给点给赞再走吧！

如果你看完后觉得意犹未尽，似乎没get到Vue3究竟好在哪？请了解下Vue3的自定义Hooks！

Vue3配合自定义Hooks或许才是Vue3的完全体！因为有部分人看完这篇后，还觉得Vue3函数和变量写在一起不优雅！不妨看下这篇！

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。