vue——组合API和响应API

一、什么是组合API

组合API是一个基于函数的API，同时API也可以和现有的、基于选项的API一起使用，不过需要特别注意的是，组合API会在选项（data、computed和methods）之前解析，所以组合API是无法访问这些选项中的定义的属性的。

setup()函数

组合API是vue的核心功能，我们所用的组合API的数据和功能一般都写在setup()函数中如下代码所示

export default {
  name:'App',
  setup() {
    //数据
    let name = '张三'
    let age = 18
    let job = {
      type: '前端工程师',
      salary: '30k',
      a: {
        b: {
          c: 666
        }
      }
    }
    let hobby = ['抽烟', '喝酒', '烫头']

function changeInfo() {
      name = '李四'
      age = 48
      job.type = 'UI设计师'
      job.salary = '60k'
      job.a.b.c = 999
      hobby[0] = '学习'

 return {
      name,
      age,
      job,
      hobby
      }
  }

在这串我们所写的代码中，changeInfo()是我们写的测试方法，以及我们所要返回的数据都可以写在setup()中（温馨提示：代码只是示例，changeInfo()并不能运行成功，下文会说明如何运行）

二、响应式API

1.ref()函数和reactive()函数

上述代码中changeInfo()并不能成功运行，上述代码运行结果如下：

点击修改信息按钮，信息并不能修改，此时就需要就需要用ref()函数,以及reactive()函数来获取数据
下列代码便是使用ref()和reactive()来进行数据修改

<script>
import {ref,reactive} from 'vue';
export default {
  name:'App',
  setup() {
    //数据
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type: '前端工程师',
      salary: '30k',
      a: {
        b: {
          c: 666
        }
      }
    })
    let hobby = reactive(['抽烟', '喝酒', '烫头'])
    
    //方法
    function changeInfo() {
      name.value = '李四'
      age.value = 48
      job.type = 'UI设计师'
      job.salary = '60k'
      job.a.b.c = 999
      console.log(name, age)
      hobby[0] = '学习'
    }

    return {
      name,
      age,
      job,
      hobby,
      changeInfo
    }
  }

}
</script>

运行结果如下

此时已经运行成功了，点击按钮，数据可以成功修改

2.ref()的用法：

ref()负责将基本数据类型的数据封装成响应式数据,一般基本数据类型包括

• String
• Number
• Boolean
• Bigint
• Symbol
• Undefined
• Null

ref()负责接收上述类型的数值返回一个响应式且可变的ref()对象。若要获取其中的值，需要访问对象的.value属性

3.reactive()用法

Vue的reactive()方法通过接收一个对象，返回对象的响应式副本

• 作用：定义一个对象类型的响应式数据(基本类型不要用它，要用ref()函数)
• 语法：const 代理对象 = reactive(源对象)，接收一个对象或数组，返回一个代理对象(proxy的实例对象，简称proxy对象)
• reactive定义的响应式数据是深层次的
• 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据进行操作

上述代码中，我们截取这两段进行讲解

let job = reactive({
      type: '前端工程师',
      salary: '30k',
      a: {
        b: {
          c: 666
        }
      }
    })
    let hobby = reactive(['抽烟', '喝酒', '烫头'])
    
    //方法
    function changeInfo() {
      job.type = 'UI设计师'
      job.salary = '60k'
      job.a.b.c = 999
      console.log(name, age)
      hobby[0] = '学习'
    }

代码中job是一个对象，hobby是一个数组，都可以使用reactive()函数进行接收源对象中的数据，使用完reactive()函数进行接收数据后，这时job和hobby都相当于代理对象(proxy对象),这时可以对源代码数据进行直接操作，如代码中changeInfo()方法中所示