Vue响应式原理(浅显理解与MVVM的实现)

Vue响应式原理

  • MVVM的设计模式:M是Model数据层,V是View视图层,VM则是ViewModel。
  • MVVM实现方式:V层通过DOM Listeners来通知VM层修改数据,M层则通过Data Bindings来通知VM层让V层更新显示内容。
    Vue响应式原理(浅显理解与MVVM的实现)_第1张图片
  • 具体实现方式
  1. 数据绑定(Model–>VM–>View):通过Object.defineProperty(obj,property, {get,set})来实现。
    • 具体过程:当View层通过ViewModel获取name时,让其返回Model层的model.name,在控制台修改vm.name时,让model.name改变的同时,让View层更新内容。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="displayDiv"></div>
</body>
<script>
  let $displayDiv = document.getElementById('displayDiv');
  const vm = {}
  const model = {
  	name: 'cxk'
  }
  Object.defineProperty(vm, 'name', {
    get: function() {
      return model.name
    },
    set: function(newVal) {
      obj.name = newVal
      $displayDiv.innerText = newVal
    }
  })
  // 一开始让View层显示数据内容
  $displayDiv.innerText = vm.name
</script>
</html>

2、DOM事件监听(View -->VM–>Model):通过在View让元素触发事件,通知VM改变Model数据。

$displayDiv.onclick = function() {
	vm.name = 'czg'
}
  • 最终代码:先遍历model中的所有属性,在VM层生成对应的getter和setter。Model层通过VM层让View层获取数据并显示内容(且数据改变时,View内容也会及时更新),当View的input内容发生改变后,触发onblur事件,通知VM层让Model修改内部数据。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input id="input" type="text"/>
</body>
<script>
// 模拟实现数据bandings(模型层通过vm来控制视图层)
  const vm = {},model = {
    age: 23,
    name: 'caixukun'
  }
  let $input = document.getElementById('input')
  // 遍历生成setter和getter
  for (let key in model) {
    Object.defineProperty(vm, key, {
      get: function () {
        return model[key]
      },
      set: function (newVal) {
        model[key] = newVal
        $input.value = `${vm.name},${vm.age}`//input输入格式name,age(中间逗号隔开)
      }
    })
    $input.value = `${vm.name},${vm.age}`
    // 通过事件触发的形式,通知vm层让Model数据改变
    $input.onblur = function(){
      let temp = this.value.split(",")
      vm.name = temp[0]
      vm.age = +temp[1]
    }
  }
</script>
</html>

总结:

  • MVVM实现方式:VM充当连接作用,View层通过事件监听的方式改变Model层,Model层通过数据绑定来跟View层建立关联,两个方式都需要经过VM层。数据绑定利用Object.defineProperty处理数据为getter、setter,进而建立绑定关系,事件监听则通过事件处理程序触发vm的setter进而改变Model的数据。
  • Vue中的MVVM实现方式(个人理解,有误的话,欢迎指正):Vue采用观察者模式,数据是被观察的一方,只要有观察者获取数据,就会触发getter,从而建立数据与观察者之间依赖关系。依赖关系会被收集到watcher中的deps对象中。当数据改变时,触发setter,通过notify函数通知watcher遍历依赖项,执行相应的操作(更新视图或数值计算等)。

你可能感兴趣的:(笔记)