vue3.0之setup<<转>>

1. setup 类型：Function setup 函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点。
   调用时间:
   

在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。
模板使用:
如果 setup 返回一个对象，则该对象的属性将合并到组件模板的渲染上下文中

  <div>{{ count }} {{ object.foo }}</div>
</template>
 
<script>
  import { ref, reactive } from 'vue'
 
  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })
 
      // 暴露到template中
      return {
        count,
        object
      }
    }
  }
</script>

请注意，从 setup 返回的 refs 在模板中访问时会自动展开，因此模板中不需要 .value。

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

 
export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })
 
    return () => h('div', [count.value, object.foo])
  }

参数 该函数将接收到的 prop 作为其第一个参数：

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

请注意，此 props 对象是响应式的——即在传入新的 props 时会对其进行更新，并且可以通过使用 watchEffect 或 watch 进行观测和响应：

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

但是，请不要解构 props 对象，因为它会失去响应式：

export default {
  props: {
    name: String
  },
  setup({ name }) {
    watchEffect(() => {
      console.log(`name is: ` + name) // 没有响应式
    })
  }

props 对象在开发过程中对于用户区代码是不可变的 (如果用户代码尝试对其进行更改，则会发出警告)。

第二个参数提供了一个上下文对象，该对象暴露了以前在 this 上暴露的 property 的选择列表：

  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}

attrs 和 slots 是内部组件实例上相应值的代理。这样可以确保它们即使在更新后也始终会显示最新值，以便我们可以对它们进行结构分解，而不必担心访问老的引用：

  setup(props, { attrs }) {
    // 稍后可能会调用的函数
    function onClick() {
      console.log(attrs.foo) // 保证是最新引用
    }
  }
}