vue实现数据

Vue 数据绑定与响应式实现

Vue 通过数据绑定和响应式系统实现数据的动态更新。核心机制包括数据劫持、依赖收集和派发更新。

数据绑定基础

在 Vue 中，可以通过 v-model 指令实现双向数据绑定：

<input v-model="message">
<p>{{ message }}</p>

data() {
  return {
    message: 'Hello Vue!'
  }
}

响应式原理

Vue 2.x 使用 Object.defineProperty 实现响应式：

function observe(data) {
  if (!data || typeof data !== 'object') return
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log('收集依赖')
        return value
      },
      set(newVal) {
        if (newVal !== value) {
          console.log('触发更新')
          value = newVal
        }
      }
    })
  })
}

Vue 3.x 改用 Proxy 实现：

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      track(target, key) // 依赖收集
      return result
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        trigger(target, key) // 触发更新
      }
      return result
    }
  })
}

数组响应式处理

Vue 对数组方法进行了特殊处理：

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method]
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    ob.dep.notify() // 触发更新
    return result
  }
})

计算属性与侦听器

计算属性基于响应式依赖进行缓存：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

侦听器适合执行异步或开销较大的操作：

watch: {
  message(newVal, oldVal) {
    console.log(`消息从 ${oldVal} 变为 ${newVal}`)
  }
}

组件间数据传递

父组件向子组件传递数据：

<child-component :prop-name="parentData"></child-component>

子组件向父组件发射事件：

this.$emit('event-name', payload)

状态管理（Vuex）

对于复杂应用状态管理：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

组合式API（Vue 3）

Vue 3 的 setup 函数提供更灵活的数据管理：

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

export default {
  setup() {
    const count = ref(0)
    const state = reactive({
      name: 'Vue 3'
    })

    const double = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    return {
      count,
      state,
      double,
      increment
    }
  }
}