1.ref函数

作用: 定义一个响应式的数据；
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

App.vue

ref定义基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

ref 对于基本类型的数据确实采用 Object.defineProperty()走get与set走的数据劫持方式；
数据劫持才是响应式的根基，我的劫持到你修改的数据，才能去写一个逻辑更新页面！

<template><h1>一个人的信息</h1><h2>姓名{{ name }}</h2><h2>年龄{{ age }}</h2><button @click="changeInfoHandle">修改个人信息</button>
</template><script>
import { ref } from "vue";
export default {name: "App",setup() {/** * 定义引用对象: *  RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 'ls', _value: 'zs'}*  RefImpl : Reference 引用; Implement 实现。*  * **/ let name = ref("zs");let age = ref("18");// 修改数据 function changeInfoHandle() {name.value = "ls";age.value = "20";console.log(name, age);}return {name,age,changeInfoHandle,};},
};
</script>

ref定义对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

<template><h1>一个人的信息</h1><h2>工作种类: {{ job.type }}</h2><h2> 薪水: {{ job.salary }}</h2><button @click="changeInfoHandle">修改个人信息</button>
</template><script>
import { ref, reactive } from "vue";
export default {name: "App",setup() {    let job = ref({ type: "前端工程师", salary: "30k" });// 修改数据function changeInfoHandle() {job.value.type = 'UI工程师', job.value.salary = '60k'console.log(job);}return {name,age,job,changeInfoHandle,};},
};
</script>

2.reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是"深层次的"。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template><h1>一个人的信息</h1><h2>姓名: {{ person.name }}</h2><h2>年龄: {{ person.age }}</h2><h2>工作种类: {{ person.job.type }}</h2><h2>薪水: {{ person.job.salary }}</h2><h2>测试数据c: {{ person.job.a.b.c }}</h2><h2>爱好: {{ person.hobby }}</h2><button @click="changeInfoHandle">修改个人信息</button>
</template><script>
import { ref, reactive } from "vue";
export default {name: "App",setup() {// reactive() : 处理响应式数据是深层次的; let person = reactive({name : "zs",age :"20",job : {type: "前端工程师",salary: "30k",a: {b: {c: 777}}},hobby: ['抽烟', '喝酒', '烫头']})// 修改数据function changeInfoHandle() {person.name = "ls";person.age = "20";person.job.type = "UI工程师";person.job.salary = "60k";person.job.a.b.c = 999person.hobby[0] = '学习'}return {person,changeInfoHandle,};}
};
</script>

<script>import { reactive } form 'vue'exprot default {name: 'App',setup() {let data = reactive ({person: {},student: {}})return { data }}            }    </script>

3.reactive对比ref

从定义数据角度对比：
- ref用来定义：基本类型数据。
- reactive用来定义：对象（或数组）类型数据。
- 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比：
- ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
- reactive通过使用Es6 新增的构造函数 Proxy 来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
- reactive定义的数据：操作数据与读取数据：均不需要.value。

Day 04-常用Composition API_ref reactive 函数相关推荐

讨论常用的 MySQL 日期函数。
讨论常用的 MySQL 日期函数. 日期函数和运算符用于日期和时间类型的数据进行操作并返回一个结果.以下是 MySQL 中常见的日期函数和运算符: ADDDATE().DATE_ADD(),为日期时间 ...
saltstack常用的模块及函数
saltstack常用的模块及函数 SaltStack模块介绍查看指定模块module的用法一个命令执行多个模块 network模块 network.calc_net network.connec ...
php文件有哪几种,PHP常用的文件操作函数有哪些
PHP常用的文件操作函数有哪些本文主要总结的PHP文件操作函数.当然,这只是部分,还有很多,我没有列出来.欢饮阅读参考! 一 .解析路径: 1 获得文件名: basename(); 给出一个包含有指 ...
python常用函数-Python小白必备的8个最常用的内置函数（推荐）
Python给我们内置了大量功能函数,官方文档上列出了69个,有些是我们是平时开发中经常遇到的,也有一些函数很少被用到,这里列举被开发者使用最频繁的8个函数以及他们的详细用法 print() prin ...
python常用内置函数总结-Python学习教程之常用的内置函数大全
前言内置函数,一般都是因为使用比较频繁或是元操作,所以通过内置函数的形式提供出来.在Python中,python给我们提供了很多已经定义好的函数,这里列出常用的内置函数,分享出来供大家参考学习,下面 ...
[python]开发IC utility 一些常用的方法和函数和语法规则
文章目录字符串的replace 字符串的split 字符串的strip 循环for in 判断语句中的and not re.search与re.match 合并元素为一个字符串判断提供的path是 ...
python 常用内置函数_Python小白必备的8个最常用的内置函数（推荐）
Python给我们内置了大量功能函数,官方文档上列出了69个,有些是我们是平时开发中经常遇到的,也有一些函数很少被用到,这里列举被开发者使用最频繁的8个函数以及他们的详细用法 print() prin ...
C语言再学习 -- 常用头文件和函数（转）
参看:C/C++常用头文件及函数汇总 linux常用头文件如下: POSIX标准定义的头文件 <dirent.h> 目录项 <fcntl.h> 文 ...
Python中常用的高阶函数
Python 中常用的高阶函数 ① filter(function,iterable)filter(function, iterable)filter(function,iterable) 过滤器 ...

Day 04-常用Composition API_ref reactive 函数

1.ref函数

2.reactive函数

3.reactive对比ref

Day 04-常用Composition API_ref reactive 函数相关推荐

最新文章

热门文章