vue响应式原理的实现
响应式实现的原理---如何监控数据的变化:两种方法
Vue 2.x defineProperty(es5)
Vue 3.x Proxy(es6)
语法:Object.defineProperty(参数1,参数2,参数3)
参数1:目标对象
参数2:需要修改或者添加的属性名
参数3:目标对象属性的一些特征(是一个对象)
其中参数3中也有一些参数:
参数1:value:属性值
参数2:writable:对象属性值是否可被修改,true表示允许,false表示不允许
参数3:configurable:对象属性是否可被删除,true为允许,false为不允许
参数4:enumerable:对象属性是否可被枚举(即遍历)
参数5:get():给一个属性提供getter方法,当访问这个对象的属性值时触发该方法
参数6:set():给一个属性提供setter方法,当设置这个对象的属性值时触发该方法
这种方式通过下标更改对象属性,或者直接改变数组长度等,就不能检查到是否更改了属性
var obj = {a:1}
object.defineProperty(obj,"wa",{value : 5 })
var obj = {
a: 1
}
Object.defineProperty(obj, 'wa', {
//添加一个新属性wa,当检测到wa的值改变时,触发set()函数,这时在set()函数中给obj的就旧属性a重新赋值
set(value) {
obj.a = value;
}
})
obj.wa = 123;
console.log(obj.a);
可以通过es6的代理(Proxy)来监测,可以对数据改变和数据截取做劫持
Proxy的作用
对于代理模式 Proxy 的作用主要体现在三个方面:
1、 拦截和监视外部对对象的访问
2、 降低函数或类的复杂度
3、 在复杂操作前对操作进行校验或对所需资源进行管理
var obj = {
a: 1
}
var pa = new Proxy(obj, {
set(target, property, value) {
console.log(target, property, value)
target[property] = value;
}, get(target, property) {
alert("获取到了obj的a值")
return target[property];
}
})
pa.a = 12345
//pa代理了obj 也就是pa拦截了目标对象obj的访问。所有访问obj属性的操作都被get()函数拦截,
所有设置属性都被set()函数拦截,所以,handle就是一个拦截处理函数,必须使用pa(代理对象)代理才能生效,
console.log(pa.a);
代理的作用就是拦截监控外部对对象的访问
vue响应式原理的实现的更多相关文章
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- 深入Vue响应式原理
深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- 浅析Vue响应式原理(三)
Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
随机推荐
- java agent技术原理及简单实现
注:本文定义-在函数执行前后增加对应的逻辑的操作统称为MOCK 1.引子 在某天与QA同学进行沟通时,发现QA同学有针对某个方法调用时,有让该方法停止一段时间的需求,我对这部分的功能实现非常好奇,因此 ...
- 假期汇总表handler中涉及的基础知识
1,stringBuffer 的常用方法,append () 方法, public StringBuffer append(boolean b) 追加内容到当前StringBuffer对象的末尾 ,我 ...
- ABP-AsyncLocal的使用
1.与AsyncLocal对应的是ThreadLocal 2.两种类型 初始赋值 AsyncLocalString.Value = new List { "1" }; AsyncL ...
- windows10 powershell上切换至cmd
前言 在windows10 上是遇到了坑,因为出现了这样的情况!不要说什么盗版,公司买的正版呢. 上图是powershell,下图是 cmd,然后我同样使用powershell 与 cmd,查询nod ...
- 预告:Windows 7 + Tiny Linux 4.19 + XFS + Vmware Workstation 15 (PRO)下篇dockerの奥义
困 困 等明天再写吧 主题将围绕在Vmware使用持久化XFS disk后machine rm default后不丢失images containers volumes etc.的奇观 并将展开部署c ...
- Maven 生命周期的概念(指令默认顺序执行)
生命周期的概念 IDEA中使用maven构建项目都集中放到了窗口右侧"Maven Projects"中,点击该区域可以直观的看到,maven中几个常用指令都归类为LifeCycle ...
- HDU3652 B-number 题解 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3652 题目大意: 求区间 \([1, n]\) 范围内包含连续的数位"13"并且能 ...
- 「2018-12-02模拟赛」T1 最短路 解题报告
1.最短路(short.pas/cpp/in/out) 问题描述: 小 C 终于被小 X 感动了,于是决定与他看电影,然而小 X 距离电影院非常远,现在假设 每条道路需要花费小 X 的时间为 1,由于 ...
- [AI开发]零代码分析视频结构化类应用结构设计
视频结构化类应用涉及到的技术栈比较多,而且每种技术入门门槛都较高,比如视频接入存储.编解码.深度学习推理.rtmp流媒体等等.每个环节的水都非常深,单独拿出来可以写好几篇文章,如果没有个几年经验基本很 ...
- Spring boot项目搭建及简单实例
Spring boot项目搭建 Spring Boot 概述 Build Anything with Spring Boot:Spring Boot is the starting point for ...