vue3之setup以及一参prop二参context

setup

• 类型：Function

setup 函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点。

• 调用时间

  在创建组件实例时，在初始 prop 解析之后立即调用setup。在生命周期方面，它是在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' })
  
        // 暴露到template中
        return {
          count,
          object
        }
      }
    }
  </script>

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

• 渲染函数/JSX 的方法

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

  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])
    }
  }

• 参数

  该函数将接收到的 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 的选择列表：

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

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

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

  有很多理由将props 作为单独的第一个参数而不是将其包含在上下文中：

  • 组件使用props 比其他 property 更常见，并且很多情况下组件仅使用props。

  • 将props 作为单独的参数可以使单独键入更容易，而不会弄乱上下文中其他 property 的类型。这也使得在具有 TSX 支持的setup、render 和普通功能组件之间保持一致的签名成为可能。

• 参考组合式 API