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