vue3.2 reactive函数问题小结
MrLcTate 人气:0reactive函数
上篇文章给大家介绍了Vue中的reactive函数操作代码,需要的朋友点击查看。
reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式)。
- 语法:const 代理对象= reactive(源对象) 。
- 接收一个对象(或数组),返回一个代理对象(简称proxy对象)。
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
注意点1:
问题:reactive函数使用基本类型数据会报警告
注意点2:
总结:基础类型数据推荐适用ref函数,引用类型数据推荐适用reactive函数
使用reactive函数实现引用数据响应式数据
<script setup> //数据 let job = reactive({ type: '前端工程师', salary: '20K' }) //方法 function changeInfo() { job.type = 'UI设计师' job.salary = '30K' } </script>
如果想使用ref函数实现引用数据响应式,使用job.value
<script setup> //数据 let job = ref({ type: '前端工程师', salary: '20K' }) //方法 function changeInfo() { job.value.type = 'UI设计师' job.value.salary = '30K' } </script>
注意点3:
当然也可以把基础类型数据和引用类型数据封装成一个代理对象,通过reactive函数关联,使用起来也很方便,缺点是还是写了很多person.xxx重复字符串
<template> <h1>一个人的信息</h1> <h2>姓名:{{ person.name }}</h2> <h2>年龄:{{ person.age }}</h2> <h3>工作种类:{{ person.job.type }}</h3> <h3>工作薪水:{{ person.job.salary }}</h3> <h3>爱好:{{ person.hobby }}</h3> <h3>测试的数据c:{{ person.job.a.b.c }}</h3> <button @click="changeInfo">修改人的信息</button> </template> <script setup> import { reactive } from "vue"; //数据 let person = reactive({ name: "张三", age: 18, job: { type: "前端工程师", salary: "20K", a: { b: { c: 666, }, }, }, hobby: ["打球", "跑步", "健身"], }); //方法 function changeInfo() { person.name = "李四"; person.age = 50; person.job.type = "UI设计师"; person.job.salary = "30K"; person.job.a.b.c = 999; person.hobby[0] = "学习"; } </script>
加载全部内容