组合API-reactive函数

目标:掌握使用reactive函数定义响应式数据

定义响应式数据:

• reactive 是一个函数,它可以定义一个复杂数据类型，成为响应式数据。
• 通常是用来定义响应式对象。

<template>
    <div class="reactive">
        {{obj.name}}
        {{obj.age}}
    </div>
    <button @click="updateName">更新名字</button>
</template>

<script>
import { reactive } from 'vue'
export default { 
   name:'reactive',
   setup(){
     //普通的数据
    // const  obj = {
    //     name:'LS',
    //     age:18
    // }
     //  reactive 定义响应式数据

     const  obj = reactive({
          name:'Ls',
          age:18
     })

     const updateName = ()=>{
        console.log('更新名字')
        obj.name = 'ankouyang'
     }


    return {
        obj,
        updateName
    }

   }  
    
}
</script>