Vue学习笔记-Vue3中ref和reactive函数的使用

2023-12-13 03:32:58

前言

为了让vue3中的数据变成响应式,需要使用ref,reactive函数

ref函数使用方式

  • 导入ref函数

    import {ref} from 'vue'
    
  • 在setup函数中,将需要响应式的数据通过ref函数进行包装,修改响应式数据时,需要通过:
    ref包装的响应式对象.value = 修改后的数据这种形式进行修改

    export default {
      name: 'App',
      components: {
    	......
      },
      setup(){
        //数据定义
        let name = ref('张三')
        let age = ref(18)
        let job = ref({
          type:'前端工程师',
          salary:'30k'
        })
    
        //定义函数
        function changeInfo(){
          name.value = '李四'
          age.value += 1
          job.value.type = '后端工程师'
          job.value.salary = '50k'
          /*console.log(name,age)*/
        }
        //setup必须有返回值,将上述定义的响应式数据,以及函数进行返回
        return {
          name,
          age,
          job,
          changeInfo
        }
      }
    }
    

reactive函数使用方式

  • 导入reactive函数

    import {reactive} from 'vue'
    
  • reactive函数用于处理对象类型以及数组类型的响应式数据(ref处理对象类型的数据也借助了reactive的帮助),并且处理后返回的对象不需要使用.value后缀,用法模板为:
    const 代理对象 = reactive(源对象),该代理对象实质上是Proxy的实例对象

    export default {
      name: 'App',
      components: {
    
      },
      setup(){
        //数据定义
        /*
        	为了方便起见,可以将之前定义的数据整合到一个对象中,
        	这样即方便管理,也可以统一由reactive函数处理
        */
        let person = reactive({
          name : '李四',
          age:18,
          job:{
            type:'前端工程师',
            salary:'60k'
          },
          hobbies:['抽烟','喝酒','烫头']
        })
        //定义函数
        function changeInfo(){
          person.name = '王五'
          person.age+=1
          person.job.type='后端工程师'
          person.job.salary='50k'
          person.hobbies[0] = '学习'
        }
        //setup必须有返回值
        return {
          person,
          changeInfo
        }
      }
    }
    

reactive对比ref总结

  • 从定义数据角度对比:
    ref用来定义:基本类型数据
    reactive用来定义:对象或数组类型数据
    备注:ref也可以用来定义对象或数组类型数据,它内部会通过reactive转为代理对象
  • 从原理角度对比:
    ref通过Object.defineProperty()get()set()来实现响应式(数据劫持)
    reactive通过Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部数据
  • 从使用角度对比:
    ref定义的数据:操作数据需要附带.value,读取数据时,从模板中直接读取,不需要.value
    reactive定义的数据:操作数据与读取数据均不需要.value

文章来源:https://blog.csdn.net/theLuckyLong/article/details/134847625
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。