vue2响应式通过数组下标赋值响应式问题

通过学习vue2响应式，我写的不知道为什么，直接通过数组下标赋值它也是响应式的。下面是源码，你们可以试试。

直接复制新建一个html通过控制台测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script crossorigin="anonymous" integrity="sha512-pSyYzOKCLD2xoGM1GwkeHbdXgMRVsSqQaaUoHskx/HF09POwvow2VfVEdARIYwdeFLbu+2FCOTRYuiyeGxXkEg==" src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
</head>
<body><div id="app"><div><p class="a1" style="color:red">{{name}}</p><input id="name"/></div><p>{{b}}</p></div><script>const CE=['push','pop'];let array=Object.create(Array.prototype)CE.forEach(method=>{array[method]=function(){[...arguments].forEach(i=>{reactive(i)});return Array.prototype[method].apply(this,arguments);}});function definReactive(target,key,value){if(Array.isArray(value)){value.__proto__=array;reactive(value)}if(value instanceof Object){reactive(value)}Object.defineProperty(target,key,{enumerable:true,configurable:true,get(){return value;},set(newVal){if(typeof newVal =='object' && newVal!=null)reactive(newVal);console.log(`响应式${target[key]},${value},新的值${newVal}`);value=newVal}});}function reactive(data){Object.keys(data).forEach((key)=>{definReactive(data,key,data[key])});}// 为什么使用虚拟dom// 提升性能// 生成虚拟节点class VNode{constructor(tag,attr,value,type){this.tag=tag;this.attrs=attr;this.value=value;this.type=type;this.children=[];}appendChild(vnode){this.children.push(vnode);}}function createVNode(node){let vnode;if(node.nodeType==3){vnode= new VNode(undefined,undefined,node.nodeValue,node.nodeType);}else if(node.nodeType==1){let attrObj={};for (let i = 0; i < node.attributes.length; i++) {attrObj[ node.attributes[i].nodeName ] = node.attributes[i].nodeValue;}vnode=new VNode(node.nodeName,attrObj,undefined,node.nodeType); // 考虑到有子节点node.childNodes.forEach(i => {vnode.appendChild(createVNode(i))});}return vnode;}// let vnode=createVNode(document.querySelector('#app'))// // 将虚拟dom转换成真实domfunction parseVNode(vnode){// 3是值，1是元素if(vnode.type==3){return document.createTextNode(vnode.value);}else if(vnode.type==1){let  el=document.createElement(vnode.tag);for (const key in vnode.attrs) {el.setAttribute(key,vnode.attrs[key]);}vnode.children.forEach((i)=>{el.appendChild(parseVNode(i)); });return el        }}// let t=parseVNode(vnode)// console.log(t);// let a= create(document.querySelector('#app'))// parseVNode(a)class MyVue{constructor(options){this._data=options.datathis._template=document.querySelector(options.el)this._parent=this._template.parentNodethis.initData(this._data);this.mount();}initData(){reactive(this._data);Object.keys(this._data).forEach(key=>{Object.defineProperty(this,key,{enumerable:true,configurable:true,get(){return this._data[key];},set(newVal){if(typeof newVal =='object' && newVal!=null)reactive(newVal);this._data[key]=newValthis.mountComponent();}});})}mount(){// 需要提供一个render方法，生成虚拟domthis.render=this.createRenderFn();this.mountComponent();}mountComponent(){let mount=()=>{this.update(this.render())}// 本质应该交给watcher来调用mount();}// 这里生成render函数，目的缓存抽象语法树createRenderFn(){// 将AST+data => VNodelet ast=createVNode(this._template);return function(){// 将带{{}}的vnode和数据结合return combine(ast,this._data);}}// 将虚拟dom渲染到页面中， diff算法在这里// 在真正的vue中使用了二次提交的设计结构update(vnode){let realDom = parseVNode(vnode)// 每次会全部替换，模拟的，不是真正的diff算法this._parent.replaceChild(realDom,document.querySelector('#app'));}compile(template){let childNodes=template.childNodesfor(let i=0;i<childNodes.length;i++){let e=childNodes[i];if(e.nodeType==3){e.nodeValue=e.nodeValue.replace(/\{\{(.*)?\}\}/,(a,b)=>{let key=b.trim();if(key.indexOf('.')!=-1){return MyVue.getValue(key);}return    this._data[key];});}else if(e.nodeType==1){this.compile(e)}}}// 递归取出对象里的值static getValue(key,data){let arr=key.split('.');let tmp=datafor (let i = 0; i < arr.length; i++) {tmp = tmp[arr[i]];}return tmp;}}function combine(vnode,data){let {type,value,tag,children,attrs}=vnode;let _vnodeif(type==3){value=value.replace(/\{\{(.*)?\}\}/,(a,b)=>{let key=b.trim();if(key.indexOf('.')!=-1){return MyVue.getValue(key,data);}return    data[key];});_vnode=new VNode(tag,attrs,value,type);}else if(type==1){_vnode=new VNode(tag,attrs,value,type);children.forEach(subchild=>{_vnode.appendChild(combine(subchild,data))});}return _vnode;}let app=new MyVue({el:'#app',data:{name:'zhangsan',b:5,c:[1,2,3]}})</script>
</body>
</html>

vue2响应式通过数组下标赋值响应式问题相关推荐

Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...
016_Vue数组数据的响应式处理
1. 数组数据的响应式处理 1.1. 第一个参数表示要处理的数组名称; 第二个参数表示要处理的数组索引; 第三个参数表示要处理的数组的值. Vue.set(vm.list, index, newVal ...
标识响应式html,第一个html5+响应式页面
闲来无聊研究研究响应式,对html5.响应式一知半解的. 废话少说,直接上代码 1.添加meta标识:大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率.禁止缩放,使用设 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
各种风格简洁单页响应式html5模板_简洁响应式单页跳转设计案例源码340多套订餐企业模板高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
在html中写响应式布局的代码,手机端自适应响应式框架，移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
js声明数组 js数组如何获取真实对象 js数组处理null值情况 js数组通过下标赋值和push赋值的区别 loopback4的基础使用
目录问题来源 js数组数组通过下标赋值数组通过push赋值总结 loopback4 安装创建项目项目启动访问项目创建HelloController 运行访问HelloControlle ...
C语言数组带下标赋值
好记性不如烂笔头. c语言数组带下标赋值,初始化的时候数组元素的值不受顺序影响,在有些时候方便扩展一幕了然. int array[3] = { 1, 2, 3 }; /* 等同于 */ int arr ...
java 数组定义及其基本概念下标访问下标赋值
数组是多个数据组成的一个存储空间比如你想记录十个学生的成绩那按基础方式就是定义十个变量但这样就会很麻烦这是我们就可以声明一个数组来储存这是个同学的成绩首先数据定义参考代码如下这里 ...

vue2响应式通过数组下标赋值响应式问题

vue2响应式通过数组下标赋值响应式问题相关推荐

最新文章

热门文章