vue3 ref函数

• 作用：定义一个响应式数据
• 语法： const xxx = ref(initValue)
  • 创建包含一个响应式数据的引用对象（referenced对象，简称ref对象）
  • js中操作数据：xxx.value
  • 模板中读取数据：不需要value,直接
    {{xxx}}
    
    -备注：
  • 接收的数据可以是：基本类型，也可以是对象类型
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的
  • 对象类型的数据：内部‘求助’了Vue3.0中的一个新函数——reactive 函数

 <template>
      <div>名字:{{name}}</div> //读取数据
      爱好：{{person.hobby}}  身高：{{person.tall}}
 </template>
<script>
 import {ref} from 'vue'
 export default {
  name: 'App',
  setup(props) {
    let name = ref(11);  //基本类型的数据的定义
    let person = ref({   //对象类型数据的定义
      hobby:'踢足球',
      tall:150
    })
    function test2(){
      name.value = 12  //基本类型数据的修改
     person.value.hobby="亲小猫" //对象类型数据的修改
    }
    //返回一个对象（常用）
    return {
      name,
      sayHello,
      test2,
      age,
      person
    }
    }
    }
   </script>