Vue中的reactive函数操作代码
安静点-- 人气:0reactive函数
之前给大家介绍过vue3.2 reactive函数问题小结,喜欢的朋友点击查看。
- 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用
ref
函数,ref函数可以用基本类型也可以对象类型) - 语法:
const 代理对象= reactive(源对象)
接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) - reactive定义的响应式数据是“深层次的”。
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
<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> import {reactive} from 'vue' export default { name: 'App', setup(){ //数据 虽然reactibe用不了基本类型,但是我们可以将基本类型的数据作为属性, // 放到一个对象中,比如下面的name,age,总体来说写法比ref简单,因为不用.value let person = reactive({ name:'张三', age:18, job:{ type:'前端工程师', salary:'30K', a:{ b:{ c:666 } } }, hobby:['抽烟','喝酒','烫头'] }) //方法 function changeInfo(){ person.name = '李四' person.age = 48 person.job.type = 'UI设计师' person.job.salary = '60K' person.job.a.b.c = 999 person.hobby[0] = '学习' } //返回一个对象(常用) return { person, changeInfo } } } </script>
加载全部内容