vue3的ref的使用

1、响应式的数据ref函数:基本数据类型

使用ref情况下age,name直接输出都是一个RefImpl实现类,
其中基本类型的值直接放在这个实现类RefImpl的value里面,
取值需要age.value,age.value

注意：直接通过setup函数return出来的变量在末班解析的时候不需要
.value的形式取值,因为模板能自动解析出value值

2、响应式的数据ref函数:引用数据类型

    示例中obj.value打印的值: 
    Proxy {name: '刘德华', age: 19, job: '高级大数据工程师', salary: '60', data: {…}}
    深层次嵌套对象使用起来比较麻烦，尤其体现在取值方面

3、ref函数总结

    作用：定义一个响应式的数据
    语法：const xx = ref(initValue)
    创建一个包含响应式的数据的引用对象(reference对象,简称ref对象)
    js操作数据：xxx.value
    模板中读取数据：不需要.value 直接使用即可

    备注：
    接收数据可以是：基本数据类型、对象类型
    基本类型的数据：响应式依然是靠object.defineProperty()的get于set完成的
    对象类型：内部求助vue3.0中一个新函数reactive函数实现

示例

<template>
<!-- ref的基本数据类型使用 -->
  <p>{
   
   {name}}</p>
  <p>{
   
   {age}}</p>
  <button @click='changeAge'>点击年龄+1</button>

  <!-- ref的引用数据类型使用 -->
  <h1>{
   
   {obj.name}}</h1>
  <p>{
   
   {obj.job}}</p>
  <p>{
   
   {obj.salary}}k</p>
  <p>{
   
   {obj.age}}</p>
  <button @click="addSalary">点我涨薪资</button>
</template>
<script>
import {ref} from 'vue'
export default {
    name: 'App2'，
    setup(){
        let name = ref('李敏镐');
        let age = ref(24);

        let obj = ref({
            name:"刘德华",
            age:19,
            job:'大数据工程师',
            salary:'30',
            data:{
                a:1,
                b:'胜多负少',
                c:'sdf'
            }
        })
        
        function changeAge(){
            age.value++;
            console.log(name.value,age.value,age)
        }
        /* 
      
        */
        function addSalary(){
            obj.value.salary = '60'
            obj.value.job = '高级大数据工程师'
            console.log(obj.value,obj.value.salary,obj.value.data.b)
        }

        return {
            age,
            name,
            obj,
            changeAge,
            addSalary
        }
    }
};
</script>

<style scoped>

</style>

猜你喜欢