vue数据实现
Vue 数据实现方法
Vue.js 提供了多种方式来实现数据的响应式绑定和管理，以下是一些核心方法：
数据绑定
使用 v-model 指令实现表单元素与数据的双向绑定：
<input v-model="message">
<p>{{ message }}</p>data() {
return {
message: ''
}
}计算属性
通过 computed 定义基于依赖数据变化的计算属性：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}侦听器
使用 watch 监听数据变化并执行副作用：
watch: {
message(newVal, oldVal) {
console.log(`消息从 ${oldVal} 变为 ${newVal}`)
}
}响应式原理
Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据响应式：
// Vue 2 实现
const data = { foo: 'bar' }
Object.defineProperty(data, 'foo', {
get() {
console.log('获取数据')
return value
},
set(newValue) {
console.log('设置数据')
value = newValue
}
})数组更新检测
Vue 对数组方法进行了包裹以实现响应式更新：
// 这些方法会触发视图更新
this.items.push(newItem)
this.items.splice(index, 1)深层响应式
嵌套对象需要预先定义所有属性才能保持响应式：
data() {
return {
obj: {
a: 1 // 必须预先定义
}
}
}
// 动态添加非响应式属性
this.$set(this.obj, 'b', 2)状态管理
对于复杂应用，可以使用 Vuex 进行集中式状态管理：
// store.js
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})组合式 API
Vue 3 的 setup() 函数提供更灵活的逻辑组织方式：
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, double, increment }
}
}
