数据改动，更新视图，类似于vue

//当数据改变时，更新视图，和vue的有点类似let obj = {    name:{        name:'ll'    },    age:12,}let arr = [1,2,3];//针对数组的写法//当需要改变原型对象上的方法时，不要直接在prototype上修改，否则以后使用的都是修改后的方法//创建一个新对象，可以获取到Array.protyotype上的所有方法let proto = Object.create(Array.prototype);['pop','push','shift','unshift','reverse','sort','splice'].forEach(method=>{    proto[method] = function(){        update();        let old = Array.prototype[method];        old.call(this,...arguments)    }})function update(){    console.log('更新视图')}function observer(obj){    //如果是数组，不循环，把数组的新方法赋给该数组    if(Array.isArray(obj)) return;    if(typeof obj !== 'object'){        return obj.__proto__ = proto;    }    for(let key in obj){        defineReactive(obj,key,obj[key]);    }}//定义属性的getter和setterfunction defineReactive(obj,key,value){    observer(value)   //如果值是对象，继续循环定义getter和setter    Object.defineProperty(obj,key,{        get(){            return value;        },        set(newval){            //如果新值是个对象，也要循环定义getter和setter            if(typeof newval === 'object'){                observer(newval)            }            //如果数据有变化，更新视图            if(value !== newval){                update();            }            value = newval        }    })}//对象observer(obj);//数组observer(arr);//更改数据obj.name.name = 'mj';arr.push(4);console.log(obj);console.log(arr)

转载于:https://www.cnblogs.com/qiruoranbeginner/p/10980768.html

数据改动，更新视图，类似于vue相关推荐

angular 强制更新视图_angular,vue,react数据双向绑定原理分析
在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同. Angular数据绑定 Angular 采用"脏值检测"的方式,数据发生变更后,对于所有的数据和视图的绑定关系进行一次 ...
avalon数据已更新,视图未更新的bug修复
$computed: {pinlei() {var key = this.currentProduct.key || 'youpin';console.log(key, "我是key&quo ...
vue 路由参数变化，页面不刷新（数据不更新）解决方法
路由参数改变,页面数据不更新解决方法: http://localhost:8080/#test?id=1 http://localhost:8080/#test?id=2,参数切换后,数据未更新以下 ...
el-date-picker 的一些小坑(chang事件不生效以及页面数据不更新)
前几天改了一个bug,bug是说el-date-picker这个时间日期选择器选择的时间不能实时更新 chang方法不生效需要使用input方法最开始我尝试在去打印一下他的时间,根据官方文档chan ...
couchdb 视图操作_CouchDB 视图简介及增量更新视图的方法
CouchDB 视图简介及增量更新视图的方法郭君, 高云鹤, 和林宜谦 2016 年 4 月 18 日发布简介 CouchDB 是一种 NoSQL 数据库,数据以 JSON 文档的形式存储 ...
vue数组中数据变化但是视图没有更新解决方案
vue数组中数据变化但是视图没有更新解决方案参考文章: (1)vue数组中数据变化但是视图没有更新解决方案 (2)https://www.cnblogs.com/sufubo/p/6906261.h ...
safair中vue修改了数据，但是视图没有更新解决方案
使用vuex,也适用了splice来改数据, 修改了评论的数据,但是视图没有更新. state.tabContainer.splice(index, 1, {info: info}); 查看dom元素 ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
js更新数组对象_7 种Vue 数据已更新而页面没有更新的情况及深化总结（收藏）
作者:前端1943 链接:https://segmentfault.com/a/1190000022772025 如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做 ...

数据改动，更新视图，类似于vue

数据改动，更新视图，类似于vue相关推荐

最新文章

热门文章