阅读 163

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,从而降低在语法选择上的心智负担
文章分类
前端
文章标签