vue中的数据响应化

最新推荐文章于 2024-04-29 10:42:46 发布

javascript_good

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量200

点赞数

分类专栏：编程语言文章标签： vue.js

本文链接：https://blog.csdn.net/javascript_good/article/details/131245401

版权

编程语言专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、Vue的设计思想
MVVM框架的三要素：数据响应式、模板引擎及其渲染
数据响应式：监听数据变化并在视图中更新

Object.defineProperty()
Proxy

模版引擎：提供描述视图的模版语法

插值：{{}}
指令：v-bind，v-on，v-model，v-for，v-if

渲染：如何将模板转换为html

模板 => vdom => dom

2、数据响应式原理
数据变更能够响应在视图中，就是数据响应式。vue2中利用 Object.defineProperty() 实现变更检
测
在这里插入图片描述
简单实现

const obj = {}
function defineReactive(obj, key, val) {
 Object.defineProperty(obj, key, {
  get() {
   console.log(`get ${key}:${val}`);   
   return val
 },
  set(newVal) {
   if (newVal !== val) {
    console.log(`set ${key}:${newVal}`);
    val = newVal
  }
 }
})
}
defineReactive(obj, 'foo', 'foo')
obj.foo
obj.foo = 'foooooooooooo'

结合视图

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
 <div id="app"></div>
 <script>
  const obj = {}
  function defineReactive(obj, key, val) {
   Object.defineProperty(obj, key, {
    get() {
     console.log(`get ${key}:${val}`);
     return val
   },
    set(newVal) {
     if (newVal !== val) {      
      val = newVal
      update()
    }
   }
  })
 }
  defineReactive(obj, 'foo', '')
  obj.foo = new Date().toLocaleTimeString()
  function update() {
   app.innerText = obj.foo
 }
  setInterval(() => {
   obj.foo = new Date().toLocaleTimeString()
 }, 1000);
 </script>
</body>
</html>

遍历需要响应化的对象

// 对象响应化：遍历每个key，定义getter、setter
function observe(obj) {
 if (typeof obj !== 'object' || obj == null) {
  return
}
 Object.keys(obj).forEach(key => {
  defineReactive(obj, key, obj[key])
})
}
const obj = {foo:'foo',bar:'bar',baz:{a:1}}
observe(obj)
obj.foo
obj.foo = 'foooooooooooo'
obj.bar
obj.bar = 'barrrrrrrrrrr'
obj.baz.a = 10 // 嵌套对象no ok

解决嵌套对象问题

