Vue3的语法糖

组合式API：setup()

Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点。

setup是一个接收props和context的函数，最后setup需要return所有内容暴露给模板。

<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, context) {
    // 在这里声明数据，或者编写函数并在这里执行它
    console.log(context)
    return {
      // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
    }
  },
})
</script>

新的 setup 选项是在组件创建之前, props 被解析之后执行，是组合式 API 的入口。

*注意：在setup中不能使用this，因为他找不到实例。但是在vue2语法和vue3语法混用的时候，vue2语法中可以使用this访问到setup里暴露出的变量。

组件的生命周期

生命周期

可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。

setup语法糖

<script setup>

</script>

1.它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。2.在setup函数中所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。

ref

ref是最常用的一个响应式 API，它可以用来定义所有类型的数据，包括 Node 节点和组件。返回一个响应式对象，所有的值都通过.value属性获取。

<template>
  <div>{{num}}</div>
</template>
<script setup >
import { ref } from 'vue'

const num = ref(0)

</script>

reactive

返回一个对象的响应式代理。

<template>
  <div>{{state.searchInfo.name}}</div>
</template>
<script setup >
import { reactive } from 'vue'

const state = reactive({
  searchInfo: {
    name: 'Jack',
  },
})
</script>

组件自动注册

在setup中不再需要用过components进行注册，直接引入即可食用。

<template>
 <Child />
</template>

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

defineProps

接收父组件传过来的内容,可以定义类型和默认值

const props = defineProps({
  modelValue: {
    type: Array,
    default: (() => {[]}),
  },
})

defineEmit

子组件向父组件传递内容事件

const text = ref(1)
const emit = defineEmits(['update:modelValue'])
emit('update:modelValue', text.value)

defineExpose

向外暴露组件内方法和属性

传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template 模板，谁都不能访问内部的数据和方法。

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpose

// 子组件
const table = ref(null)
defineExpose({
  table,
})

// 父组件
<template>
 <Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

let child = ref(null);

onMounted(() => {
 console.log(child.value.table); // Child Components
})
</script>

watch

watch(
  source, // 必传，要侦听的数据源
  callback // 必传，侦听到变化后要执行的回调函数
  // options // 可选，一些侦听选项
)

watchEffect

<template>
  <div>{{num}}</div>
</template>
<script setup >
import { watchEffect, watch, ref } from 'vue'

const num = ref(1)

var id = setInterval(() => {
  num.value = num.value + 1
  if (num.value === 20) {
    clearInterval(id)
    id = null
  }
}, 1000)

watchEffect(() => {
  console.log(1111)
})

watch(() => num.value, () => {
  console.log(222, num.value)
})
</script>

watch和watchEffect区别：

1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）

2、watch需要传递监听的对象，watchEffect不需要

3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下

4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。

seSlots() 和 useAttrs()

获取插槽数据和获取attrs数据，里面包含了 class、属性、方法。

// 旧
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>

其他 Hook Api

1. useCSSModule：CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少，不过多做介绍。

2. useCssVars: 此 api 暂时资料比较少。介绍v-bind in styles时提到过。

3. useTransitionState: 此 api 暂时资料比较少。

4. useSSRContext: 此 api 暂时资料比较少。

参考：Vue官网、小調不吃辣（掘金）

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。