技術標籤：vuesetupcontextprops

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