拥抱简洁代码:vue3中的script setup最强解析

发布时间:2022-05-06 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了拥抱简洁代码:vue3中的script setup最强解析 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue3除了Composition API是一个亮点之外,尤大大又给我们带来了一个全新的玩意 —— script setup,对于setup大家相信都不陌生,而对于script setup有些同学则表示难以理解,那么从现在开始,这一篇文章将让你一看就懂。


ref与reactive

在setup中,我们拥有ref和reactive俩个api去创建一个响应式变量,这俩者存在的区别是ref是针对基本类型的响应,而reactive是针对引用类型的响应。

import { ref,reactive } from 'vue'

const data = ref('123')

const other = reactive({ is: '123' })

console.log(data.value)

console.log(other.is)

// 这里需要注意,reactive的对象可以直接访问,修改内部的子数据,而data需要使用.value访问修改,如下

data.value = '666'  // ok

data = '666' // no

other.is = '666' // ok

other = '666' // no

导入自定义组件

在之前的optionApi中我们使用的是components: { ... } 的方式导入自定义组件,而在现在,我们只需要直接import组件即可使用

<template>

<Button>OK!</Button>

</template>

<script setup>

import Button from 'element-ui-plus'

</script>

自定义方法

在之前的optionApi中我们使用的是在methods中写自定义方法,而这里我们直接定义一个方法或者变量,在template中直接使用即可

<template>

<button @click="touchMe">OK!</button>

<button @click="touchIt">OK!</button>

</template>

<script setup>

  import { ref,reactive } from 'vue'

  const text = ref('123')

  const touchMe = () => {

    text.value = '666'

  }

  function touchIt() {

    text.value = '666'

  }

</script>

一般情况下笔者建议开发者都使用ref,因为ref适用范围更广。

全新的计算函数和watch

现在我们使用更为简单的方式实现计算函数与watch,直接引入组合式api直接干就完了!

import { ref,computed,watch } from 'vue'

const data = ref('666')

const imComputed = computed(() => {

return data.value + 'some thing'

})

const unwatch = watch(data,() => {

console.log('data was be changed')

})

简单直白的获取到ref组件

之前我们采用this.$ref.refName的方式去获取ref组件,在这里setup采用了更加简单便捷的方式去获取ref

<template>

<el-table ref="elTable"></el-table>

</template>

<script setup>

import { ref } from 'vue'

  // refName = 变量名将自动捆绑进去

  const elTable = ref(null)

  console.log(elTable.value)

</script>

获取props

之前的optionApi,我们需要先在props中定义props,然后再从this.xxx去获取,这样很容易出现重名覆盖等情况,在这里vue3则采用了defineProps去定义props,直接返回了响应对象。

<script setup>

import { defineProps,toRefs,unref } from 'vue'


  const props = defineProps({

  a: {

    default: 0

    }

  })


  // 这里的a就等于从props中ref一个响应变量,需要.value操作符

  const { a } = toRefs(props)


  // 这里的a就等于从props中直接提取一个普通变量,随意更改无响应,直接访问无需.value

  const { a } = unref(props)


</script>

至此,相信开发者看完大致就了解了script setup啦,在vue3时期快点拥抱组合式api,拥抱script setup,让代码看起来更简洁点~

总结


以上是前端之家为你收集整理的拥抱简洁代码:vue3中的script setup最强解析 全部内容,希望文章能够帮你解决拥抱简洁代码:vue3中的script setup最强解析 所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。