简单理解vue中data数据的改变影响视图

简单的理解vue中data数据的改变影响视图

---

前言

这个简化了vue虚拟dom的渲染，为了更好地理解vue中data数据的改变影响视图这句话而写的。

请熟知 Object.defineProperty和原型原型链的知识，闭包也要有所掌握

我们用到的函数

data对象变量	我们需要的数据
updateViews（）方法	简化的渲染方法
observer（）方法	判断元素并且运行绑定Object.defineProperty的方法
defineReactive（）方法	绑定Object.defineProperty的具体操作

监听

渲染方法是固定的所以我们写在前面

updateViews方法

function updateViews () {
  console.log('数据更新了');
}

普通监听

我们首先创建一个简单的data数据,同时调用observer()方法

const data = {
    nihao: '123'，
    num: 2
}

observer(data)

写入observer的方法

function observer (data) {

  for (const key in data) {
    defineReactive(data, key, data[key])
  }
}

写入defineReactive方法

function defineReactive (data, key, value) {
  Object.defineProperty(data,key,{
    get() {
      return value
    },
    set(nwevalue) {
      if (value !== nwevalue) {
        updateViews()
        value = nwevalue
      }
    }
  })
}

请结合defineReactive和observer一起观看

• 首先我们创建了data数据并且同时调用observer(data)方法，将我们的创建的data传参传过去
• observer()方法接收到我们的data，然后进行for循环来为我们data每个元素绑定Object.defineProperty。
• 可以看到我们再Object.defineProperty里面的set方法中调用了， updateViews()渲染方法，这样才实现了，数据更新视图的要求。

但是现在有两个问题，如果data中的数据也是的对象，我们如何监听data对象中的对象中暑数据呢，说到了这里大家是不是想到了递归，没错我来进行代码演示

对象监听（深度监听）

data数据

const data = {
  nihao: '123',
  list: {
    nihao: '15'
  }
}

// 调用方法
observer(data)

observer的方法

function observer (data) {
  if (typeof data !== 'object' || data ===null) {
    return data;
  }

  for (const key in data) {
    defineReactive(data, key, data[key])
  }
}

defineReactive方法

function defineReactive (data, key, value) {
  // 深度监听
  observer(value)

  Object.defineProperty(data,key,{
    get() {
      return value
    },
    set(nwevalue) {
      if (value !== nwevalue) {
        updateViews()
        value = nwevalue
      }
    }
  })
}

这里我们用到了递归

• 在observer加入了一个判断条件，如果我们传入的data他不是一个对象或者是空的，他就不用执行我们的递归了。因为根本没有必要。
• defineReactive方法中我们运用到了递归的知识。defineReactive的递归和observer的判断，打出了一套很好的配合。

又有新的问题，我们不能监听数组元素的增删改，所以这个也是Object.defineProperty的一个弊端

数组监听

时间太晚了现在凌晨2.30了，等我更新