Vue 之响应式数据

ZHAO_ 发布于2019-08-23 10:56 / 1258人阅读

摘要：目标自己实现轮子数据响应式引擎基石属性拦截器操作对象数据类型数据处理

目标

自己实现轮子：数据响应式引擎

基石

属性拦截器

操作对象

Data
数据类型

数据处理

class Observer {
    value: any;
    dep: Dep;
    vmCount: number;
    constructor(value: any) {
        this.value = value;
        this.dep = new Dep();
        this.vmCount = 0;
        def(value, "__ob__", this);
        if(Array.isArray(value)) {
            augment(value, arrayMethods, arrayKeys);
            this.observerArray(value);
        }else {
            this.walk(value);
        }
    },
    
    walk(obj: Object) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i ++) {
            defineReactive(obj, keys[i]);
        } 
    },
    
    observerArray (items: Array) {
        for (let i = 0; i< items.length; i++) {
            observer(items[i]);
        }
    }
}

GPU云服务器云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96837.html

vue源码分析系列之响应式数据（一）

摘要：代码初始化部分一个的时候做了什么当我们一个时，实际上执行了的构造函数，这个构造函数内部挂载了很多方法，可以在我的上一篇文章中看到。合并构造函数上挂载的与当前传入的非生产环境，包装实例本身，在后期渲染时候，做一些校验提示输出。概述在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。 dem...

liujs 2019-08-23 15:11 评论0 收藏0
vue源码分析系列之响应式数据（四）

摘要：执行当时传入的回调，并将新值与旧值一并传入。文章链接源码分析系列源码分析系列之环境搭建源码分析系列之入口文件分析源码分析系列之响应式数据一源码分析系列之响应式数据二源码分析系列之响应式数据三前言上一节着重讲述了initComputed中的代码，以及数据是如何从computed中到视图层的，以及data修改后如何作用于computed。这一节主要记录initWatcher中的内容。 ...

GHOST_349178 2019-08-23 15:16 评论0 收藏0
Vue 进阶系列（一）之响应式原理及实现

摘要：进阶系列一之响应式原理及实现进阶系列二之插件原理及实现进阶系列三之函数原理及实现什么是响应式表示一个状态改变之后，如何动态改变整个系统，在实际项目应用场景中即数据如何动态改变。描述符必须是这两种形式之一，但二者不能共存，不然会出现异常。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://githu...

MonoLog 2019-08-23 12:41 评论0 收藏0
【Vue原理】Props - 源码版

写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Props - 源码版今天记录 Props 源码流程，哎，这东西，就算是研究过了，也真是会随着时间慢慢忘记的。幸好我做...

light 2019-08-23 18:32 评论0 收藏0
前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0