[JavaScript知识库]Vue3 setup script

setup script是vue3的一个语法糖

通常我们使用composition API的时候需要使用?setup 钩子，然后还要把页面上要使用的变量return返回出去,例如：

<template>
  <div>{{name}}{{age}}{{persion}}</div>
  <button @click="sayHello">说话</button>
  <div>computed: {{ persion.fullName }}</div>
  <div>{{ num }}</div>
  <button @click="add">加1</button>
  <div>{{ num2 }}</div>
  <button @click="change">添-</button>
</template>

<script>
import { ref, reactive, computed } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    let name = ref('lyk')
    let age = ref(18)
    let num = ref(1)
    let num2 = ref(2)
    let persion = reactive({
      firstName: '张',
      lastName: '三'
    })
    persion.fullName = computed(() => {
      return persion.firstName + '-' + persion.lastName
    })
    function sayHello() {
      alert(`我叫${name.value},我${age.value}岁了,
      ${persion.firstName}---${persion.lastName}`)
    }
    function add() {
      num.value++
      num2.value++
    }
    function change() {
      persion.firstName += '-'
      persion.lastName += '+'
    }
    return {
      name,
      age,
      persion,
      sayHello,
      num,
      num2,
      add,
      change
    }
  }
}
</script>

<style scoped>
</style>

使用起来很麻烦。

<template>
  <div>{{name}}{{age}}{{persion}}</div>
  <button @click="sayHello">说话</button>
  <div>computed: {{ persion.fullName }}</div>
  <div>{{ num }}</div>
  <button @click="add">加1</button>
  <div>{{ num2 }}</div>
  <button @click="change">添-</button>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
const name = ref('lyk')
const age = ref(18)
const num = ref(1)
const num2 = ref(2)
const persion = reactive({
  firstName: '张',
  lastName: '三'
})
persion.fullName = computed(() => {
  return persion.firstName + '-' + persion.lastName
})
const sayHello = () => {
  alert(`我叫${name.value},我${age.value}岁了,
  ${persion.firstName}---${persion.lastName}`)
}
const add = () => {
  num.value++
  num2.value++
}
const change = () => {
  persion.firstName += '-'
  persion.lastName += '+'
}
</script>

<style scoped>
</style>

这样就简单很多了。

现在来详细的说一下优点

1. 组件不需要在components里注册，引入之后直接在页面上使用即可
2. 属性方法不需要人return返回
3. 新增了defineProps、defineEmit和useContext，但是useContext后来又被弃用了，用useSlots和useAttrs来代替，总共四个新的api，顾名思义defineProps充当props接受父组件的参数，defineEmit充当$emit自定义事件来给父组件传参，useSlots用于获取插槽数据，useAttrs可以获取到attrs的数据

   // 首先是defineProps，父组件跟vue2完全没区别
   // 子组件:
   import { defineProps } from 'vue'
   const props = defineProps({
       xxx: {
           type: xxx,
           required: true/false
       }
   })

   // 然后是defineEmits 父组件同样没区别
   // 子组件:
   import { defineEmits } from 'vue'
   const emit = defineEmits('fn') // 先定义一个事件
   const click = () => {
       emit('fn', '参数') // 然后触发这个事件
   }