vue中的数据响应化

news2024/12/26 23:31:20

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>

原理分析

  1. new Vue() 首先执行初始化,对data执行响应化处理,这个过程发生在Observer中
  2. 同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在
    Compile中
  3. 同时定义一个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在一个视图中可能出现多次,所以每个key都需要一个管家Dep来管理多个
    Watcher
  5. 将来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'
 }
});

实现思路

  1. defineReactive时为每一个key创建一个Dep实例
  2. 初始化视图时读取某个key,例如name1,创建一个watcher1
  3. 由于触发name1的getter方法,便将watcher1添加到name1对应的Dep中
  4. 当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()
 }
})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/673016.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

chatgpt赋能python:Python构造器:理解类和对象的初始化方法

Python构造器&#xff1a;理解类和对象的初始化方法 Python是一门面向对象的编程语言&#xff0c;它的核心思想是数据和操作是紧密耦合的&#xff0c;而这些操作被封装到对象中。对象是一个具有属性和方法的实体&#xff0c;而类则是一种可以创建相同类型对象的蓝图。在Python…

chatgpt赋能python:Python有宏吗?

Python 有宏吗&#xff1f; 什么是宏&#xff1f; 在编程中&#xff0c;宏指的是一种代码编写方式&#xff0c;可以将一部分代码封装成可以被调用的函数或者语句&#xff0c;以便于在程序中重复使用。相对于普通的函数&#xff0c;宏更为灵活&#xff0c;可以达到更高的效率&…

RuntimeError: launcher ‘pdsh‘ not installed解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【吃透网络安全】2023软考网络管理员考点网络安全(三)计算机系统安全评估

涉及知识点 计算机系统安全评估准则&#xff0c;计算机系统安全评估历史&#xff0c;软考网络管理员常考知识点&#xff0c;软考网络管理员网络安全&#xff0c;网络管理员考点汇总。 后面还有更多续篇希望大家能给个赞哈&#xff0c;这边提供个快捷入口&#xff01; 第一节…

二叉树题目:二叉树的后序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 解法三思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树的后序遍历 出处&#xff1a;145. 二叉树的后序遍历 难度 3 级 题目…

沁恒CH32V103 边玩边学1-开发环境与GPIO项目

为什么选择这块板子&#xff1f; 它基于 RISC-V 架构&#xff0c;来看看 GPT 给出的介绍&#xff1a; RISC-V 是一种开源的指令集架构(ISA),与 x86 和 ARM 相似。它具有以下主要特点 • 简单 - RISC-V 采用精炼而简单的 RISC 指令设计,只有一些基本的常用指令。这使得 RISC-V…

CRM未来发展的6大方向

在数字化时代&#xff0c;几乎所有的企业都受到了数字化的洗礼&#xff0c;CRM作为企业数字化转型中的不可缺少的业务系统之一&#xff0c;也受到越来越企业的关注。 纵观CRM发展的趋势&#xff0c;当下CRM系统已经从早期的主要以记录&收集客户资料、管理销售的单点式管理延…

css基础知识四:说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别?

一、背景 在css中我们通常使用px作为单位&#xff0c;在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉&#xff0c;我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此&#xff0c;css中的像素只是一个抽象的单位&#xff0c;在不同…

深入浅出Node.js中的node_modules

文章目录 1. 什么是node_modulesnode_modules是什么npm包管理器和node_modules的关系 2. 如何安装和使用node_modulesnpm安装和使用node_modules的基本命令package.json文件的作用和结构npm包版本号的含义及如何管理包版本 3. 如何发布自己的npm包npm包的结构和规范如何将自己的…

端午出行电脑没网怎么办?无线网卡解决网络问题

无线网卡是一种可以让电脑或其他设备通过无线信号连接网络的硬件设备&#xff0c;无线网卡有多种类型和接口&#xff0c;例如USB无线网卡&#xff0c;PCI-E无线网卡&#xff0c;PCMCIA无线网卡等。端午出行在即&#xff0c;不妨看看驱动人生准备的无线网卡攻略&#xff0c;让大…

什么是kafka,如何学习kafka,整合SpringBoot

目录 一、什么是Kafka&#xff0c;如何学习 二、如何整合SpringBoot 三、Kafka的优势 一、什么是Kafka&#xff0c;如何学习 Kafka是一种分布式的消息队列系统&#xff0c;它可以用于处理大量实时数据流。学习Kafka需要掌握如何安装、配置和运行Kafka集群&#xff0c;以及如…

Kubernetes设计架构

一&#xff1a;Kubernetes是什么 Kubernetes是容器集群管理系统&#xff0c;是一个开源的平台&#xff0c;可以实现容器集群的自动化部署、自动扩缩容、维护等功能 通过Kubernetes可以&#xff1a; 快速部署应用 快速扩展应用 无缝对接新的应用功能 节省资源&#xff0c;优化硬…

chatgpt赋能python:Python桌面软件的优势和发展

Python桌面软件的优势和发展 作为一种高级编程语言&#xff0c;Python已经在广大的程序员中得到了越来越广泛的应用&#xff0c;同时也成为了一种非常适合开发桌面软件的语言。下面&#xff0c;我们将重点介绍Python桌面软件的优势和发展。 Python桌面软件的优势 Python编程…

ubuntu18修改源

1. 查看当前系统的源 系统的源 2. 将sources.list备份&#xff0c;sources-bak.list是备份文件 3. 选择要换的源 # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ jammy main restricted un…

js 获取数组(对象)中的最大和最小值

let arr:array [] // 取最大值&#xff1a;Math.max.apply(Math, arr.map(function(o) {return o.value})) // 取最小值&#xff1a;Math.min.apply(Math, arr.map(function(o) {return o.value}))var array[ { “index_id”: 111, “area_id”: “18335623”, “name”: “满…

Jenkins持续集成构建平台使用指南

目 录 目 录... 2 1、系统参数... 3 2、授权策略... 5 3、构建管理... 6 3.1 构建命名规范... 6 3.1.1 任务视图命名... 6 3.1.2 任务命名... 6 3.2 参数化构建... 7 3.2.1 构建参数列表... 7 3.2.1 常用的参数配置... 8 3.3 分布式构建... 9 3.3.1 slave节点配置..…

基于spss的多元统计分析 之 聚类分析+判别分析(3/8)

实验目的&#xff1a; 1. 掌握多元数据的相关性、正态性、可视化表征的基本原理&#xff1b; 2&#xff0e;熟悉掌握SPSS软件/R软件的基本用法和基本操作&#xff1b; 3&#xff0e;利用实验指导中及软件中内置的实例数据&#xff0c;上机熟悉相关性检验正态性检验可视化数据方…

Kafka如何实现精确一次语义

精确一次交付保证是关于消息传递最具争议性的话题之一&#xff0c;因此也是最复杂的任务之一。然而&#xff0c;几年前&#xff0c;Kafka团队宣布他们实现了这一目标&#xff0c;让我们深入研究一下他们的实现方式以及存在的限制。 首先&#xff0c;值得定义一下这些交付语义是…

CMake在Linux服务器上进行编译与安装

CMake在Linux服务器上进行编译与安装 文章目录 CMake在Linux服务器上进行编译与安装[TOC](文章目录) 一、VScode 远程服务器连接1.服务器容器实例创建2.vscode 远程扩展部分下载&#xff08;SSH端&#xff09; 二、编译安装(时间较长&#xff09;1.克隆项目到本地仓库2.进入CMa…

软考A计划-系统集成项目管理工程师-面向对象系统分析与设计-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…