qq_30418537的博客

上一节：防Vue系列-11 为防Vue系列-07添加响应式代码在vue中可以通过this.age来获取age的值接下我们将创建一个proxy函数作用数据代理 /** *@params target:any (当前vue实例对象) *@params data:String *@params key:any */ // 中间代理proxy 将某个对象属性映射到另一个对象的属性上 function proxy(target, data,

// ==========================响应式函数deepProperty=================================== // 要拦截的数组方法 let arrs = [ "push", "pop", "shift", "unshift", "reserve", "splice", "sort", ]; ...

创建拦截数组的一个代理方法 // 要拦截的数组方法 let arrs = [ "push", "pop", "shift", "unshift", "reserve", "splice", "sort", ]; // 获取数组对象 let arrays = Object.create(Array.prototype); // 在原型数组中添加拦截器 arrs.forEach((elem

再次思考怎么将 obj 变成响应式 var obj = { title: "英雄联盟", heros: [ { name: "金克斯", arms: "枪炮" }, { name: "蛮王", arms: "大刀"}, ], map: { title: "小地图", }, };将上篇文章的Object.defineProperty函数封装处理/***@params target:

vue中怎么做到当数据发生变化的时候,页面中的数据也跟着响应发生了变化？请看以下代码这里运用了原生的Object.defineProperty这个api,vue中上帝的钥匙/***@params obj:Object 要响应的对象*@params key:String obj中的响应的key值*@params config:Object 配置 enumerable是否可以被枚举*/let obj = { name: "小陈", age: 18, sex:"男" }Ob

本篇主要讲之前的代码的知识点,进行整合这里我们用combine替换之前的compilercombine用来合并数据与带有{{}}虚拟的Domcompiler用来合并数据与带有{{}}真实的Dom<div id="root"> <p>{{ name.firstName }}</p></div>// ==========================combine函数 合并数据与带有{{}}虚拟的Domdom===================

这里来个小插曲,学习一下函数柯里化(高阶函数),下列函数的作用是缓存obj,减少不必要的重复加载冗余的代码 let tagStr = "div,h1,h2,span,a,strong,p"; //目标字符串 function isAttrMap() { let arr = tagStr.split(","); let obj = {}; arr.forEach((el) => { obj[el] = true;

接着上篇文章初步了解 virtual DOM创建createElement函数 作用:将VNode转换成真正的Dom /* *@params tag:String 'div||span||h1' *@params data:Object '{id:'root,class:'theme'...}' *@params value:String 'nodeValue || undefined' *@params type:Number 'nodeType=1 || 2 ||3 ' *@par.

virtual DOM(虚拟dom,VNode）为什么要用VNode,主要是考虑性能问题,频繁的操作dom会有点性能问题,主要是我们只修改一部分的数据，却要重新渲染整个dom。接下来让我们来初步了解一下VNode思考怎么将一下的dom 标签转换成,VNode对象形式<div id="root" class="theme"> <h2 class="a" title="hello">hello1</h2> <div>hello2&l

怎么将解析data.xxx.xxx <div id="root"> <p>{{ name.firstName }}</p> </div>如何解析{{name.firstName }}//解析data.xxx.xx/***@params obj:Object data:{nama:{firstName:'小'，lastName:'陈'}}*@params path:String 'xxx.xxx'/ funct

改成Vue的形式//正则,用来匹配{{}} let r = /\{\{(.+?)\}\}/g;/***@params template:DOM*@params data:Object*/function compiler(template, data) { let childNodes = template.childNodes; //取出root下的子节点 // 遍历子节点 for (let index = 0; index < childNodes.length;

怎么将带{{}}真实dom的数据转成带数据dom//步骤拆解 // 1.拿到模板 let templateTest = document.querySelector("#root"); // 2.拿到data let data = { name: "张三", msg: "信号", age: 18, }; //正则 let r = /\{\{(.+?)\}\}/

引导篇