响应式数据

选项式API的响应式数据

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

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

比如：

<script>

   export default{

      //data选项的值应该是一个函数返回的对象

      data:()=>({

        account:'Abc',

        student:{

          name:'Jack',

          age:30

        }

      }),

      methods:{

        changeAccount(){

          //取出数据源可通过this(当前组件得实例对象) 关键字获取

          this.account+='='

        },

        changeStudentAge(){

          this.student.age++

        }

      }

   }

</script>

<!-- 视图 -->

<template>

  <h1>账号：{{account}}</h1>

  <button @click="changeAccount">点我更改账号</button>

  <hr>

  <h1>学生：{{student}}</h1>

  <button @click="changeStudentAge">点我更改学生年龄</button>

</template>

组合式API的响应式数据

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

reactive()函数

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

ref()函数

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

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

<script setup>

  //引入reactive函数来声明响应式对象

  import { reactive, ref } from 'vue';

  //普通变量的数据源：字符串（不具备响应式）

  //  let account='Abc'

   let account=ref('Abc')

   //更改账号，控制台查看最新值

    // function changeAccount(){

    //   account+='='

    //   console.log(account)

    // }

    function changeAccount(){

      account.value+='='

      console.log(account)

    }

 //普通变量的数据源：对象（不具备响应式）

    // let emp={

    //   salary:7000,

    //   name:'Jack'

    // }

    //使用reactive函数来声明对象类型的数据源，具备响应式

    let emp=reactive(    {

      salary:7000,

      name:'Jack'

    })

   

   //更改员工薪资，控制台查看最新值

   function changeEmpSalary(){

    emp.salary+=100

      console.log(emp)

    }

</script>

<!-- 视图 -->

<template>

  <h1>账号：{{account}}</h1>

  <button @click="changeAccount">点我更改账号</button>

  <hr>

  <h1>员工：{{emp}}</h1>

  <button @click="changeEmpSalary">点我更改员工薪资</button>

</template>