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()来进行数据修改