vue3.0 setup()

setup()

Vue3 引入一个新的组件选项，setup()，它会在一个组件实例被创建时，初始化了 props 之后调用。 会接收到初始的 props 作为参数：

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

传进来的 props 是响应式的，当后续 props 发生变动时它也会被框架内部同步更新。但对于用户代码来说，它是不可修改的（会导致警告）。

同时，setup() 执行时机相当于 2.x 生命周期 beforeCreate 之后，且在 created 之前：

export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  setup() {
    console.log('setup')
  },
  created() {
    console.log('created')
  }
}
// 打印结果
// beforeCreate
// setup
// created

在 setup() 中 this 不再是 vue 实例对象了，而是 undefined，可以理解为此时机实例还没有创建。

在 setup() 第二个参数是上下文参数，提供了一些 2.x this 上有用属性。

export default {
  setup(props, context) {
    console.log('this: ', this)
    console.log('context: ', context)
  }
}
// 打印结果
// this: undefined
// context: {
//   attrs: Object
//   emit: f()
//   isServer: false
//   listeners: Object
//   parent: VueComponent
//   refs: Object
//   root: Vue
//   slots: {}
//   ssrContext: undefined
// }

类似 data(return{})返回的对象，setup() 可以返回一个对象，这个对象上的属性将会暴露给模版的渲染上下文：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  setup() {
    return {
      name: 'zs'
    }
  }
}
</script>