Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。(引用：https://cn.vuejs.org/v2/guide/reactivity.html)

Vue 3.0 的响应式是基于 ES6 的 Proxy 实现的

直接上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Vue 响应式原理</title>
  9. </head>
  11. <body>
  12.     <div id="msg">
  13.         里斯
  14.     </div>
  15.     <div id="count">
  16.         里斯
  17.     </div>
  18.     <script>
  19.         window.log = console.log
  20.         let data = {
  21.             msg: '张三',
  22.             count: 10,
  23.         }
  24.         let vm = {}
  25.         // Vue 2.0 响应式原理
  26.         // for (const key in data) {
  27.         //     Object.defineProperty(vm, key, {
  28.         //         enumerable: true,
  29.         //         configurable: true,
  30.         //         get() {
  31.         //             log('get', data[key])
  32.         //             return data[key]
  33.         //         },
  34.         //         set(newVal) {
  35.         //             log('set', newVal)
  36.         //             if (data[key] === newVal) return
  37.         //             data[key] = newVal
  38.         //             document.querySelector("#" + key).textContent = newVal
  39.         //         }
  40.         //     })
  41.         // }
  42.         //-----------------------
  43.         // Vue 3.0 响应式原理
  44.         vm = new Proxy(data, {
  45.             get(target, key) {
  46.                 log('get', target[key], key)
  47.                 return target[key]
  48.             },
  49.             set(target, key, newVal) {
  50.                 log('set', newVal, key)
  51.                 if (target[key] === newVal) return
  52.                 target[key] = newVal
  53.                 document.querySelector("#" + key).textContent = newVal
  54.             }
  55.         })
  56.         //-----------------------
  57.         vm.msg = '李四'
  58.         vm.count = 10
  59.         log(vm.msg, vm.count)
  60.     </script>
  61. </body>
  63. </html>

Vue 2.0 与 Vue 3.0 响应式原理比较的更多相关文章

  1. Vue 进阶系列（一）之响应式原理及实现

    Vue 进阶系列(一)之响应式原理及实现:https://juejin.im/post/5bce6a26e51d4579e9711f1d Vue 进阶系列(二)之插件原理及实现:https://jue ...

  2. Vue 源码解读（3）—— 响应式原理

    前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...

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

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

  4. Vue2响应式原理

    vue2响应式原理 vue的特性:数据驱动视图和双向数据绑定.vue官方文档也提供了响应式原理的解释: 深入响应式原理 Object.defineProperty() Object.definePro ...

  5. Vue.2.0.5-深入响应式原理

    大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...

  6. Vue 源码解析：深入响应式原理（上）

    原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScri ...

  7. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

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

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  9. vue响应式原理

    vue的响应式,数据模型仅仅是普通的Javascript对象.当你修改它们时,视图会进行更新 那么如何追踪变化: 当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用O ...

随机推荐

  1. 【LeetCode】面试题62. 圆圈中最后剩下的数字

    题目:面试题62. 圆圈中最后剩下的数字 这题很有意思,也很巧妙,故记录下来. 官方题解思路,是约瑟夫环的数学解法: 我们将上述问题建模为函数 f(n, m),该函数的返回值为最终留下的元素的序号. ...

  2. 【NLP学习其四】如何构建自己用于训练的数据集？什么是词性标注？

    数据集与词性标注 数据集是NLP中的重要一环. 但是提到数据集,很多人的第一个想法可能是:"这玩意从网上下载就好了,不用管". 真的不用管?最开始我也是这么认为的 于是我直奔CoN ...

  3. RecyclerView跳转到指定位置的几种种方式

    Mark一下: http://blog.csdn.net/huangxiaoguo1/article/details/53706971 https://www.jianshu.com/p/3acc39 ...

  4. 洛谷P2210题解

    题面 模拟退火练手好题. 对于这个题,一般有两种解法: 每次随机两个数交换. 每次直接打乱数组. 两个方法都可以过,我写了第一种,因为不想用stl. 代码

  5. Android全新UI编程 - Jetpack Compose 超详细教程

    1. 简介 Jetpack Compose是在2019Google i/O大会上发布的新的库.Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码,更强大的功能,能提高开发速 ...

  6. 腾讯技术团队整理，为什么 Flutter 能最好地改变移动开发

    导语 | Flutter 框架是当下非常热门的跨端解决方案,能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面等多端开发.但仍然有很多产品.设计.甚至开发同学并不了解 Flut ...

  7. Linux中DNS分离解析

    目录 一.分离解析概述 二.DNS分离解析实验 要求 实验步骤 一.分离解析概述 分离解析:同一个dns服务器,同一个域名情况下,不同网段进行访问会解析出不同的IP地址 分离解析的域名服务器实际也是主 ...

  8. nat转换技术，且用且珍惜

    一.NAT转换技术 1.1.NAT技术概述 随着Internet的发展和网络应用的增多,IPv4地址枯竭已经成为制约网络发展的瓶颈.尽管IPv6可以从根本上解决IPv4地址空间不足的问题,但目前众多的 ...

  9. STM32—重定向printf和getchar函数到串口

    在STM32测试串口的时候经常需要在开发板和上位机之间传输数据,我们可以用c语言中的printf()函数和getchar()函数来简化传输. 以printf()为例: printf()函数实际上是一个 ...

  10. 题解—P2218 [HAOI2007]覆盖问题

    一道不错的题,主要就是一个思路点,想到就行了,想不到就一直卡着. 看完题解之后发现挺简单,实际上自己挣扎半天也咩有想到. 一开始想类比成一维之后贪心,后来被同机房大佬 \(hack\) 掉了. sol ...