Vue3中的组合API:setup函数,reactive,toRef函数,toRefs函数

一.setup

1.setup是实现组合api的基础p函数的使用

2.触发的时机是在beforeCreate之前

3.vue3中已经废弃了beforeCreate 与 Created,被setup函数代替了

4.无法访问this,因为组件实例还没有被创建

5.需要返回值,用于给模板提供数据与方法

6.可以沿用Vue2中的data,但是已经不建议这么做了

<template>
  <div >
<h1>{{msg}}</h1>
<button @click="handler">按钮</button>
  </div>

</template>

<script>
export default {
  name: 'app',
  setup () {
    console.log('hah') // 进入页面就会被打印
    console.log(this) // undefined vue3中不会再有this
    const handler = () => {
      console.log('我是按钮大坏银')
    }
    return { // 方法与数据都要返回
      msg: '哥哥',
      handler
    }
  }
}
</script>

 二.reactive函数

1.reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。普通的数据不能是响应式的

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{obj.msg}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 数据响应式：数据的变化导致视图自动变化
    // let msg = 'hello'
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const handleClick = () => {
      // msg = 'nihao'
      // console.log(msg)
      obj.msg = 'nihao'
    }
    return { obj, handleClick }
  }
}
</script>

<style lang="less">
</style>

三.toRef函数

使用的原因:

1.如果是reactive包裹的对象中的对象是响应性的,但是如果要重新赋值的话,就会失去响应式的能力

2.使用reactive会有obj的前缀,想去除前缀

注意:使用了ref都需要.value

<template>
  <div >
<h1>数据的响应式</h1>
<hr>
<div>{{msg}}</div>
<button @click="handleClick">点击</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  // 数据的响应式:数据的变化导致视图的自动变化
  setup () {
    const obj = reactive({
      msg: '中国'
    })
    const handleClick = () => {
      obj.msg = '加纳'
    }
    return {
      msg: obj.msg, // 如果这样修改reactive中的值,那么reactive会失去响应式
      handleClick
    }
  }

}
</script>

以下是使用了toRef函数

<template>
  <div >
<h1>数据的响应式</h1>
<hr>
<div>{{msg}}</div>
<button @click="handleClick">点击</button>

  </div>

</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  // 数据的响应式:数据的变化导致视图的自动变化
  setup () {
    const obj = reactive({
      info: '哈哈',
      msg: '中国'
    })
    const msg = toRef(obj, 'msg')
    const handleClick = () => {
      msg.value = '台湾'
    }
    return {
      msg,
      handleClick
    }
  }

}
</script>

四.toRefs函数

为了获取获取对象中的多个属性,可以使toRefs进行结构

<template>
  <div >
<h1>数据的响应式</h1>
<hr>
<div>{{msg}}</div>
<div>{{info}}</div>
<button @click="handleClick">点击</button>

  </div>

</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'App',
  // 数据的响应式:数据的变化导致视图的自动变化
  setup () {
    const obj = reactive({
      info: '哈哈',
      msg: '中国'
    })
    const { msg, info } = toRefs(obj)
    const handleClick = () => {
      msg.value = '台湾'
    }
    return {
      msg,
      info,
      handleClick
    }
  }

}
</script>