Vue3.0新特性 ---组件Setup

Vue3.0新特性 —组件Setup

setup函数是一个新的组件选项。作为在组件内使用Composition Api的入口点。

调用时机

创建组件实例，然后初始化props，紧接着就调用setup函数。 从生命周期的角度来看，它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  setup() {
     
    console.log("hey 蛙人")
  }
}
</script>

this指向

由于不能在setup函数中使用data、methods，为了避免使用Vue出错，所以把setup函数中this修改为了undefined。

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  setup() {
     
    console.log(this); // undefined
  }
}
</script>

函数参数

props和context

接收组件传递过来的所有数据，并且都是响应式的。

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  props: {
     
      title: {
     
          type: String
      }
  },
  setup(props) {
     
    console.log(props.title)
  }
}
</script>

*注意一点，props数据不能使用解构，否则响应式数据失效

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  props: {
     
      title: {
     
          type: String
      }
  },
  setup({
      title }) {
     
    console.log(title) // 这里响应式数据将失效
  }
}
</script>

context
该参数提供一个上下文对象，从原来的2.x中选择性的暴露了一些属性。
attrs/slots/emit

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  props: {
     
      title: {
     
          type: String
      }
  },
  setup(props, {
      attrs, slots, emit } ) {
     
    console.log(attrs) 
  }
}
</script>

上面，attrs和slots都是内部组件实例上对应项的代理，可以确保在更新后仍然还是最新的值。所以这里可以使用解构语法

返回值

可以将setup函数返回值渲染到页面上。但前提是，setup返回值必须是一个对象，否则返回其它值则渲染无效。

<template>
  <div>蛙人</div>
</template>
<script>
export default {
     
  name: 'App',
  props: {
     
      title: {
     
          type: String
      }
  },
  setup() {
     
    const name = "蛙人"
    return {
     
       name
    }
  }
}
</script>