Vue 2.0 与 Vue 3.0 响应式原理比较
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 响应式原理比较的更多相关文章
- Vue 进阶系列（一）之响应式原理及实现
Vue 进阶系列(一)之响应式原理及实现:https://juejin.im/post/5bce6a26e51d4579e9711f1d Vue 进阶系列(二)之插件原理及实现:https://jue ...
- Vue 源码解读（3）—— 响应式原理
前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue2响应式原理
vue2响应式原理 vue的特性:数据驱动视图和双向数据绑定.vue官方文档也提供了响应式原理的解释: 深入响应式原理 Object.defineProperty() Object.definePro ...
- Vue.2.0.5-深入响应式原理
大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这会让状态管理变得非常简单且直观,不过理解它的原理以避免一些常见的陷阱也 ...
- Vue 源码解析：深入响应式原理（上）
原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScri ...
- Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- vue响应式原理
vue的响应式,数据模型仅仅是普通的Javascript对象.当你修改它们时,视图会进行更新 那么如何追踪变化: 当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用O ...
随机推荐
- 解决Docker安装慢
之前介绍了Ubuntu安装Docker教程,在实际安装过程中,可能受限于国内网络问题,安装缓存或者失败.下面介绍一种通过国内镜像方式,仅需要执行一段脚本即可大幅度提升Docker的安装速度. Linu ...
- 迈达斯midas Gen 2019 2.1 中文汉化安装教程
midas Gen 2019 v2.1 for win是一款关于结构设计有限元分享的工具,分为建筑领域.桥梁领域.岩土领域.仿真领域四个大类.具有人性化的操作界面,且采用了优秀的的计算机显示技术,是建 ...
- HttpRunner3源码阅读: 1. 目录结构分析
初衷 身处软件测试行业的各位应该都有耳闻HttpRunner 开源测试工具/框架(接口测试),作者博客 为什么出这系列? 不少测试同行都建议阅读HttpRunner,源码学习其设计思想. 社区当下Py ...
- 1.9 货仓选址问题——Python
题目描述 在一条数轴上有 N 家商店,它们的坐标分别为 A1~AN. 现在需要在数轴上建立一家货仓,每天清晨,从货仓到每家商店都要运送一车商品. 为了提高效率,求把货仓建在何处,可以使得货仓到每家商店 ...
- 为VIM添加Python扩展
VIM的自带的脚本功能很强,但只能用在VIM自己上,如果让它支持Python脚本,那简直就无敌了,这个想法当然不是我想出来的,应该说英雄所见略同,于是乎vim7.2就内建了对python2.4的支持, ...
- Java和Groovy脚本互相调用实例
本实例是GODU动态脚本的一个技术简化版,演示了java调groovy,groovy又调java的运行过程. 测试用例: package com.boco.godu.integration; impo ...
- 授予mysql的其他用户数据库的使用权限
场景:不同的开发人员有不同的数据库的权限:也可适用于外包公司不同的开发权限. root用户登录数据库,命令行执行下面语句即可. grant select,delete,update,create,dr ...
- 慕慕生鲜上线&&腾讯云服务器配置准备
1.购买服务器并配置环境 1.1 购买 618购买了腾讯云服务器三年最低配置(1核2G 1Mbps 50G云盘),一时激动忘记了购买前领优惠券,痛失25元. 1.2 环境配置 系统是 CentOS L ...
- epoll水平/边缘触发模式下阻塞/非阻塞EPOLLOUT事件触发条件及次数
在IO多路复用技术中,epoll默认的事件触发模式为Level_triggered(水平触发)模式,即当被监控的文件描述符上有可读/写事件发生时,epoll_wait()会通知处理程序去读写.如果这次 ...
- 冰蝎&哥斯拉 流量特征分析
1.冰蝎(Behinder) 下载链接:https://github.com/rebeyond/Behinder/releases 截止至我发贴时,冰蝎最新版本是3.0,客户端兼容性有所提升(但仍不是 ...