目录
- 前言
- 1. 基本知识
- 2. Demo
前言
由于新项目涉及Vue3,本着探究问题的本质研究所不会的疑问
1. 基本知识
ref 是 Vue 3 中用于创建响应式数据的函数
- 接收一个初始值并返回一个包含了该值的响应式引用对象
- 与 Vue 2.x 中的 data 属性不同,ref 返回的是一个对象,而不是一个直接的值
主要的用法如下:
import { ref } from 'vue';
// 创建一个 ref
const count = ref(0);
// 读取 ref 的值
console.log(count.value); // 输出:0
// 修改 ref 的值
count.value++;
console.log(count.value); // 输出:1
具体的作用如下:
-
创建响应式数据:通过 ref 创建的数据是
响应式
的,当数据发生变化时,相关的视图会自动更新 -
引用数据的访问和修改:
.value 属性可以访问和修改 ref 的值
这种方式让数据的访问和修改更加直观和一致 -
在模板中使用:可以直接在模板中使用 ref 创建的响应式数据,而不需要像 Vue 2.x 中一样通过 this 访问
-
跟踪数据变化:Vue 3 中的 ref 通过 ES6 的 Proxy 实现,能够跟踪数据的读取和修改,从而实现数据的响应式更新
2. Demo
示例简易的Demo如下:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 创建一个 ref
const count = ref(0);
// 定义一个增加 count 的方法
const increment = () => {
count.value++;
};
// 返回模板中需要用到的数据和方法
return {
count,
increment,
};
},
};
</script>
在实战中常用如下: