持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

前言

我们使用vue3，主要的入口点在setup函数上，这个函数有什么魅力呢?他可以帮助我们做些什么事情呢？让我们来看看吧。

组件逻辑入口

• setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
• 我们可以在setup函数中写 Composition Api

调用时机

• 创建组件实例之后，会初始化props,然后调用setup函数。从声明周期钩子函数来看，他的调用时机是在beforeCreate钩子之前被调用。

export default {
  setup() {
    console.log("setup");
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
};

返回值

在模板中使用

• 如果 setup 返回一个对象，则对象的属性可以在组件模板中被访问。

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

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

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // 暴露给模板
      return {
        count,
        object,
      }
    },
  }
</script>

注意：setup函数返回的ref在模板中会自动解开，不需要写.value

在渲染函数/ JSX 中使用

• setup也可以返回一个函数，也就是我们h函数

• 或者直接使用jsx，不过我们需要使用对应的编译库来识别jsx

• 渲染函数

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })
    // 返回渲染函数
    return () => h('div', [count.value, object.foo])
  },
}

• JSX

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })
    // 返回渲染函数
    return (
      <div>{{count.value}}{{object.foo}}</div>
    )
  },
}

setup 参数

props

• 我们在函数中接收第一个参数props，

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

• 接收到的props对象是响应式的，可以使用watchEffect和watch来观察props的更新。

export default {
  props: {
    name: String,
  },
  setup(props) {
    watchEffect(() => {
      console.log(`name is: ` + props.name)
    })
  },
}

不能解构 props 对象

• 注意：我们不能解构props对象，那样会使props失去响应式。

export default {
  props: {
    name: String,
  },
  setup({ name }) {
    watchEffect(() => {
      console.log(`name is: ` + name) // Will not be reactive!
    })
  },
}

• 如果我们想让props中的值在解构之后保持响应式，我们可以通过toRef、toRefs来使其保持响应式。

export default {
  props: {
    name: String,
  },
  setup(props) {
    const {name} = toRefs(props)
    watchEffect(() => {
      console.log(`name is: ` + name) // 依旧保留响应式状态
    })
  },
}

不能修改 props 值

• 我们在开发过程中，为了保证单向数据流，props对象对于当前实例上来说是不可变的。
• 如果我们强行修改 props,会触发警告。

context 上下文

• context 上下文中，和vue2中的 $attrs、$slots、$emit一一对应。
• 注意：this在setup函数中是不可用的。setup函数中一切调用皆是函数api

const MyComponent = {
  setup(props, context) {
    context.attrs;
    context.slots;
    context.emit;
  },
};

• 我们可以对context进行解构,并且内部保证了响应性

const MyComponent = {
  setup(props, { attrs }) {
    // 一个可能之后回调用的签名
    function onClick() {
      console.log(attrs.foo) // 一定是最新的引用，没有丢失响应性
    }
  },
}

总结

这一节，我们简单介绍了setup函数的调用时机、返回值的应用以及他能接收的参数，在后面的开发中，可以帮助我们更好地处理逻辑。