vue实现数据更新
Vue 数据更新实现方式
Vue 提供了多种方式实现数据更新，核心机制基于响应式系统。以下是常见方法：
直接修改数据属性
对于已声明在 data 中的属性，直接赋值即可触发更新：
data() {
return {
message: 'Hello'
}
},
methods: {
updateMessage() {
this.message = 'Updated' // 自动触发视图更新
}
}使用 Vue.set
对于动态添加的响应式属性或数组元素，需使用 Vue.set（Vue 2）或 this.$set：
// 对象属性添加
this.$set(this.someObject, 'newProp', value)
// 数组元素修改
this.$set(this.someArray, index, newValue)数组更新方法
Vue 对以下数组方法进行了响应式封装：
this.items.push(newItem) // 末尾添加
this.items.pop() // 移除末尾
this.items.shift() // 移除首项
this.items.unshift(newItem) // 首项添加
this.items.splice(index, 1, newItem) // 替换元素
this.items.sort() // 排序
this.items.reverse() // 反转异步更新处理
DOM 更新是异步执行的，需使用 nextTick 访问更新后的 DOM：
this.message = 'Updated'
this.$nextTick(() => {
// DOM 已更新
console.log(this.$el.textContent)
})计算属性更新
依赖数据变化时自动重新计算：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}监听器响应变化
通过 watch 监听特定数据变化：
watch: {
message(newVal, oldVal) {
console.log('Message changed:', newVal)
}
}强制更新
极端情况下可使用 $forceUpdate（不推荐常规使用）：
this.$forceUpdate() // 强制重新渲染组件注意事项
- 对象新增属性必须使用
Vue.set保证响应式 - 数组直接通过索引修改不会触发视图更新
- 嵌套对象需确保所有层级都是响应式的
- 避免在模板中使用复杂表达式，应使用计算属性
