vue3中的setup

前言

setup是vue3中的一个全新的配置项，值为一个函数；

setup是所有**CompositionAPI（组合API）**的基础，组件中所用到的数据、方法等都需要在setup中进行配置

setup中的两种返回值

• 返回一个对象，对象中的属性、方法，在模板中均可直接使用

<template>
  <div>{{ sayHello() }}</div>
  <div>{{ name }}</div>
</template>
    
<script>

export default {
  name: "App",
  setup() {
    // 数据
    let name = "张三";
    let age = "18";
    // 方法
    function sayHello() {
      alert(`我叫${name},我${age}岁了，你好啊`);
    }
    // 第一种return，返回一个对象
    return {
      name,
      age,
      sayHello,
    };
  },
};
</script>

• 在vue2的配置中可读取到vue3配置中的属性和方法；在vue3的配置中不能读取vue2配置中的属性和方法

<template>
  <div>{{ name }}</div>
  <!-- <div>{{ sayHello() }}</div> -->
  <div>{{ test2() }}</div>
</template>
    
<script>
export default {
  name: "App",
  data() {
    return {
      sex: "男",
    };
  },
  methods:{
    sayHello() {
		alert('你好啊')
	}
  },
  setup() {
    // 数据
    let name = "张三";
    let age = "18";
    function test2() {
		console.log(this.sex,'sex');
		console.log(this.sayHello,'sayHello');
	}
    // 第一种return，返回一个对象
    return {
      name,
      age,
      test2
    };
  },
};
</script>

• 如果vue2和vue3的配置有冲突，则vue3的setup优先

data() {
	return {
		sex:'男'
	}
},
setup() {
	const sex = ref('女')
	return {
		sex
	}
}

setup执行的时机

在beforeCreate之前执行一次，this是undefined

beforeCreate(){
	console.log('beforeCreate');
},
setup(){
	console.log('setup',this);
}

setup的参数

第1个参数：props是一个对象，包含父组件传递给子组件的所有数据；在子组件中使用props进行接收。
第2个参数：context，是一个对象。该属性是props中没有声明接收的所有的对象；如果你使用props去获取值，同时props中你声明了你要获取的值
则：获取的值是undefined

//父组件
<template>
  <Child msg="你好啊" aa="111"></Child>
</template>
<script>
import { ref } from "vue";
import Child from "./Child.vue";
export default {
  components: { Child },
  name: "App",

  setup() {
    return {
    
    };
  }
};
</script>
//子组件

<template>
  <div>{{ msg }}</div>
</template>    
<script>
export default {
    props:['msg'], // 需要声明一下接受到了，否则会报警告
    setup(props,context){
        console.log(props,context,'父传子接收到了');
    }
}
</script>

注意点：

①、vue3支持向下兼容，vue2中的data、methods配置项在vue3中都能够使用，但是尽量不要将vue3中的配置项和vue2.x配置项混用；

②、vue2.x配置（data、methods、computed等）中可以访问setup中的属性、方法，但是在setup中不能访问vue2.x配置（data、methods、computed等）；

③、如果vue2配置与vue3配置存在重名，则以谁在上面谁优先展示；

④、setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性；