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 += 1job.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+=1person.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