• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • setup

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

    • 类型:Function
    • 调用时间:在创建组件实例时,在初始 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 时会对其进行更新,并且可以通过使用watchEffectwatch进行观测和响应:

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

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

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

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

    • 组件使用props比其他 property 更常见,并且很多情况下组件仅使用props
    • props作为单独的参数可以使单独键入更容易,而不会弄乱上下文中其他 property 的类型。这也使得在具有 TSX 支持的setuprender和普通功能组件之间保持一致的签名成为可能。

    上篇:mixins