Vue3拒绝写return,用setup语法糖,让写Vue3更畅快

Vue3拒绝写return,用setup语法糖,让写Vue3更畅快Vue3.2 setup语法糖 [ 单文件组件的语法糖script setup ],让写Vue3更畅快。

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

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

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

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template/>使用的问题

1.<script setup>中无需return 声明的变量、函数以及import引入的内容,即可在<template/>使用

  • <script setup>语法糖

    <script setup> //import引入的内容 import { getToday } from './utils'   // 变量 const msg = 'Hello!' // 函数 function log() {  console.log(msg) } </script>
    ​
    //在template中直接使用声明的变量、函数以及import引入的内容
    <template>
      <div @click="log">{{ msg }}</div>
       <p>{{getToday()}}</p>
    </template>
    
  • 标准组件<script> 需要写setup函数并繁琐retrun

    <script> //import引入的内容 import { getToday } from './utils'   export default{ setup(){    // 变量    const msg = 'Hello!'    // 函数    function log() {      console.log(msg)   }    //想在tempate里面使用需要在setup内return暴露出来    return{       msg,       log,       getToday   } } } </script>
    
    <template>
      <div @click="log">{{ msg }}</div>
       <p>{{getToday()}}</p>
    </template>
    

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

    <script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同,<script setup> 中的代码会在每次组件实例被创建的时候执行

      <script> 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:{}注册组件,可直接使用

<script setup> import MyComponent from './MyComponent.vue' //components:{MyComponent} 不需要注册直接使用 </script><template>
  <MyComponent />
</template>

3、组件通信:在<script setup>中必须使用 defineProps defineEmits API 来替代 props 和 emits

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

defineProps 代替props,接收父组件传递的数据(父组件向子组件传参)

父组件:

<template>
  <div>父组件</div>
  <Child :title="msg" />
</template><script setup> import {ref} from 'vue' import Child from './child.vue' const msg = ref('父的值')  //自动返回,在template直接解套使用 </script>

子组件:

  • <template/> 中可以直接使用父组件传递的props (可省略props.)
  • <script-setup> 需要通过props.xx获取父组件传递过来的props
<template>
  <div>子组件</div>
  <div>父组件传递的值:{{title}}</div>
</template><script setup> //import {defineProps} from 'vue'   不需要引入//语法糖必须使用defineProps替代props const  props = defineProps({  title: {    type: String } }); //script-setup 需要通过props.xx获取父组件传递过来的props console.log(props.title) //父的值 </script>

defineEmit 代替emit,子组件向父组件传递数据(子组件向外暴露数据)

子组件代码:

<template>
  <div>子组件</div>
  <button @click="toEmits">子组件向外暴露数据</button>
</template><script setup> import {ref} from 'vue' const name = ref('我是子组件') //1、暴露内部数据 const  emits = defineEmits(['childFn']); ​ const  toEmits = () => {  //2、触发父组件中暴露的childFn方法并携带数据  emits('childFn',name) } </script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  @childFn='childFn' />
  <p>接收子组件传递的数据{{childData}} </p>
</template><script setup> 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 主动暴露

子组件代码:

<script setup> import { ref } from 'vue'const a = 1 const b = ref(2) //主动暴露组件属性 defineExpose({  a,  b }) </script>

父组件代码:

<template>
  <div>父组件</div>
  <Child  ref='childRef' />
  <button @click='getChildData'>通过ref获取子组件的属性 </button>
</template><script setup> 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.语法糖其他功能

  • useSlotsuseAttrs少用,由于大部分人是SFC模式开发,在<template/>通过<slot/>标签就可以渲染插槽)

    如果需要在script-setup中使用 slotsattrs 需要用useSlotsuseAttrs替代

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

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

    父组件:

    <template>
      <Child msg="非porps传值子组件用attrs接收" >
        <!-- 匿名插槽 -->
        <span >默认插槽</span>
        <!-- 具名插槽 -->
        <template #title>
          <h1>具名插槽</h1>
        </template>
        <!-- 作用域插槽 -->
        <template #footer="{ scope }">
          <footer>作用域插槽——姓名:{{ scope.name }},年龄{{ scope.age }}</footer>
        </template>
      </Child>
    </template><script setup> // 引入子组件 import Child from './child.vue' </script>
    

    子组件:

    <template>
      <!-- 匿名插槽 -->
      <slot />
      <!-- 具名插槽 -->
      <slot name="title" />
      <!-- 作用域插槽 -->
      <slot name="footer" :scope="state" />
      <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 -->
      <p>{{ attrs.msg == $attrs.msg }}</p>
      <!--true 没想到有啥作用... -->
      <p>{{ slots == $slots }}</p>
    </template>
    ​
      
    <script setup> 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对象,可以用来渲染插槽内容

    
    <script lang='jsx'> 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.$routerthis.$route。(getCurrentInstance可以替代this但不推荐)

推荐:使用useRoute 函数和useRouter函数替代this.$routethis.$router

<script setup> import { useRouter, useRoute } from 'vue-router'    const route = useRoute()    const router = useRouter()        function pushWithQuery(query) {      router.push({        name: 'search',        query: {          ...route.query,       },     })   }  <script/> 
  • 导航守卫

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

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

})

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

<script setup> 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) } }) <script/> 
组合式 API 守卫也可以用在任何由 `<router-view>` 渲染的组件中,它们不必像组件内守卫那样直接用在路由组件上。

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

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

Vue3配合自定义Hooks或许才是Vue3的完全体!因为有部分人看完这篇后,还觉得Vue3函数和变量写在一起不优雅!不妨看下这篇! ✈️✈️✈️✈️✈️✈️Vue3必学技巧-自定义Hooks-让写Vue3更畅快 – 掘金 (juejin.cn)✈️✈️✈️✈️✈️

今天的文章Vue3拒绝写return,用setup语法糖,让写Vue3更畅快分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/13586.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注