Vue学习：04-响应式数据

一、选项式 API 的响应式数据

● 可用data选项来声明组件的响应式状态；该data选项的值应是返回一个对象的函数；

● data函数返回对象的所有顶层属性都会被代理到组件实例（即方法和生命周期钩子中的 this）上 App.vue

<script>
  export default {
    //data 选项的值应该是一个函数返回的对象
    data: () => ({
      account: 'Abc',
      student: {
        name: 'Jack',
        age: 30
      }
    }),
    methods: {
      changeAccount() {
        //取出数据源可通过this（当前组件的实例对象）关键字获取
        this.account += '='
      },
      changeStudentAge() {
        this.student.age ++
      }
    }
  }

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用数据源的DOM -->
  <h1>账号：{{ account }}</h1>  
  <button @click="changeAccount">点我更改账号</button>

  <hr>
  <h1>学生：{{ student }}</h1>
  <button @click="changeStudentAge">点我更改学生年龄</button>
</template>

二、组合式 API 的响应式数据

如果在组合式 API 中直接声明普通变量的数据源，他们并不具备响应式数据

App.vue

<script setup>
  //普通的变量不具备响应式
  let account = 123
  function changeAccount() {
    account += 1
    console.log(account)
  }

  //普通类型的对象，不具备响应式
  let emp = {
    salary: 7000,
    name: 'Annie'
  }

  function changeEmpSalry() {
    emp.salary += 100
    console.log(emp)
  }

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用数据源的DOM -->
  <h1>账号：{{ account }}</h1>  
  <button @click="changeAccount">点我更改账号</button>

  <hr>
  <h1>员工：{{ emp }}</h1>
  <button @click="changeEmpSalry">点我更改员工薪资</button>
</template>

我们会发现，在页面上，无法实现数据的改变。那么，如何让数据能做到响应式变化呢？

1、reactive() 函数

reactive()函数只对对象类型有效（对象、数组、Map、Set），对string、number和 boolean这样的原始类型无效

App.vue

<script setup>

  //引入reactive函数
  import { reactive } from 'vue';
  //reactive 对原始类型是无效的（不具备响应式）
  let account = reactive('Abc')
  function changeAccount() {
    account += 1
    console.log(account)
  }

  //reactive对对象数据源有效，具备响应式
  let emp = reactive({
    salary: 7000,
    name: 'Annie'
  })

  function changeEmpSalry() {
    emp.salary += 100
    console.log(emp)
  }

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用数据源的DOM -->
  <h1>账号：{{ account }}</h1>  
  <button @click="changeAccount">点我更改账号</button>

  <hr>
  <h1>员工：{{ emp }}</h1>
  <button @click="changeEmpSalry">点我更改员工薪资</button>
</template>

2、ref() 函数

● 使用ref()方法我们可以创建任何类型的响应式数据，获取时需要通过.value来进行获取

● 当值为对象类型时，会用reactive()自动转换它的 .value

App.vue

<script setup>

  //引入ref函数，来声明响应式对象
  import { ref } from 'vue';
  //ref 对原始类型是有效的（具备响应式）
  let account = ref('Abc')
  function changeAccount() {
    //通过ref函数声明的响应式数据，需要使用.value来获取数据的值
    account.value += '='
    console.log(account)
  }

  //ref对对象数据源有效，具备响应式
  let emp = ref({
    salary: 7000,
    name: 'Annie'
  })

  function changeEmpSalry() {
    //通过ref函数声明的响应式数据，需要使用.value来获取数据的值
    emp.value.salary += 100
    console.log(emp)
  }

</script>

<!-- 视图区域（view） -->
<template>
  <!-- 使用数据源的DOM -->
  <h1>账号：{{ account }}</h1>  
  <button @click="changeAccount">点我更改账号</button>

  <hr>
  <h1>员工：{{ emp }}</h1>
  <button @click="changeEmpSalry">点我更改员工薪资</button>
</template>