vue3-04vue3中ref函数(定义一个响应式的数据)

1.前言

作用: 定义一个响应式的数据

语法: const xxx = ref(initValue)

。创建一个包含响应式数据的引用对象 (reference对象，简称ref对象) 。JS中操作数据: xxx .value 。模板中读取数据: 不需要.value，直接: <div>{xxx]}</div>

备注: 。接收的数据可以是: 基本类型、也可以是对象类型 。基本类型的数据: 响应式依然是靠 object.defineProperty()的 get 与set 完成的。 。对象类型的数据:内部“求助”了Vue3.0中的一个新函数- reactive 函数

2.例子 2.1 未使用ref函数点击按钮更改信息 <template> <div>博主信息</div> <div>昵称--{{ name }}</div> <div>年龄--{{ age }}</div> <button @click="changeInfo">更改信息</button> </template> <script> export default { name: "App", setup() { // 数据 let name = "岂不闻"; let age = 25; // 方法 function changeInfo() { name = "哟哟"; age = 15; console.log("更改", name, age); } return { name, age, changeInfo, }; }, }; </script> <style> </style>

未双向绑定渲染 

2.2 使用ref

使用get与set进行响应式处理（数据劫持）

2.2.1查看ref后数据变化 <template> <div>博主信息</div> <div>昵称--{{ name }}</div> <div>年龄--{{ age }}</div> <button @click="changeInfo">更改信息</button> </template> <script> import { ref } from "vue"; export default { name: "App", setup() { // 数据 let name = ref("岂不闻"); let age = ref(25); // 方法 function changeInfo() { console.log("更改", name, age); } return { name, age, changeInfo, }; }, }; </script> <style> </style>

引入实例对象 

2.2.2读取ref后的数据  2.2.2.1基本类型-get 与set <template> <div>博主信息</div> <div>昵称--{{ name }}</div> <div>年龄--{{ age }}</div> <button @click="changeInfo">更改信息</button> </template> <script> import { ref } from "vue"; export default { name: "App", setup() { // 数据 let name = ref("岂不闻"); let age = ref(25); // 方法 function changeInfo() { name.value = "哟哟"; age.value = 15; console.log("更改", name, age); } return { name, age, changeInfo, }; }, }; </script> <style> </style>

 更改成功

2.2.2.2对象数据-proxy代理对象封装在vue3中的reactive函数中

在模板中无需.value

<template> <div>工作-{{ job.type }}--工龄{{ job.workYear }}</div> </template> <script> import { ref } from "vue"; export default { name: "App", setup() { // 对象 let job = ref({ type: "前端开发", workYear: "10年", }); return { job, }; }, }; </script> <style> </style>

修改对象中的属性，第一层.value

<template> <div>博主信息</div> <div>工作-{{ job.type }}--工龄{{ job.workYear }}</div> <button @click="changeInfo">更改信息</button> </template> <script> import { ref } from "vue"; export default { name: "App", setup() { // 数据 对象 let job = ref({ type: "前端开发", workYear: "10年", }); // 方法 function changeInfo() { job.value.type = "java开发"; job.value.workYear = "6年"; console.log("更改", job.type, job.workYear); } return { job, changeInfo, }; }, }; </script> <style> </style>