Vue3中数据响应式原理与高效数据操作全解析

const target = {
  name: 'Vue3',
  features: ['Composition API', 'Teleport', 'Fragments']
};
 
const handler = {
  get(target, key, receiver) {
    console.log(`获取属性: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`设置属性: ${key} -> ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};
 
const proxy = new Proxy(target, handler);
 
proxy.name; // 输出: 获取属性: name
proxy.features.push('Custom Renderer'); // 输出: 获取属性: features

import { ref } from 'vue';
 
const count = ref(0); // 创建一个初始值为 0 的响应式数据
console.log(count.value); // 输出: 0
count.value++; // 修改值
console.log(count.value); // 输出: 1

import { reactive } from 'vue';
 
const state = reactive({
  name: 'Vue3',
  features: ['Composition API', 'Teleport']
});
 
state.features.push('Fragments'); // 直接修改数组
console.log(state.features); // 输出: ['Composition API', 'Teleport', 'Fragments']

import { reactive, computed } from 'vue';
 
const state = reactive({
  count: 0
});
 
const doubleCount = computed(() => state.count * 2);
 
console.log(doubleCount.value); // 输出: 0
state.count++;
console.log(doubleCount.value); // 输出: 2

import { ref, watch } from 'vue';
 
const count = ref(0);
 
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});
 
count.value++; // 输出: count 从 0 变为 1

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <input v-model="state.name" placeholder="Enter name" />
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, watch } from 'vue';
 
const count = ref(0);
const state = reactive({ name: 'Vue3' });
 
// 计算属性
const doubleCount = computed(() => count.value * 2);
 
// 监听多个数据源
watch([count, () => state.name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`);
});
 
function increment() {
  count.value++;
}
</script>