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 指令标记不会改变的内容。
