浅谈 Vue2 数据响应式

在 excel 中使用公式时，比如sum(A1, B1)，改变 A1 或 B1 单元格的值，公式的结果也会随之改变，这就是响应式的一种实现。

响应式

当 Vue 实例的数据被修改时，视图就会重新渲染，出现被修改后的内容。这就是Vue的数据响应式。

let myData = {n:0}
let data = proxy({ data:myData })

function proxy({data}){
    // 下面应该遍历并对所有属性进行操作
    
    // 监听n
    let value = data.n
    Object.defineProperty(data, 'n', {
        get(){
            // 做点什么
            return value
        },
        set(newValue){
            // 做点什么
            value = newValue
        }
    })
    
    // 创建代理对象
    const obj = {}
    Object.defineProperty(obj, 'n', {
        get(){
            // 做点什么
            return data.n
        },
        set(){
            // 做点什么
            data.n = value
        }
    }
    
    return obj    // 返回代理对象
}

这样无论修改 mydata 还是 data 的属性时，都可以知道属性被修改了，并且做出响应，例如重新渲染视图。

一些问题

给 Vue 实例新增属性的时候，需要通过Vue.set()或者vm.$set()，否则 Vue 将不能检测到。

data.a = 1                // 无法做出响应
data.$set(data, 'b', 1)   // 可以做出响应
console.log(Vue.set === data.$set) // true

对于数组也存在类似的问题：

1. 利用索引直接设置数组项
2. 修改数组长度 对于这两个问题，可以用Vue.set或者 Vue 提供的7个变异方法来对数组进行操作：

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