ref函数与reactive函数

ref函数

• 作用：定义一个响应式的数据
• 接收的数据类型可以是基本数据类型也可以是引用数据类型（基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的，对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数）
• 建议基本数据使用ref函数，引用数使用reactive函数

<script setup>
  import {ref} from "vue"
  let text="测试"
  let text1=ref("测试")
  let arr=ref(["luhan","lay","sehun"])
  function fn1(){
  //没有使用ref函数或reactive函数使用不会实现响应式数据，点击页面的值不变
    text="测试change"
    // ref需要使用调用valve改变实现响应式数据
    text1.value="测试change666"
  }
  let fn3=()=>{
    console.log(arr.value);
    arr.value[1]="tao"    
  }
</script>
<template>
   <p>{{text}}</p>
   <p>{{text1}}</p>
   <h2 v-for="el in arr">{{el}}</h2>
   <button @click="fn1">改变text</button>
   <button @click="fn3">改变arr的值</button>
</template>

reactive函数

• 作用：定义一个对象类型的响应式数据（基本数据也可以，一般用ref）
• reactive定义的响应式数据是“深层次的”
• 内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的

<script setup>
  import {reactive} from "vue"
  let obj=reactive({name:"lay",age:10})
  let fn2=()=>{
    console.log(obj);
    obj.age=7
    obj.name="luhan"
  }
</script>

<template>
   <p>{{obj.name}}的号码 是{{obj.age}}</p>
   <button @click="fn2">改变obj的值</button>
</template>