vue3新语法糖——setup script

互联网 2021/10/14 6:16:33

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

前言

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

什么是setup script

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

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

看上去是不是很简单呢?

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

image.png

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

image.png

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

setup script写法

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

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

</script>
复制代码

image.png

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

2> 属性和方法无需返回

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

setup.gif

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

image.png

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

image.png

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

image.png

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

image.png

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

那就对了,setup script语法糖提供了三个新的API来供我们使用:definePropsdefineEmituseContext

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

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


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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[vue3新语法糖——setup script]http://www.zyiz.net/tech/detail-241187.html

上一篇:第三十二篇:vue的响应式原理

下一篇:nginx部署vue工程简单的配置文件

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程