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

前言

为了让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