【Vue3】setup、ref函数、reactive函数

目录

setup

setup的 两个注意点

ref函数

基本类型数据 

处理对象类型

reactive函数

reactive对比ref

---

setup

1、理解：Vue3中的一个新的配置项，值为一个函数

2、setup是所有Composition API（组合API）的“表演舞台”

3、组件中所用到的数据、方法等等，都要配置到set up组件中

4、setup函数的两种返回值

1. 返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注）
2. 若返回一个渲染函数：则可以自定义渲染内容（了解）

5、注意点：

1、尽量不要与VUE2.X配置混用

• Vue2.x配置（data、method、computed..）可以访问到setup中的属性、方法
• 但在setup中不能访问的Vue2.x配置（data、method、computed..）
• 如果有重名，setup优先

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

举例： 

<template>
   <h1>我是APP组件</h1>
   <h2>姓名：{
  {name}}</h2>
   <h2>年龄：{
  {age}}</h2>  
   <button @click="sayHello">说话</button>
</template>

<script>
//import {h} from 'vue'

export default {
  name: 'App',
  setup(){
      //此处只是测试一下setup 暂时不考虑响应式的问题
      //数据
      let name = "张三"
      let age = 18

      //方法
      function sayHello(){
           alert (`我叫${name},我${age}岁了，你好啊！`)
       }

       //返回一个对象（常用）
       return {
        name,
        age,
        sayHello
       }

      //返回一个函数（渲染函数）
      //return ()=>h('h1','翘阳')
  }
}
</script>

<style>

</style>

setup的两个注意点

1、setup执行的时机

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

2、setup的参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

context：上下文对象

• attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于