Vue3-笔记-组合API-setup函数的理解

1,173 阅读2分钟

理论:

  • setup是一个新的组件选项,作为组件中使用组合API的起点。

  • 从组件生命周期来看,它的执行在组件实例创建之前,vue2.xbeforeCreate 执行。

  • 这就意味着setup函数中this还不是组件实例,this此时是undefined

  • 在模板中需要使用的数据和函数,需要在setup返回。

  • 这是个很重要的生命周期函数。

验证它的触发时机:

export default ({
  name: 'App',
  setup () {
  // 触发时机在beforCreate/created生命周期之前
  // Vue3中beforCreate/created生命周期函数已经废弃了,其实是已经被setup替代了
  // 所以说这时无法访问this,因为组件实例此时尚未创建
    console.log(this)
  }
})

模板中需要使用的数据和函数,需要在setup返回。

export default ({
  name: 'App',
  setup () {
  // 触发时机在beforCreate/created生命周期之前
  // Vue3中beforCreate/created生命周期函数已经废弃了,其实是已经被setup替代了
  // 所以说这时无法访问this,因为组件实例此时尚未创建
  // console.log(this)
  
  // 这里返回的数据用于给模板使用:类似于之前data中提供的数据
    return {
      msg: 'hello'
    }
  }
})

Vue3中依然可以使用data中的数据,但是不建议用,因为data的写法是选项API类型,但是Vue3的风格类型是推荐使用符合API类型的,但是它也是可以用的。

setup中还可以使用方法,同样需要return当键和值相同时,可以简写成一个值(ES6语法规范)

<template>
  <div>
<div>setup函数用法</div>
<button @click="handleClick">点击</button>
<hr>
  </div>
</template>
export default ({
  name: 'App',
  setup () {
    const handleClick = () => {
      console.log(123)
    }
    // 这里返回的数据用于给模板使用:类似于之前data中提供的数据
    return {
      handleClick
    }
  }
})

总结:

  • 1.setup是实现组合API的基础。

  • 2.它触发的时机在beforeCreate之前

  • 3.Vue3中beforeCreate/created生命周期函数已经被废弃了,其实已经被setup替代了

  • 4.setup中无法访问this,因为组件实例此时尚未创建

  • 5.setup的返回值用于给模板提供数据和方法