vue3新语法糖——setup script

前言

vue3上线已经很久了，许多小伙伴应该都已经使用过vue3了。那么在使用vue3composition API的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法，然后发现模板需要使用该方法，然后就必须将方法返回。当一个组件中存在大量方法和属性的时候，这个过程就会非常的难受。

什么是setup script

setup script就是vue3新出的一个语法糖，使用方法就是在书写script标签的时候在其后面加上一个setup修饰。

<script setup></script>
复制代码

看上去是不是很简单呢？

vue3 + ts + setup script + volar最佳实践(在ts中使用setup script看这篇)

setup script有什么用

看到这里很多小伙伴就不理解了，我在script后面加上一个setup有什么用呢？接着看！

1> 自动注册子组件

什么意思？

现在有两个组件，父组件Father.vue，子组件Child.vue。

vue3语法

<template>
  <div>
    <h2>我是父组件!</h2>
    <Child />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'

export default defineComponent({
  components: {
      Child
  },
  setup() {

    return {
      
    }
  }
});
</script>
复制代码

vue3语法在引入Child组件后，需要在components中注册对应的组件才可使用。

setup script写法

<template>
  <div>
    <h2>我是父组件!-setup script</h2>
    <Child />
  </div>
</template>

<script setup>
import Child from './Child.vue'

</script>
复制代码

这么一对比是不是就非常明了了呢？直接省略了子组件注册的过程。

2> 属性和方法无需返回

重点来了，之前说composition API写起来有点繁琐的原因在于需要手动返回模板需要使用的属性和方法。而在setup script中可以省略这一步。看看下面的例子。

vue3语法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('CoCoyY1')
    const age = ref(18)

    const ageInc = () => {
      age.value++
    }

    return {
      name,
      age,

      ageInc
    }
  }
})
</script>
复制代码

setup script写法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('CoCoyY1')
const age = ref(18)

const ageInc = () => {
  age.value++
}

</script>
复制代码

哇哦，是不是非常方便呢？

3> 支持props、emit和context

看到这里可能有小伙伴会问，没了setup()那怎么获取到props和context呢？来！

vue3语法

//Father.vue
<template>
  <div >
    <h2 >我是父组件！</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup(props, context) {
    const childCtx = (ctx) => {
      console.log(ctx);
    }

    return {
      childCtx
    }
  }
})
</script>


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: [
    'child-click'
  ],
  props: {
    msg: String
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit('child-click', context)
    }

    return {
      props,
      handleClick
    }
  },
})
</script>
复制代码

点击一下子组件看看打印了什么。

很明显是成功的打印出了context，这是vue3的语法。

setup script写法

//Father.vue
<template>
  <div >
    <h2 >我是父组件！</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script setup>
import Child from './Child.vue';

const childCtx = (ctx) => {
  console.log(ctx);
}
</script>


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
  msg: String
})

const handleClick = () => {
  emit('child-click', ctx)
}
</script>
复制代码

点击子组件看看使用语法糖时context能不能正确打印。

这里可以看到context被打印了出来，其中的attrs、emit、props、slots、expose属性和方法依然可以使用。

那就对了，setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext。

其中defineProps用来接收父组件传来的值props。defineEmit用来声明触发的事件表。useContext用来获取组件上下文context。

对比一下两种写法，是不是setup script更加简洁方便呢？

但是！！！

注意我引入三个API的顺序，在此时如果把useContext放在最后引入，那么....

报错！！！

这应该是一个bug吧，想不出其他解释了。

以上就是vue3新出的语法糖setup script的基本使用方法了，是不是很香呢？笔者认为这个语法糖应该会成为一个正式的内容，因为它真的可以说是非常方便简洁了。

作者：CoCoyY1
链接：https://juejin.cn/post/6944190150406570020
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。