Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接

如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            let oldArrPrototype = Array.prototype;

            // 继承

            let proto = Object.create(oldArrPrototype);

            ['push', 'shift', 'unshift','splice'].forEach(method => {

                proto[method] = function() {

                    // 切片编程

                    // 更新视图

                    updateView();

                    oldArrPrototype[method].call(this, ...arguments)

                }

            })

            // 观察函数

            function observer(target) {

                if (typeof target !== 'object' || target === null) {

                    return target;

                }

                if (Array.isArray(target)) {

                    target.__proto__ = proto;

                    // target.constructor.prototype = proto;

                }

                for (let key in target) {

                    /*

                        target:对象本身

                        key:对象的属性

                        target[key]:对象的值

                    */

                    definedReactive(target, key, target[key])

                }

            }

            // defineProperty函数

            function definedReactive(target, key, value) {

                // 重新观察一下传过来的值

                observer(value); //递归

                Object.defineProperty(target, key, {

                    // get 读取属性值触发

                    get() {

                        return value;

                    },

                    // 修改属性值触发,默认有参数,是最新值

                    set(newValue) {

                        // 为了方式更改后的值也是对象

                        observer(newValue);

                        // 判断新值和旧值是否相同

                        // 如果不同,改变旧值,更新视图

                        if (newValue !== value) {

                            value = newValue;

                            updateView(value);

                        } else {

                            return newValue;

                        }

                    }

                })

            }

            // 更新视图方法

            function updateView(value) {

                console.log("更新视图" + value)

            }

            // 使用Object.defineProperty可以给属性重新定义属性,给属性增加getter,setter

            // 这样给属性增加或者读取属性是都会触发getter 或者 setter

            let data = {

                name: "oldValue",

                onj: {

                    name: "szx"

                },

                a: null,

                n:[1,2,3]

            }

            // 定义一个观察函数,只要数据发生变动会触发更新视图的方法

            observer(data)

            // data.name = "newValue"

            // data.a = {

            //         name: "100"

            //     },

            //     data.a.name = 200

            data.n.splice(0)

            console.log(data)

            // 如果属性不存在,即没有事先在data里面定义,赋值不存在的属性值的时候不会触发更新

        </script>

    </body>

</html>

VUE响应式原理-如何追踪变化的更多相关文章

  1. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  2. 深入Vue响应式原理

    深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...

  3. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  4. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  5. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...

  6. vue响应式原理，去掉优化，只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

  7. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  8. 浅析Vue响应式原理（三）

    Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...

  9. 浅谈vue响应式原理及发布订阅模式和观察者模式

    一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...

随机推荐

  1. PHP mysqli_stmt_init() 函数

    初始化声明并返回 mysqli_stmt_prepare() 使用的对象: <?php 高佣联盟 www.cgewang.com // 假定数据库用户名:root,密码:123456,数据库:R ...

  2. PHP addChild() 函数

    实例 给 body 元素和 footer 元素添加一个子元素: <?php$note=<<<XML<note>高佣联盟 www.cgewang.com<to& ...

  3. 笨办法学python 第四版 中文pdf高清版|网盘下载内附提取码

    笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...

  4. AGC 043 C - Giant Graph SG函数 dp 贪心

    LINK:Giant Graph 神仙题目. 容易发现在图中选择某个点的贡献为\(10^{18\cdot(x+y+z)}\) 这等价于多选一个点多大一点就多乘了一个\(10^{18}\) 所以显然是贪 ...

  5. 初学编程丨从零开始学习编程的基本路线，BAT程序员亲手总结！

    编程并不是说代码怎么写,框架怎么用,业务怎么转换为代码逻辑,这些都不是编程的要素(但却是工作的刚需......).我认为按照下面这个路线来学习编程,会使自己在学习的路途上少去很多问题(比如为啥会有多线 ...

  6. 5.12 省选模拟赛 T2 贪心 dp 搜索 差分

    LINK:T2 这题感觉很套路 但是不会写. 区间操作 显然直接使用dp不太行 直接爆搜也不太行复杂度太高. 容易想到差分 由于使得整个序列都为0 那么第一个数也要i差分前一个数 强行加一个0 然后 ...

  7. 4.26 省选模拟赛 T3 状压dp 差分求答案

    LINK:T3 比较好的题目 考试的时候被毒瘤的T2给搞的心态爆炸 这道题连正解的思路都没有想到. 一看到题求删除点的最少个 可以使得不连通. 瞬间想到最小割 发现对于10分直接跑最小割即可. 不过想 ...

  8. luogu P3409 值日班长值周班长 exgcd

    LINK:值日班长值周班长 题目描述非常垃圾. 题意:一周5天 每周有一个值周班长 每天有一个值日班长 值日班长日换 值周班长周换. 共n个值日班长 m个值周班长 A是第p个值日班长 B是第q个值日班 ...

  9. Mybatis insert 获取主键自增id

    Mybatis insert 返回自增主键 mysql 准备一张带有自增主键的表users 字段:id,name,phone sql <!--插入记录并获取刚插入记录的主键--> < ...

  10. 2020-04-07：假如你们系统接收十几种报文，用什么方式对应的各自的service，总不能都用if-else判断吧

    福哥答案2020-04-08: 策略,工厂.