Vue.js 响应式原理

1. Vue2.x 基于 Object.defineProperty 方法实现响应式(Vue3将采用proxy)

Object.defineProperty(obj, prop, descriptor)

2. 定义defineReactive来对对象的属性进行getter、setter操作

function defineReacive(obj, key, val){
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val;
        },
        set(newVal) {
            if(val === newVal) return;
            val = newVal;
            callback(newVal);
        }
    })
}

3. 我们需要遍历所有数据,所以需要observer方法去观察

function observer(val){
    if(!val || typeof val !== 'object') return;
    Obejct.keys(val).forEach(key => {
        defineReactive(val, key, val(key));
    })
}

4. 模拟Vue构造函数

class MockVue {
    constructor(options) {
        this._data = opations.data;
        observer(this._data);
    }
}

5. 实例化MockVue生成实例对象

let v1 = new MockVue({
    data: { }
})

如何让发生变动时触发相关视图更新,那么我们就需要收集依赖,

6. 订阅者Dep(存放watcher观察者对象)

class Dep {
    constructor() {
        this.subs = [];
    }
    addSub(sub) {
        this.subs.push(sub);
    }
    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    }
}

7. 观察者wacher

class Watcher {
    constructor() {
        Dep.target = this;
    }
    update() {
        console.log('update...');
    }
}

8. 修改defineReactive方法

function defineReacive(obj, key, val){
    + const dep = new Dep();
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            + dep.addSub(Dep.target);
            return val;
        },
        set(newVal) {
            if(val === newVal) return;
            val = newVal;
            - callback(newVal);
            + dep.notify();
        }
    })
}

9. 重写MockVue

class MockVue {
    constructor(options) {
        this._data = options.data;
        observer(this._data);
        new Watcher();               // Dep.target会指向这个watcher对象
        console.log('触发getter');
    }
}

原文地址:https://www.cnblogs.com/colima/p/10508913.html

时间: 2024-10-10 21:43:36

Vue.js 响应式原理的相关文章

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g

vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo. 首先,先让我们来了解一些基础知识. 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定gette

vue.js响应式原理解析与实现—实现v-model与{{}}指令

离线浏览器软件    服务器远程连接 1.可多站同时下载.多站同时扒 2.可单页扒 3.可自定义, 重写JS\图片\CSS路径 4.执行全站下载后,会下载到本程序根目录下的html文件夹下. 5.全站替换,根据关键词替换.N个(多个)关键词替换.6.多线程下载7.自动补齐404不存在的链接页面(下载大站的时候需要)8.插入自定义的JS(全站插入)9.整站下载10.单页下载 此程序可以做到: 1,快速多线程下载整站,无论任何后缀(动态或者静态). 2,全站无错下载,包含CSS\JS\图片等等. 上

Vue 数据响应式原理

Vue 数据响应式原理 Vue.js 的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单的例子,对于模板: {{ name }} 创建一个 Vue 组件: var vm = new Vue({ el: '#root', data: { name: 'luobo' } }) 代码执行后,页面上对应位置会显示:luobo. 如果想改变显示的名字,只需要执行:

vue系列---响应式原理实现及Observer源码解析(一)

_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的增加或减少? 2.4 使用Proxy来实现数据监听 三. Observer源码解析 回到顶部 一. 什么是响应式? 我们可以这样理解,当一个数据状态发生改变的时候,那么与这个数据状态相关的事务也会发生改变.用我们的前端专业术语来讲,当我们JS中的对象数据发生改变的时候,与JS中对象数据相关联的DOM

vue数据响应式原理

vue2.0数据响应式原理 对象 Obect.defineproperty 定义对象的属性mjm defineproperty 其实不是核心的为一个对象做数据双向绑定,而是去给对象做属性标签,设置一系列操作权限,只不过属性里的get和set实现了响应式 var ob = { a: 1, b: 2 } //1-对象 2-属性 3-对于属性的一系列配置 Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true writable: fal

vue的响应式原理

Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当修改它们时,视图会进行更新. 当我们把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用  Object.definedProperty  把这些属性全部转为  getter/setter .Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本

vue的响应式原理分析

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 </head> 8 <body>

关于vue的响应式原理

Vue 是基于Object.defineProperty()来实现数据响应的,而Object.defineProperty()是ES5无法 shim(修复) 的特性 这也就是Vue不支持 IE8以及更低版本的浏览器的原因:Vue通过Object.defineProperty()的 . get() 和 set() 对收集依赖项进行监听,在属性访问修改时通知变化,进而对视图的更新.Vue在初始化 实例时对属性执行 get /set 转化过程,所以属性在data 上才能让Vue转换它,这样才能让它是响