Vue3--setup入口函数、reactive 响应式函数、ref 函数

setup函数

setup 函数是Vue3中新的组件选项，作为组件中组合式API 的起点

setup 中不能使用 this， this 指向 undefined

setup函数只会在组件初始化的时候执行一次

setup函数会在beforeCreate生命周期钩子执行之前执行

//测试
export default {
  setup () {
    console.log('setup执行了',new Date().getTime())
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了'new Date().getTime())
    console.log(this)
  }
  // 结果
  // setup执行了 1622628190197  时间戳不会骗人的哈
  // beforeCreate执行了 1622628190207
}

reactive函数

reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

//1.使用reactive函数首先需要从vue中引出
import {reactive} from 'vue'
//2.在setup函数中调用reactive函数并将对象数据传入

<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      state
    }
  }
}
</script>

使用:
<template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>

ref函数

ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

//1.使用ref函数首先需要从vue中引出
import {ref} from 'vue'
//2.在setup函数中调用ref函数并将数据传入(简单类型或者复杂类型)
<script>
import { ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    console.log(money.value) // 100
    return {
      money
    }
  }
}
</script>
//3.在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
//4.注意：在setup函数中使用ref结果，需要通过`.value`  访问，模板中使用不需要加.value

ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
reactive和ref函数都可以提供响应式数据的转换
推荐一种写法：只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担