vue3新语法糖——setup script

转载

wx60d4764eb475e 2022-02-08 14:18:10

前言

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

什么是setup script

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

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

看上去是不是很简单呢？

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

vue3新语法糖——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新语法糖——setup script_vue.js_02

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

setup script写法

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

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

</script>
复制代码

vue3新语法糖——setup script_语法糖_03

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

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>
复制代码

vue3新语法糖——setup script_事件表_04

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

vue3新语法糖——setup script_商业_05

很明显是成功的打印出了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>
复制代码