vue3-setup 看完就学会

什么是setup

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

setup组合api的特点

1.在created之前执行

2.内部没有this

3.setup编写的代码更加直观,接近原生js

<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（）就相当于created生命周期

需要return 返回，在template模板中使用

setup参数

setup(props,context)

<template>
	<div>
		<h1>setUp函数</h1>
		<p>props:{
  {num}}</p>
		<button type="button" @click="setCount(5)">{
  {count}}</button>
	</div>
</template>

<scr