成都铁路局贵阳建设指挥部网站天津百度推广排名

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>