Vue
文章平均质量分 66
城南花开ze
技术不止
展开
-
微前端之实践应用间的全局状态管理、应用缓存和预加载子应用
一、微前端之实践应用间的全局状态管理、应用缓存和预加载子应用1. 全局状态管理,应用间的全局 `store`,如下所示:- 在 `micro` 下的 `store` 中 `index.js`,对外暴露 `createStore`,使用 `store` 管理 `initData`,`observers` 管理所有的订阅者和依赖,通过 `getStore` 获取 `store`,通过 `update` 更新 `store`。当 `store` 发生变化,通知订阅者,执行 `store` 的操作,进行缓存,将原创 2022-07-09 13:50:15 · 1472 阅读 · 1 评论 -
微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信
一、微前端之实践环境变量设置、快照沙箱隔离、代理沙箱隔离、css 样式隔离、父子应用间通信和子应用间通信1. 微前端环境变量设置,如下所示:- 在 `micro` 下的 `sandbox` 中 `performScript.js`,`performScriptForFunction` 是执行 `js` 脚本,`performScriptForEval` 是获取到子应用的内容,代码如下:...原创 2022-07-09 13:42:57 · 1737 阅读 · 0 评论 -
微前端之实践主应用的生命周期、微前端的生命周期、 加载和解析 html 及 js
一、微前端之实践主应用的生命周期、微前端的生命周期、 加载和解析 html 及 js1. 主应用的生命周期,如下所示:- 在主应用 `main` 下的 `util` 中的 `index.js` 中,在 `registerApp` 中的 `registerMicroApps` 方法注册到微前端框架里,传入第二个参数生命周期,`beforeLoad` 是开始加载,`mounted` 是渲染完成,`destoryed` 是卸载完成,`index.js`,代码如下:...原创 2022-07-09 13:33:33 · 866 阅读 · 0 评论 -
微前端之实践子应用的注册、路由拦截和获取首个子应用
一、微前端之实践子应用的注册、路由拦截和获取首个子应用1. 子应用的注册,如下所示:- 首先需要一个子应用注册的列表,在主应用 `main` 的 `store` 文件夹中,新建 `sub.js`,对外暴露 `subNavList` 这个子应用的列表。`subNavList` 是一个数组,每一个子元素都是一个子应用,`name` 是子应用名称,唯一 `ID`; `entry` 是子应用的入口,获取到子应用的文件;`container` 是子应用的渲染内容,显示在哪个容器中;`activeRule` 是子.原创 2022-07-09 11:34:56 · 1586 阅读 · 0 评论 -
微前端之实现方式和项目分析、实践主子应用启动配置、vue2、vue3、react15、react16 子应用的配置
一、微前端之实现方式和项目分析1. 微前端实现方式对比,如下所示:- `Iframe`,`Iframe` 的优势是技术成熟,支持页面嵌入,天然支持运行沙箱隔离、独立运行。`Iframe` 的劣势是页面之间可以是不同的域名,需要对应的设计一套应用通讯机制,如何监听、传参格式等内容,应用加载、渲染、缓存等体系的实现- `web component`,`web component` 的优势是支持自定义元素、支持 `shadow down`,并可通过关联进行控制,支持模版 `template` 和插槽 `sl原创 2022-07-09 11:24:57 · 1147 阅读 · 0 评论 -
微前端之前端架构、软件设计原则及分层、架构设计的质量、架构前期准备、技术填补及崩溃预防和系统重构
一、微前端之前端架构、软件设计原则及分层、架构设计的质量、架构前期准备、技术填补及崩溃预防和系统重构1. 前端架构是如何产生的,如下所示:- 初始,无架构,前端代码内嵌到后端应用中,`js` 代码混入到后端代码- 后端 `mvc` 架构,将视图层、数据层、控制层做分离,缺点是重度依赖开发环境,代码混淆严重。`controller` 层修改数据到 `modal` 层,修改显示到 `view` 层,`view` 层获取数据到 `modal` 层- 前后端分离架构,将前端代码从后端环境中提炼出来,`aja原创 2022-07-09 11:19:24 · 1306 阅读 · 0 评论 -
Vue 基础之单文件组件 todoList、vue-router 路由和 vuex
一、Vue 基础之单文件组件 todoList、vue-router 路由和 vuex单文件组件实现 todoList,如下所示:// App.vue<template> <div> <input v-model="inputValue" /> <button class="button" @click="handleAddItem">提交</button> </div> <ul>原创 2022-05-21 14:24:30 · 332 阅读 · 0 评论 -
Vue 基础之 setup、ref 及 reactive、toRef 及 context、TodoList、computed、watch 及 watchEffect、生命周期函数新写法、provide
一、Vue 基础之 setup、ref 及 reactive、toRef 及 context、TodoList、computed、watch 及 watchEffect、生命周期函数新写法、provide 及 injectsetup 是在 created 实例被完全初始化之前执行的函数,接收 props 和 context 参数。在 setup 中返回出来的数据和方法可以被模版、外部等使用,但不能使用外部的数据和方法,因为此时 app 实例并没有被挂载,同时 setup 中是不能使用 this 以及实例原创 2022-05-21 10:51:18 · 447 阅读 · 0 评论 -
Vue 基础之 mixin 混入、自定义指令、teleport、render 函数、插件和数据校验插件
一、Vue 基础之 mixin 混入、自定义指令、teleport、render 函数、插件和数据校验插件mixin 混入,组件 data、methods 优先级高于 mixin data 优先级、methods 优先级,组件中有则执行组件中的,组件中没有的则执行 mixin 中的。生命周期函数,先执行 mixin 里面的,再执行组件里面的,如下所示:const myMixin = { data() { return { number: 2, count: 2原创 2022-05-21 10:47:27 · 696 阅读 · 0 评论 -
Vue 基础之过渡动画、单元素组件的过渡动画、组件及元素切换动画、列表动画和状态动画
一、Vue 基础之过渡动画、单元素组件的过渡动画、组件及元素切换动画、列表动画和状态动画过渡和动画,如下所示:const app = Vue.createApp({ data() { return { styleObj: { background: 'blue' } } }, methods: { handleClick() { if (this.styleObj.background === 'blue') {原创 2022-05-21 10:42:15 · 511 阅读 · 0 评论 -
Vue 基础之组件、组件传值、单项数据流、Non-props、父子组件通信、组件双向绑定、插槽、作用域插槽、动态组件、异步组件、provide 和 inject
一、Vue 基础之组件、组件传值、单项数据流、Non-props、父子组件通信、组件双向绑定、插槽、作用域插槽、动态组件、异步组件、provide 和 inject组件的定义,组件具备复用性。全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单,名字建议,小写字母单词,中间用横线间隔。局部组件,定义了,要注册之后才能使用,性能比较高,使用起来有些麻烦,建议大写字母开头,驼峰命名。局部组件使用时,要做一个名字和组件间的映射对象,你不写映射,Vue 底层也会自动尝试帮你做映射,如下所示:con原创 2022-05-21 10:39:20 · 284 阅读 · 0 评论 -
Vue 基础之应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令
一、Vue 的应用及组件、生命周期函数、模版语法、computed 及 watcher、样式绑定语法、条件渲染、列表循环渲染、事件绑定和表单中双向绑定的指令createApp 表示创建一个 Vue 应用,存储到 app 变量中。传入的参数表示,这个应用最外层的组件,应该如何展示。MVVM 设计模式,m -> model 数据,v -> view 视图,vm -> viewModel 视图数据连接层,vm 代表的就是 vue 应用的根组件,如下所示:const app = Vue.c原创 2022-05-21 10:34:05 · 224 阅读 · 0 评论 -
vue 核心原理之指令和生命周期核心原理及实现
一、指令和生命周期核心原理及实现defineReactive,代码如下所示:import observe from './observe.js';import Dep from './Dep.js';export default function defineReactive(data, key, val) { const dep = new Dep(); if (arguments.length == 2) { val = data[key]; }原创 2021-11-21 15:39:13 · 437 阅读 · 0 评论 -
vue 核心原理之 AST 抽象语法树核心原理实现
一、AST抽象语法树核心原理实现parseAttrsString,把attrsString变为数组返回,如下所示:当前是否在引号内,断点,结果数组。遍历attrsString,而不是你想的用split()这种暴力方法,遇见了空格,并且不在引号中。循环结束之后,最后还剩一个属性k="v",根据等号拆分。parseAttrsString,代码如下所示:export default function (attrsString) { if (attrsString == undefi原创 2021-11-21 15:31:24 · 588 阅读 · 0 评论 -
vue 核心原理之 AST 抽象语法树理解及算法
一、AST 抽象语法树理解模版语法,通过抽象语法树AST进行过渡让编译工作变得简单,变成正常的HTML语法。抽象语法树本质上就是一个JS对象。抽象语法树和虚拟节点的关系,模版语法到抽象语法树AST,渲染函数(h函数),虚拟节点,界面。指针就是下标,不是C语言中的指针,C语言中的指针可以操作内存。JS中的指针就是一个下标位置。栈,如下所示:栈(stack)又名堆栈,它是一种运算受限的线性表,仅在表尾能进行插入和删除操作。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进原创 2021-11-21 15:22:59 · 1658 阅读 · 0 评论 -
vue 核心原理之数据响应式核心原理及实现
一、数据响应式核心原理MVVM 模式,数据变化,视图会自动变化。model、view、view-model。Vue数据变化是非侵入式,React数据变化和小程序数据变化是侵入式。Object.defineProperty(), 是数据劫持/数据代理,利用JavaScript引擎赋予的功能,检测对象属性变化。方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。同时,可以设置一些额外隐藏的属性。getter/setter,用闭包存储get和set的值。get,当访问该属性时原创 2021-11-21 15:15:58 · 1032 阅读 · 0 评论 -
vue 核心原理之虚拟 DOM 和 Diff 算法的核心原理及实现
一、虚拟DOM和Diff 算法的核心原理diff算法可以进行精细化比对,实现最小量更新。虚拟DOM:用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。diff是发生在虚拟DOM上的。新虚拟DOM和老虚拟DOM进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的DOM上。snabbdom是著名的虚拟DOM库,是diff算法的鼻祖,Vue源码借鉴了snabbdom。它的git地址是 https://github.com/snabbdom原创 2021-11-21 15:06:39 · 1198 阅读 · 0 评论 -
vue 核心原理之 mustache 底层核心原理及实现
一、mustache 核心原理mustache 库的机理,模版字符串编译为 tokens,数据结合 tokens 解析为 dom 字符串。tokens 是一个JS的嵌套数组,就是模板字符串的JS表示。它是“抽象语法树”、“虚拟节点”等等的开山鼻祖。循环情况下的tokens,当模板字符串中有循环存在时,它将被编译为嵌套更深的tokens。双重循环情况下的tokens,当循环是双重的,那么tokens会更深一层。mustache库底层重点要做两个事情,如下所示:将模板字符串编译为tokens形原创 2021-11-21 14:56:12 · 440 阅读 · 1 评论 -
vue 核心原理之模版引擎和 mustache 理解使用
一、模版引擎模版引擎是将数据变为视图的方法,而数据变为视图的方法有四种,如下所示:纯DOM法,非常笨拙,没有实战价值数组join法,曾几何时非常流行,是曾经的前端必会知识ES6的反引号法,ES6中新增的${a}语法糖,很好用模板引擎,解决数据变为视图的最优雅的方法数据变为视图的代码实现,如下所示:纯DOM法,代码如下所示:<!DOCTYPE html><html lang="en"><head> <meta charse原创 2021-11-18 00:04:51 · 383 阅读 · 0 评论 -
Element UI 中登录的分析及实现
一、用户登录登录组件的布局要点,如下所示:el-form 容器,包含 username 和 password 两个 el-form-item,el-form 主要属性,model 为 loginForm,rules 为 loginRulespassword 使用了 el-tooltip 提示,当用户打开大小写时,会进行提示,主要属性,manual 是手动控制模式,设置为 true 后, mouseenter 和 mouseleave 事件将不会生效。placement 是提示出现的位置。pas原创 2020-08-25 00:51:31 · 2000 阅读 · 1 评论 -
Element UI 中侧边栏的分析及实现
一、el-menu 和 el-submenu如果需要实现一个侧边栏,会如何设计?侧边栏的核心是将根据权限过滤后的 router 和 el-menu 组件进行映射,所以 el-menu 和 el-submenu 是理解 sidebar 的基础。el-menu 表示菜单容器组件,如下所示:default-active:当前激活菜单的 index,注意如果存在子菜单,需要填入子菜单 IDunique-opened 是否只保持一个子菜单的展开mode 模式,枚举值,horizontal / ver原创 2020-08-17 23:50:16 · 6728 阅读 · 1 评论 -
Element UI 中动态路由的分析及实现
一、动态路由的分析动态路由的生成逻辑,如下所示:从 @router 读取 asyncRoutes 和 constantRoutes,获取用户角色 roles,判断 roles 是否包含 admin。如果 roles 是包含 admin,将过滤后的 asyncRoutes 保存到 vuex 中。如果 roles 不包含 admin,那么遍历 routes,判断是否具有路由访问权限。如果不具备,继续遍历 routes。如果具备,判断路由是否包含 children。如果包含 children,遍历原创 2020-08-06 00:55:58 · 1931 阅读 · 0 评论 -
Element UI 中路由和权限校验的分析及实现
一、路由和权限校验路由和权限校验,在参与的项目中是如何处理路由和权限映射的?路由处理逻辑分析,如下所示:访问 /xxx,router.beforeEach 会做全局的导航守卫,从 cookie 中获取 token,判断 token 是否存在。如果 token 不存在,判断路由是否在白名单中。如果在白名单中,则访问路由 /xxx。如果不在白名单中,访问路由 /login?redirect=/xxx。如果 token 存在,判断路由是否为 /login。如果路由是 /login,则重定向到 /。原创 2020-08-03 00:25:16 · 541 阅读 · 0 评论 -
Element UI 中登录流程的前后端分析
一、登录流程分析前端,用户输入用户名和密码,结合路由和权限校验,然后进行登录。这样,前端附带用户名和密码发送给后端。后端接收到后,结合 mysql 应用进行用户鉴权。后端结合 jwt 应用,通过 jwt 生成 token,将 token 发送给前端。前端保存 token,然后请求用户信息。在保存 token 和请求用户信息中使用了 axios 拦截器。前端在请求用户信息时,将 token 附带至 http header,发送给后端,后端进行 token 校验。后端拿到 token 后,解析 tok原创 2020-08-02 23:23:55 · 532 阅读 · 0 评论 -
vue 项目中 Element UI 如何实现按需加载
一、Element UI 按需加载通过 vue create element_test 命令创建一个 vue 的项目通过 npm i element-ui -S 命令下载 element ui 到这个 vue 的项目中通过 npm i babel-plugin-component -D 命令下载按需加载所需要的插件在 babel.config.js 文件中,代码如下所示: module.exports = { presets: [ '@v原创 2020-08-02 22:46:18 · 1573 阅读 · 0 评论 -
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_bin
一、问题的出现在进行 vue 项目开发的时候,出现了这个错误,安装 node-sass 出错了,Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node ,如下所示:二、问题的分析及解决问题的分析: 这个是因为 node-sass 被墙掉了,导致下载不了问题的解决:两种方式可以解决,如下所示:第一种方式: npm i n原创 2020-06-30 23:11:51 · 19938 阅读 · 23 评论 -
Vue 源码深入解析之 API 和 插件
一、API 的理解之前我们对 Vuex 的初始化过程有了深入的分析,在我们构造好这个 store 后,需要提供一些 API 对这个 store 做存取的操作,那么就从源码的角度对这些 API 做分析。数据获取,Vuex 最终存储的数据是在 state 上的,我们之前分析过在 store.state 存储的是 root state,那么对于模块上的 state,假设我们有两个嵌套的 modules,它们的 key 分别为 a 和 b,我们可以通过 store.state.a.b.xxx 的方式去获原创 2020-06-26 17:24:22 · 643 阅读 · 0 评论 -
Vue 源码深入解析之 Vuex 和 Vuex 初始化
一、Vuex 的理解Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式,让我们从一个简单的 Vue 计数应用开始:new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div&原创 2020-06-26 11:40:52 · 793 阅读 · 0 评论 -
Vue 源码深入解析之 matcher 和 路径切换
一、 matchermatcher 相关的实现都在 src/create-matcher.js 中,我们先来看一下 matcher 的数据结构:export type Matcher = { match: (raw: RawLocation, current?: Route, redirectedFrom?: Location) => Route; addRoutes: (routes: Array<RouteConfig>) => void;};Matche原创 2020-06-26 09:52:24 · 1677 阅读 · 0 评论 -
Vue 源码深入解析之 Vue Router、路由注册 和 VueRouter 对象
一、Vue-Router路由,它的作用就是根据不同的路径映射到不同的视图。我们在用 Vue 开发过实际项目的时候都会用到 Vue-Router 这个官方插件来帮我们解决路由的问题。Vue-Router 的能力十分强大,它支持 hash、history、abstract 三种路由方式,提供了 <router-link> 和 <router-view> 两种组件,还提供了简单的路由配置和一系列好用的 API。大部分人已经掌握了路由的基本使用,但使用的过程中也难免会遇到一些坑原创 2020-06-25 21:12:39 · 649 阅读 · 0 评论 -
Vue 源码深入解析之 keep-alive、transition 和 transition-group
一、 keep-alive 的理解在我们的平时开发工作中,经常为了组件的缓存优化而使用 <keep-alive> 组件,但很少有人关注它的实现原理,下面就让我们看一下。内置组件,<keep-alive> 是 Vue 源码中实现的一个组件,也就是说 Vue 源码不仅实现了一套组件化的机制,也实现了一些内置组件,它的定义在 src/core/components/keep-alive.js 中:export default { name: 'keep-alive,原创 2020-06-24 22:13:28 · 1613 阅读 · 0 评论 -
Vue 源码深入解析之 扩展、event、 v-model 和 slot
一、扩展前面分析了 Vue 的核心以及编译过程,除此之外,Vue 还提供了很多好用的 feature, 如 event、v-model、slot、keep-alive、transition 等等。对他们的理解有助于我们在平时开发中更好地应用这些 feature,即使出现 bug 我们也可以很从容地应对。二、event 的理解我们平时开发工作中,处理组件间的通讯,原生的交互,都离不开事件。对于一个组件元素,我们不仅仅可以绑定原生的 DOM 事件,还可以绑定自定义事件,非常灵活和方便。那么接下来我们原创 2020-06-23 23:17:36 · 1068 阅读 · 0 评论 -
Vue 源码深入解析之 编译、编译入口、parse、optimize 和 codegen
一、编译模板到真实 DOM 渲染的过程,中间有一个环节是把模板编译成 render 函数,这个过程我们把它称作编译。虽然我们可以直接为组件编写 render 函数,但是编写 template 模板更加直观,也更符合我们的开发习惯。Vue.js 提供了两个版本,一个是 Runtime + Compiler 的,一个是 Runtime only 的,前者是包含编译代码的,可以把编译过程放在运行时做,后者是不包含编译代码的,需要借助 webpack 的 vue-loader 事先把模板编译成 rend原创 2020-06-23 20:55:11 · 821 阅读 · 0 评论 -
Vue 源码深入解析之 nextTick、检测变化的注意事项、计算属性和侦听属性、组件更新 和 Props
一、nextTick 的理解nextTick 是 Vue 的一个核心实现,在介绍 Vue 的 nextTick 之前,为了方便大家理解,先简单介绍一下 JS 的运行机制。JS 运行机制,JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤:所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。一旦"执行栈"原创 2020-06-22 20:35:31 · 908 阅读 · 0 评论 -
Vue 源码深入解析之 深入响应式原理、响应式对象、依赖收集 和 派发更新
一、深入响应式原理之前都是 Vue 怎么实现数据渲染和组件化的,主要是初始化的过程,把原始的数据最终映射到 DOM 中,但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外,还有一个很重要的体现就是数据的变更会触发 DOM 的变化。其实前端开发最重要的两个工作,一个是把数据渲染到页面,另一个是处理用户交互。Vue 把数据渲染到页面的能力我们已经通过源码分析出其中的原理了,但是由于一些用户交互或者是其它方面导致数据发生变化重新对页面渲染的原理我们还未分析,原创 2020-06-21 21:04:58 · 894 阅读 · 0 评论 -
Vue 源码深入解析之 生命周期、组件注册和异步组件
一、生命周期每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。在我们实际项目开发过程中,会非常频繁地和 Vue 组件的生命周期打交道,接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的。源码中最终执行生命周期的函数都是调用 callHook 方法,它的定义在 src/core/instance/l原创 2020-06-21 18:16:24 · 418 阅读 · 0 评论 -
Vue 源码深入解析之 组件化、createComponent、patch 和 合并配置
一、组件化Vue.js 另一个核心思想是组件化。所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的,组件在系统内部可复用,组件和组件之间可以嵌套。我们在用 Vue.js 开发实际项目的时候,就是像搭积木一样,编写一堆组件拼装生成页面。在 Vue.js的官网中,也是花了大篇幅来介绍什么是组件,如何编写组件以及组件拥有的属性和特性。我们将从源码的角度来分析 Vue 的组件内部是如何工作的,只原创 2020-06-21 16:08:24 · 641 阅读 · 0 评论 -
Vue 源码深入解析之 数据驱动、new Vue 发生的过程、Vue 实例挂载的实现、render 、Virtual DOM 、createElement 和 update
一、数据驱动Vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,我们对视图的修改,不会直接操作 DOM,而是通过修改数据。它相比我们传统的前端开发,如使用 jQuery 等前端库直接修改 DOM,大大简化了代码量。特别是当交互复杂的时候,只关心数据的修改会让代码的逻辑变的非常清晰,因为 DOM 变成了数据的映射,我们所有的逻辑都是对数据的修改,而不用碰触 DOM,这样的代码非常利于维护。在 Vue.js 中我们可以采用简洁的模板语法来声明式的将数据渲染为 DOM,代码原创 2020-06-21 12:33:56 · 382 阅读 · 0 评论 -
Vue 源码深入解析之 Flow 流程准备、源码设计、源码构建和入口配置
一、认识 FlowFlow 是 facebook 出品的 JavaScript 静态类型检查工具,和 Typescript 功能类型。Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码。使用 Flow 的原因,如下所示:JavaScript 是动态类型语言,它的灵活性有目共睹,但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码,在编译期甚至看上去都不会报错,但在运行阶段就可能出现各种奇怪的 bug。类型检查是当前动态类型语言的发展趋势原创 2020-06-20 23:41:28 · 778 阅读 · 0 评论 -
vue源码浅谈分析之Vue中的虚拟DOM理解
一、 虚拟DOM什么是虚拟DOM?所谓虚拟DOM,就是用一个JS对象来描述一个DOM节点,像如下示例:<div class="a" id="b">我是内容</div>{ tag:'div', // 元素标签 attrs:{ // 属性 class:'a', id:'b' }, text:'我是内容', // 文本内容 children:[] // 子元素}我们把组成一个DOM节点的原创 2020-05-08 22:31:08 · 336 阅读 · 0 评论