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 实现的

直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vue 响应式原理</title>

</head>

<body>

    <div id="msg">

        里斯

    </div>

    <div id="count">

        里斯

    </div>

    <script>

        window.log = console.log

        let data = {

            msg: '张三',

            count: 10,

        }

        let vm = {}

        // Vue 2.0 响应式原理

        // for (const key in data) {

        //     Object.defineProperty(vm, key, {

        //         enumerable: true,

        //         configurable: true,

        //         get() {

        //             log('get', data[key])

        //             return data[key]

        //         },

        //         set(newVal) {

        //             log('set', newVal)

        //             if (data[key] === newVal) return

        //             data[key] = newVal

        //             document.querySelector("#" + key).textContent = newVal

        //         }

        //     })

        // }

        //-----------------------

        // Vue 3.0 响应式原理

        vm = new Proxy(data, {

            get(target, key) {

                log('get', target[key], key)

                return target[key]

            },

            set(target, key, newVal) {

                log('set', newVal, key)

                if (target[key] === newVal) return

                target[key] = newVal

                document.querySelector("#" + key).textContent = newVal

            }

        })

        //-----------------------

        vm.msg = '李四'

        vm.count = 10

        log(vm.msg, vm.count)

    </script>

</body>

</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. Thinkphp 生成的验证码不显示问题解决

    在调用验证码之前加上   ob_clean(); 将: public function verify(){                $verify = new \Think\Verify();  ...

  2. JAVA预科：Markdown基础语法

    JAVA预科:Markdown语法 什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程序员群体所用,目前它已是全球最大的技术分享网站 GitHub 和技术问答网站 Stack ...

  3. Vulnhub -- DC3靶机渗透

    @ 目录 信息收集 尝试攻击 获取shell方法1 获取shell方法2 获取shell方法3 拿到root权限 拿FLAG 总结 信息收集 kali的ip为192.168.200.4,扫描出一个IP ...

  4. Github连接远程仓库详细操作

    首先 咱们需要配置ssh密钥   如何生成密钥呢    我们先来看下命令 在桌面新建一个文件夹,命名规范尽量不要使用中文,然后在文件夹内  新建测试文本: 如图   在文件夹内空白处右击进入GIt b ...

  5. etcd raft 处理流程图系列2-wal的读写

    本文仅介绍wal的基本处理,如create.open.close.read等操作.鉴于篇幅原因,下面介绍replayWAL(启动raft节点时执行)函数涉及的读文件操作:从wal目录中加载snapsh ...

  6. C++ //深拷贝与浅拷贝 //浅拷贝 ： 简单的赋值拷贝操作 //深拷贝： 在堆区重新申请空间 进行拷贝操作

    1 //深拷贝与浅拷贝 2 3 //浅拷贝 : 简单的赋值拷贝操作 4 //深拷贝: 在堆区重新申请空间 进行拷贝操作 5 6 7 #include <iostream> 8 using ...

  7. 从零开始实现简单 RPC 框架 2：扩展利器 SPI

    RPC 框架有很多可扩展的地方,如:序列化类型.压缩类型.负载均衡类型.注册中心类型等等. 假设框架提供的注册中心只有zookeeper,但是使用者想用Eureka,修改框架以支持使用者的需求显然不是 ...

  8. Spring Cloud Alibaba - SkyWalking

    SkyWalking 简介 分布式链路跟踪是分布式系统的应用程序性能监视工具,专为微服务.云原生架构和基于容器(Docker.K8s)架构而设计: 也就是说Skywalking是用于微服务的" ...

  9. HTTP缓存——协商缓存（缓存验证）

    协商缓存 所谓"协商",可以理解为:客户端和服务端双方商量着来. 客户端检查资源超过有效期.强缓存命中失败的情况下,则发出请求"询问"服务器是否资源真的过期了, ...

  10. .net core 通过动软连接数据库

    .net core 与动软 首先创建asp.net core 或者 .net core 控制台程序.不需急着创建web.config 文件. 通过NuGet加个ado的包 System.Data.Sq ...