function defineReactive(obj, key, val) {
  observe(val)
  Object.defineProperty(obj, key, {

解决赋的值是对象的情况

obj.baz = {a:1}
obj.baz.a = 10 // no ok

set(newVal) {
  if (newVal !== val) {
    observe(newVal) // 新值是对象的情况
    notifyUpdate()

如果添加/删除了新属性无法检测

obj.dong = 'dong'
obj.dong // 并没有get信息

function set(obj, key, val) {
 defineReactive(obj, key, val)
}

测试

set(obj, 'dong', 'dong')
obj.dong

defineProperty() 不支持数组
3、Vue中的数据响应化
目标代码
kvue.html

<!DOCTYPE html>
<html lang="en">
<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="app">
  <p>{{counter}}</p>
 </div>
 <script src="node_modules/vue/dist/vue.js"></script>
 <script>
  const app = new Vue({
   el:'#app',
   data: {
    counter: 1
  },
 })
  setInterval(() => {
   app.counter++
 }, 1000);
 
 </script>
</body>
</html>

原理分析

new Vue() 首先执行初始化，对data执行响应化处理，这个过程发生在Observer中
同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在
Compile中
同时定义一个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
由于data的某个key在一个视图中可能出现多次，所以每个key都需要一个管家Dep来管理多个
Watcher
将来data中数据一旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

在这里插入图片描述
涉及类型介绍

KVue：框架构造函数
Observer：执行数据响应化（分辨数据是对象还是数组）
Compile：编译模板，初始化视图，收集依赖（更新函数、watcher创建）
Watcher：执行更新函数（更新dom）
Dep：管理多个Watcher，批量更新

KVue
框架构造函数：执行初始化
执行初始化，对data执行响应化处理，kvue.js

function observe(obj) {
 if (typeof obj !== 'object' || obj == null) {
  return
}
 new Observer(obj)
}
function defineReactive(obj, key, val) {}
class KVue {
 constructor(options) {
  this.$options = options;
  this.$data = options.data;
  observe(this.$data)
}
}
class Observer {
 constructor(value) {
  this.value = value
  this.walk(value);
}
 walk(obj) {
  Object.keys(obj).forEach(key => {
   defineReactive(obj, key, obj[key])
 })
}
}

为$data做代理

class KVue {
 constructor(options) {
  // 。。。
  proxy(this, '$data')
}
}
function proxy(vm) {
 Object.keys(vm.$data).forEach(key => {
  Object.defineProperty(vm, key, {
   get() {
    return vm.$data[key];
  },
  set(newVal) {
    vm.$data[key] = newVal;
  }
 });
}) 
}

编译 - Compile
编译模板中vue模板特殊语法，初始化视图、更新视图
初始化视图
根据节点类型编译，compile.js

class Compile {
 constructor(el, vm) {
  this.$vm = vm;
  this.$el = document.querySelector(el);
  if (this.$el) {
   this.compile(this.$el);
 }
}
 compile(el) {
  const childNodes = el.childNodes;
  Array.from(childNodes).forEach(node => {
   if (this.isElement(node)) {
    console.log("编译元素" + node.nodeName);
  } else if (this.isInterpolation(node)) {
    console.log("编译插值文本" + node.textContent);
  }
   if (node.childNodes && node.childNodes.length > 0) {
     this.compile(node);
  }
 });
}
isElement(node) {
  return node.nodeType == 1;
}
 isInterpolation(node) {
  return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
}

编译插值，compile.js

compile(el) {
  // ...
   } else if (this.isInerpolation(node)) {
      // console.log("编译插值文本" + node.textContent);
      this.compileText(node);
   }
 });
}
compileText(node) {
  console.log(RegExp.$1);
  node.textContent = this.$vm[RegExp.$1];
}

编译元素

compile(el) {
  //...
  if (this.isElement(node)) {
    // console.log("编译元素" + node.nodeName);
    this.compileElement(node)
 }  
}
compileElement(node) {
  let nodeAttrs = node.attributes;
  Array.from(nodeAttrs).forEach(attr => {
    let attrName = attr.name;
    let exp = attr.value;
    if (this.isDirective(attrName)) {
      let dir = attrName.substring(2);
      this[dir] && this[dir](node, exp);
   }
 });
}
isDirective(attr) {
  return attr.indexOf("k-") == 0;
}
text(node, exp) {
  node.textContent = this.$vm[exp]; 
}

k-html

html(node, exp) {
node.innerHTML = this.$vm[exp]
}

依赖收集
视图中会用到data中某key，这称为依赖。同一个key可能出现多次，每次都需要收集出来用一个
Watcher来维护它们，此过程称为依赖收集。
多个Watcher需要一个Dep来管理，需要更新时由Dep统一通知。
看下面案例，理出思路：

new Vue({
  template:
    `<div>
      <p>{{name1}}</p>
      <p>{{name2}}</p>
<p>{{name1}}</p>
    <div>`,
  data: {
    name1: 'name1',
    name2: 'name2'
 }
});

实现思路

defineReactive时为每一个key创建一个Dep实例
初始化视图时读取某个key，例如name1，创建一个watcher1
由于触发name1的getter方法，便将watcher1添加到name1对应的Dep中
当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新

创建Watcher，kvue.js

const watchers = [];//临时用于保存watcher测试用
// 监听器：负责更新视图
class Watcher {
 constructor(vm, key, updateFn) {
  // kvue实例
  this.vm = vm;
  // 依赖key
  this.key = key;
  // 更新函数
  this.updateFn = updateFn;
  // 临时放入watchers数组
  watchers.push(this)
}
 // 更新
 update() {
  this.updateFn.call(this.vm, this.vm[this.key]);
}
}

编写更新函数、创建watcher

// 调用update函数执插值文本赋值
compileText(node) {
  // console.log(RegExp.$1);
  // node.textContent = this.$vm[RegExp.$1];
  this.update(node, RegExp.$1, 'text')
}
text(node, exp) {
  this.update(node, exp, 'text')
}
html(node, exp) {
  this.update(node, exp, 'html')
}
update(node, exp, dir) {
  const fn = this[dir+'Updater']
  fn && fn(node, this.$vm[exp])
  new Watcher(this.$vm, exp, function(val){
    fn && fn(node, val)
 })
}
textUpdater(node, val) {
  node.textContent = val;  
}
htmlUpdater(node, val) {
  node.innerHTML = val
}

声明Dep

class Dep {
  constructor () {
    this.deps = []
 }
  addDep (dep) {
    this.deps.push(dep)
 }
  notify() {
    this.deps.forEach(dep => dep.update());
 }
}

创建watcher时触发getter

class Watcher {
 constructor(vm, key, updateFn) {
  Dep.target = this;
  this.vm[this.key];
  Dep.target = null;
}
}

依赖收集，创建Dep实例

defineReactive(obj, key, val) {
 this.observe(val);
 
 const dep = new Dep()
 Object.defineProperty(obj, key, {
  get() {
   Dep.target && dep.addDep(Dep.target);
   return val
 },
  set(newVal) {
   if (newVal === val) return
   dep.notify()
 }
})
}

javascript_good

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中的数据响应化

数据变更能够响应在视图中，就是数据响应式。视图中会用到data中某key，这称为依赖。多个Watcher需要一个Dep来管理，需要更新时由Dep统一通知。执行初始化，对data执行响应化处理，kvue.js。MVVM框架的三要素：数据响应式、模板引擎及其渲染。编译模板中vue模板特殊语法，初始化视图、更新视图。Watcher来维护它们，此过程称为依赖收集。数据响应式：监听数据变化并在视图中更新。根据节点类型编译，compile.js。创建Watcher，kvue.js。编译插值，compile.js。
复制链接

扫一扫