vue3组合式Composition API之reactive函数的具体用法
2023-09-14 09:04:06 时间
reactive函数
-
作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用
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: 'a3reactive',
setup() {
//数据
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>
相关文章
- vue2和vue3响应式observer的简单实现
- vue3: 用el-dialog展示component(vue@3.0.5 / element-plus@1.0.1-beta.20)
- vue3快速入门:学习Vue3为什么要学习TypeScript?使用 TypeScript 的 10 个理由
- Vue2.7正式发布!代号为:Naruto(火影忍者),原生支持 Composition API +终于可以在Vue2项目中使用Vue3的新特性了,真香~
- vue3 - 定义window 全局变量
- vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/multi-word-component-names)
- Vue3学习笔记(三)——模板语法、Class 与 Style 、ES6新增数组方法、UI库介绍
- 从0搭建Vue3组件库(四): 如何开发一个组件
- 从0搭建Vue3组件库(三): 组件库的环境配置
- vue3 + element plus + vite 迁移实践
- vue3快速入门-Teleport传送(瞬移组件)
- Vue3项目中使用富文本编辑器
- Vue3 reactive / customRef 快速理解掌握
- Vue3 ref/shallowRef/triggerRef三大重要常用ref