vue数据实现

Vue 数据实现方法

Vue 提供了多种方式来实现数据的响应式绑定和管理，以下是常见的几种方法：

使用 data 选项 在 Vue 组件中，可以通过 data 选项定义响应式数据。这些数据会在组件实例化时被转换为 getter/setter，从而实现响应式更新。

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  }
}

计算属性 (computed) 计算属性是基于它们的响应式依赖进行缓存的，只有在相关依赖发生改变时才会重新求值。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

侦听器 (watch) 当需要在数据变化时执行异步或开销较大的操作时，可以使用侦听器。

export default {
  data() {
    return {
      question: '',
      answer: 'I cannot give you an answer until you ask a question!'
    }
  },
  watch: {
    question(newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  }
}

Vuex 状态管理 对于大型应用，可以使用 Vuex 进行集中式状态管理。

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)

Composition API Vue 3 引入了 Composition API，提供了更灵活的逻辑复用方式。

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

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })

    function increment() {
      count.value++
    }

    return {
      count,
      doubleCount,
      increment
    }
  }
}

响应式原理

Vue 使用 Object.defineProperty (Vue 2) 或 Proxy (Vue 3) 来实现数据的响应式：

Vue 2 实现

Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter() {
    // 收集依赖
    return val
  },
  set: function reactiveSetter(newVal) {
    // 触发更新
    val = newVal
  }
})

Vue 3 实现

const observed = new Proxy(obj, {
  get(target, key, receiver) {
    // 收集依赖
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    // 触发更新
    return Reflect.set(target, key, value, receiver)
  }
})

数据更新注意事项

数组变更检测需要注意特殊方法，Vue 对以下数组方法进行了包裹：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

对于对象，Vue 无法检测到属性的添加或删除，需要使用 Vue.set 或 this.$set 方法。

this.$set(this.someObject, 'newProperty', 'value')

性能优化建议

避免在模板中使用复杂表达式，尽量使用计算属性。对于大数据量的列表渲染，可以使用虚拟滚动技术。合理使用 v-once 指令标记不会改变的内容。