Vue 3 与 Vue 2 的架构差异对比 ​

function defineReactive(obj, key, val) {
  // 每个属性都有自己的依赖收集器
  const dep = new Dep()
  
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集：当属性被读取时
      // 将当前正在执行的 watcher 添加到依赖列表
      dep.depend()
      return val
    },
    set(newVal) {
      // 值相同则跳过
      if (newVal === val) return
      // 更新闭包中的值
      val = newVal
      // 触发更新：通知所有依赖这个属性的 watcher
      dep.notify()
    }
  })
}

// 使用时需要对每个属性单独调用
// defineReactive(obj, 'name', obj.name)
// defineReactive(obj, 'age', obj.age)
// 这就是为什么 Vue 2 需要在初始化时遍历整个对象

const state = Vue.observable({ name: 'Vue' })
state.version = 3  // 不会触发更新！

Vue.set(state, 'version', 3)  // 这样才能触发更新

const state = Vue.observable({ list: [1, 2, 3] })
state.list[0] = 10  // 不会触发更新！

state.list.push(4)      // ✅ 触发更新
state.list.splice(0, 1, 10)  // ✅ 触发更新
state.list[0] = 10      // ❌ 不触发更新

function reactive(target) {
  return new Proxy(target, {
    // get 拦截器：拦截所有属性读取，包括新增属性
    get(target, key, receiver) {
      // 收集依赖：记录"谁在读取这个属性"
      track(target, key)
      
      // 使用 Reflect 保证正确的 this 指向
      const result = Reflect.get(target, key, receiver)
      
      // 惰性代理：只有真正访问到嵌套对象时才创建代理
      // 对比 Vue 2 的递归遍历，这里的性能更好
      if (typeof result === 'object' && result !== null) {
        return reactive(result)
      }
      return result
    },
    
    // set 拦截器：拦截所有属性设置，包括新增属性
    set(target, key, value, receiver) {
      // 先执行实际的赋值操作
      const result = Reflect.set(target, key, value, receiver)
      // 触发更新：通知所有订阅了这个属性的 effect
      trigger(target, key)
      return result
    }
    // Proxy 还支持 deleteProperty、has 等拦截器
    // Vue 3 利用这些实现了对属性删除、in 操作符的响应式
  })
}

const state = reactive({ name: 'Vue' })
state.version = 3  // ✅ 自动触发更新

const state = reactive({ list: [1, 2, 3] })
state.list[0] = 10  // ✅ 自动触发更新
state.list.length = 0  // ✅ 清空数组也能检测

export default {
  data() {
    return {
      count: 0,
      user: null
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    },
    async fetchUser() {
      this.user = await api.getUser()
    }
  },
  mounted() {
    this.fetchUser()
  }
}

import { ref, computed, onMounted } from 'vue'

// 把"计数器"相关的逻辑封装成一个函数
// 命名约定：以 use 开头，称为"组合式函数"（Composable）
function useCounter() {
  // ref 创建响应式引用，.value 访问/修改值
  const count = ref(0)
  
  // computed 创建计算属性，自动追踪依赖
  const double = computed(() => count.value * 2)
  
  // 普通函数，操作响应式数据
  const increment = () => count.value++
  
  // 返回需要暴露的状态和方法
  return { count, double, increment }
}

// 把"用户"相关的逻辑封装成另一个函数
function useUser() {
  const user = ref(null)
  
  async function fetchUser() {
    user.value = await api.getUser()
  }
  
  // 生命周期钩子也可以在组合式函数中使用
  onMounted(fetchUser)
  
  return { user, fetchUser }
}

export default {
  setup() {
    // 在组件中组合多个功能
    // 数据来源清晰：counter 来自 useCounter
    const counter = useCounter()
    // userState 来自 useUser
    const userState = useUser()
    
    // 暴露给模板
    return { ...counter, ...userState }
  }
}

// 优势：
// 1. 相关代码在一起（useCounter 里全是计数器逻辑）
// 2. 可复用（useCounter 可以在任何组件中使用）
// 3. 类型安全（每个变量类型明确，TypeScript 完美支持）

import Vue from 'vue'

Vue.component('MyComponent', { /* ... */ })
Vue.mixin({ /* ... */ })
Vue.use(VueRouter)
Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store
})

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.component('MyComponent', { /* ... */ })
app.use(VueRouter)
app.use(Vuex)

app.mount('#app')

const app1 = createApp(App1)
app1.config.errorHandler = handler1

const app2 = createApp(App2)
app2.config.errorHandler = handler2  // 互不影响

// Vue 2 编译输出
function render() {
  // 每次 render 都会创建新的 VNode 对象
  // 即使 'static' 永远不会变化
  return h('div', [
    h('span', 'static'),  // 每次都创建新对象，浪费内存
    h('span', this.dynamic)
  ])
}
// 问题：运行时无法知道哪些是静态的，必须全量 Diff

// Vue 3 编译输出
// 静态节点被"提升"到 render 函数外部
// 整个应用生命周期只创建一次
const _hoisted = h('span', 'static')

function render(ctx) {
  return h('div', [
    _hoisted,  // 直接复用同一个对象，引用不变
    h('span', ctx.dynamic)
  ])
}
// 好处：
// 1. 节省内存（不重复创建）
// 2. Diff 时可以直接跳过（引用相同 = 内容相同）

// 编译器分析模板，知道只有 class 是动态的
// 于是生成 PatchFlag = 2（CLASS 常量）
h('span', { class: dynamicClass }, 'text', 2 /* CLASS */)

// PatchFlags 常量定义（简化）：
// TEXT = 1      // 只有文本是动态的
// CLASS = 2     // 只有 class 是动态的
// STYLE = 4     // 只有 style 是动态的
// PROPS = 8     // 有动态属性（非 class/style）
// FULL_PROPS = 16  // 有动态 key，需要完整 Diff

// Vue 2
const state = Vue.observable({ list: [] })
state.list[0] = 'test'
console.log(state.list)  // 观察是否触发更新

// Vue 3
const state = reactive({ list: [] })
state.list[0] = 'test'
console.log(state.list)  // 观察是否触发更新