Set up 介绍

Set up 介绍;

setup是Composition API(组合API)的入口函数

可以理解为是生命周期,原来的created,beforeCreate被setup替换,但可以继续同时使用;

setup函数早于created,beforeCreate执行,故在setup中无法使用data和methods,但可以在里面创建data和methods

setup中定义的变量,方法,计算属性等如果想在模板中使用,必须通过return返回出去,不然无法使用

setup和JavaScript一样是同步的,由上而下执行

setup中无法使用this,会返回undefined

setup函数有两个参数:props和context,context是一个普通的 JavaScript 对象,有attrs 、slots 、emit

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
 
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>