补充:

数组的响应式


// 对数组的方法进行重写
// 1. 不能影响本来的方法
// 2. 调用的时候可以找到它
let odlArrayPrototype = Array.prototype;
let proto = Object.create(odlArrayPrototype); // 继承
['push','shift','unshift'].forEach(method =>{proto[method] = function(){  // 函数劫持: 把函数进行重写,内部继续调用老的方法updateView();  // 切片编程odlArrayPrototype[method].call(this, ...arguments);}
})function updateView() {console.log('更新视图');
}function observer(target) {if (typeof target !== 'object' || target === null) {return target;}if(Array.isArray(target)){  // 拦截数组,给数组的方法进行重写target.__proto__ = proto;}Object.keys(target).forEach(key=>{defineReactive(target, key, target[key]);})
}function defineReactive(obj, key, value){observer(value);Object.defineProperty(obj,key,{get(){// get中会进行依赖收集return value},set(newVal){if(newVal !== value){observer(newVal);updateView();value = newVal;}}})
}// let data = { name: 'lz' ,age:{n:100} };
// observer(data);
// data.age = {n:200};
// data.age.n = 300;let data = {name:'lz', age:[1,2,3]};
observer(data);
data.age.push(4);
data.age.push(5);

vue --- 2.0响应式补充相关推荐

【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue 3.0 响应式系统原理基础回顾 Vue.js 响应式回顾 Proxy 对象实现属性监听多层属 ...
vue 2.0响应式源码实践，麻麻，我再也不怕被面试官提问啦
vue2.0/vue3.0响应式源码实践,麻麻,我再也不怕被面试官提问啦写在前面 vue2.0响应式源码实现 1. 先创建一个对象 2.实现observer方法 3.接下来我们对observer函数 ...
Vue 3.0响应式API案例
什么是Proxy proxy翻译过来的意思就是"代理",ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层"拦截",返回一 ...
详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
vue 数组长度_深入理解Vue的数据响应式
什么是响应式当一个物体对外界的变化做出反应就叫响应式的,如"我打你一拳,你会喊疼". Vue的数据响应式就是对数据做出改变时,视图上也会做出相应的变化. 举个例子 1const ...
Vue数据绑定和响应式原理
Vue数据绑定和响应式原理当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...

vue --- 2.0响应式补充

补充:

vue --- 2.0响应式补充相关推荐

最新文章

热门文章