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源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
-
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 ...
-
深入浅出Vue基于“依赖收集”的响应式原理（转）
add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...
-
vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
随机推荐
-
Mac OS X 10.8.2终端切换root用户
方法一:1. 打开Terminal2. jonesduan-MacBook-Pro:~ user$ sudo -i3. 输入root密码即可. 方法二:和方法一中1和3步相同,只是第二步输入的命令不是 ...
-
Invalid Image Path - No image found at the path referenced under key ";CFBundleIconFile";: Icon.png
I got the same error when uploading my app. Moving all icon files to the Asset Catalog works if your ...
-
快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...
-
自学asp.net mvc(一)
之前一直做asp.net的webform,现在想学习一下mvc,把自学中遇到的问题记录到博客. 一.codeplex上托管代码 1. 2. 3. 4. 5. 6. 7. 8. 9.
-
css3 动画demo
1)http://www.yyyweb.com/demo/css-cokecan/inner.html 2)页面切换效果demo http://www.yyyweb.com/demo/page-tra ...
-
领接表的建立和它的DFS, BFS；；；
//图的建立的实现->邻结矩阵和邻结表两种表示方法 #include <cstdio> #include <cstdlib> //#define _OJ_ int vis ...
-
Hibernate之管理session与批处理
1. Hibernate 自身提供了三种管理Session对象的方法 –Session对象的生命周期与本地线程绑定 –Session 对象的生命周期与JTA事务绑定 –Hibernate 委托程序管理 ...
-
word ppt excel文档转换成pdf
1.把word文档转换成pdf (1).添加引用 using Microsoft.Office.Interop.Word; 添加引用 (2).转换方法 /// <summary> /// ...
-
hdu_5724_Chess(组合博弈)
题目链接:hdu_5724_Chess 题意: 给你一个n行20列的棋盘,棋盘里面有些棋子,每个棋子每次只能往右走一步,如果右边有棋子,可以跳过去,前提是最右边有格子,如果当前选手走到没有棋子可以走了 ...
-
heapster源码分析——kubelet的api调用分析
一.heapster简介 什么是Heapster? Heapster是容器集群监控和性能分析工具,天然的支持Kubernetes和CoreOS.Kubernetes有个出名的监控agent---cAd ...