ref
当涉及到 Vue 3 中的
ref相关的代码案例时，有许多可能的用途和示例。这里提供十个经典的ref相关代码案例供参考：
1. 创建一个响应式的引用
2. 在模板中访问引用的值
<template>
<div>
<p>Count: {
{ count }}</p>
<button @click="increaseCount">Increase</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increaseCount() {
count.value++;
}
return {
count,
increaseCount
};
}
};
</script>
3. 使用 ref 设置和访问 DOM 元素的引用
<template>
<div>
<button ref="myButton" @click="handleClick">Click Me</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const myButton = ref(null);
function handleClick() {
myButton.value.textContent = 'Button clicked!';
}
return {
myButton,
handleClick
};
}
};
</script>
4. 在子组件中使用 ref 获取父组件的引用
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent :parentRef="parentRef" />
<button @click="changeValue">Change Value</button>
</div>
</template>
<script>
import {
ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent },
setup() {
const parentRef = ref('Initial Value');
function changeValue() {
parentRef.value = 'New Value';
}
return {
parentRef,
changeValue
};
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>Parent Value: {
{ parentRef }}</p>
</div>
</template>
<script>
export default {
props: ['parentRef'],
setup() {
// 使用 parentRef 做一些其他操作
}
};
</script>
5. 使用 toRef 创建一个只读引用
<template>
<div>
<p>Original Value: {
{ originalValue }}</p>
<p>Ref Value: {
{ refValue }}</p>
<button @click="changeValue">Change Value</button>
</div>
</template>
<script>
import {
reactive, ref, toRef } from 'vue';
export default {
setup() {
const data = reactive({
value: 'Original'
});
const originalValue = toRef(data, 'value');
const refValue = ref(originalValue.value);
function changeValue() {
data.value = 'New Value';
}
return {
originalValue,
refValue,
changeValue
};
}
}
</script>
6. 使用 computed 处理计算属性
<template>
<div>
<p>Original Value: {
{ originalValue }}</p>
<p>Reversed Value: {
{ reversedValue }}</p>
<button @click="reverseValue">Reverse</button>
</div>
</template>
<script>
import {
ref, computed } from 'vue';
export default {
setup() {
const originalValue = ref('Hello');
const reversedValue = computed(() => originalValue.value.split('').reverse().join(''));
function reverseValue() {
originalValue.value = reversedValue.value;
}
return {
originalValue,
reversedValue,
reverseValue
};
}
}
</script>
7. 使用 watch 监听引用的变化
<template>
<div>
<input v-model="text" />
<p>Text Length: {
{ textLength }}</p>
</div>
</template>
<script>
import {
ref, watch } from 'vue';
export default {
setup() {
const text = ref('');
const textLength = ref(0);
watch(text, newValue => {
textLength.value = newValue.length;
});
return {
text,
textLength
};
}
}
</script>
8. 使用 onMounted 在组件挂载后访问 DOM 元素
<template>
<div ref="myElement">
<!-- ... -->
</div>
</template>
<script>
import {
onMounted, ref } from 'vue';
export default {
setup() {
const myElement = ref(null);
onMounted(() => {
console.log(myElement.value); // 访问 DOM 元素
});
return {
myElement
};
}
}
</script>
9. 使用 ref 创建一个包含对象的引用
<template>
<div>
<p>Username: {
{ user.username }}</p>
<p>Email: {
{ user.email }}</p>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const user = ref({
username: 'John',
email: '[email protected]'
});
return {
user
};
}
}
</script>
10. 使用 toRefs 将响应式对象的属性解构为引用
<template>
<div>
<p>Username: {
{ username }}</p>
<p>Email: {
{ email }}</p>
</div>
</template>
<script>
import {
reactive, toRefs } from 'vue';
export default {
setup() {
const user = reactive({
username: 'John',
email: '[email protected]'
});
const {
username, email } = toRefs(user);
return {
username,
email
};
}
}
</script>
reactive
当你学习 Vue 3 的
reactive时，以下是十个与之相关的代码案例，展示了如何创建响应式对象，更新对象的值以及在组件之间共享响应式对象：
1. 创建空的响应式对象
import {
reactive } from 'vue';
const data = reactive({
});
2. 创建具有初始值的响应式对象
import {
reactive } from 'vue';
const data = reactive({
count: 0 });
3. 更新响应式对象的属性值
import {
reactive } from 'vue';
const data = reactive({
count: 0 });
data.count++; // 自动触发重新渲染
4. 创建嵌套的响应式对象
import {
reactive } from 'vue';
const data = reactive({
user: {
name: 'John',
age: 25
}
});
5. 使用解构赋值访问和更新响应式对象的属性值
import {
reactive } from 'vue';
const data = reactive({
count: 0 });
const {
count } = data;
console.log(count); // 输出: 0
count++; // 更新值，并触发重新渲染
6. 在组件之间共享响应式对象
// store.js
import {
reactive } from 'vue';
export const store = reactive({
count: 0 });
// ComponentA.vue
import {
store } from './store.js';
console.log(store.count); // 输出: 0
store.count++; // 更新值，并触发重新渲染
// ComponentB.vue
import {
store } from './store.js';
console.log(store.count); // 输出最新的值
7. 使用响应式对象作为组件的初始数据
import {
reactive } from 'vue';
export default {
data() {
return {
user: reactive({
name: 'John', age: 25 })
};
}
}
8. 在计算属性中使用响应式对象的属性
import {
reactive, computed } from 'vue';
const data = reactive({
count: 0 });
const doubledCount = computed(() => data.count * 2);
console.log(doubledCount.value); // 输出: 0
data.count++;
console.log(doubledCount.value); // 输出最新的值
9. 在setup函数中使用reactive创建响应式对象
import {
reactive, onMounted } from 'vue';
export default {
setup() {
const data = reactive({
count: 0 });
onMounted(() => {
data.count = 10; // 更新值，并触发重新渲染
});
return {
data
};
}
}
10. 在响应式对象中使用ref来创建值的引用
import {
reactive, ref } from 'vue';
const data = reactive({
name: ref('John'), age: ref(25) });
console.log(data.name.value); // 输出: 'John'
console.log(data.age.value); // 输出: 25
data.name.value = 'Jane'; // 更新值，并触发重新渲染