Vue2响应式原理
vue2响应式原理
vue的特性:数据驱动视图和双向数据绑定。vue官方文档也提供了响应式原理的解释:
Object.defineProperty()
Object.defineProperty()
的作用是直接在一个对象上定义一个新属性,或者修改一个属性
使用方式:Object.defineProperty(对象名,属性名,配置项)
<script>
let person = {
name: '张三',
sex: '男',
}
Object.defineProperty(person,'age',{
value: 18
}) //不能参与遍历
</script>
上述写法是给person
对象添加一个age
属性,属性的值是18
但是这种写法:
- 不能进行枚举,即无法在遍历的时候获取到
age
属性的值 - 不能被修改
- 不能删除
所以Object.defineProperty()
还有其他配置项
Object.defineProperty(person,'age',{
value: 18
enumerable: true //控制属性是否可以枚举,默认值是false
writeable: true //控制属性是否可以被修改,默认值是false
configurable: true //控制属性是否可以被删除,默认值是false
})
现在有一个需求:定义一个新的变量number
,当number
的值修改后,person
中age
的值也相应被修改;而person
中age
的值被修改后,number
的值也相应被修改。
这个时候需要借助新的配置项get
和set
<script>
let number = 18
let person = {
name: '张三',
sex: '男',
}
//能够实现number的值修改后,person中age的值也相应被修改
Object.defineProperty(person,'age',{
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get:function(){
return number
},
//当有人修改person的age属性时,set函数(setter)就会被调用,且接收到修改的具体值
set(value){
number = value
}
})
</script>
数据代理
数据代理就是通过一个对象代理另一个对象中属性的操作
vue
就是通过vm
对象来代理data
对象中属性的操作
<body>
<div id="app">
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '张三',
age: 18
}
})
</script>
控制台输出vm
,我们可以看到name
和age
这两个属性
这两个属性都是通过Object.defineProperty()
添加到vm
上,所以可以发现他们都有对应的getter/setter
也就是说:当读取vm
中的name
时,会调用getter
,把data.name
给name
;当修改vm
中的name
时,会调用setter
,修改data.name
中的值(这里跟第一个例子是同一个道理)
但是我们会发现vm
上没有data
(疑惑:明明在创建vue
实例对象的时候,设置了data
,为什么取不到)
其实我们以为的这个data
其实是_data
,可以验证一下:
let data = {
name: '张三',
age: 18
}
const vm = new Vue({
el: '#app',
data
})
控制台进行一下判断:
所以我们获取数据的时候,也可以通过vm._data.age
来获取
vue
为了编码更方便,进行了数据代理,遍历data
中的所有属性,把每个属性都添加到vm
中,指定getter/setter
。
所以可以直接通过vm.age
来获取数据
基本原理:
- 通过
Object.defineProperty()
把data
对象中所有属性添加到vm
上 - 为每一个添加
vm
上的属性,都指定一个getter/setter
- 在
getter/setter
内部去操作(读/写)data
中对应的属性
实现双向绑定
双向绑定就是数据发生变化时,视图也跟着变。核心是数据劫持和发布者-订阅者模式
数据劫持实质就是使用defineProperty
重写getter/setter
。当数据改变时,set
就会劫持这个数据的变化,更新视图(view)
但是由于defineProperty
无法检测到对象和数组内部的变化,所以遇到属性为对象时,会递归观察该属性;遇到数组时,会重写push
、pop
、shift
等方法。
监测对象中的数据
最开始会想认为利用getter/setter
,但是这样会造成死循环。只要有人获取name
的值,就会调用get
,然后又会获取一次person.name
,造成死循环。set
同理。
//错误的代码!!!!!!!!!
let person = {
name: '张三',
}
Object.defineProperty(person, 'name', {
get: function() {
return person.name
},
set(value) {
person.age = name
}
})
正确的做法是:监听数据的每一个属性,当监听到属性值发生变化时,通知订阅者去更新视图,重新进行模板解析。
<script>
let data = {
name: '张三',
}
//创建一个观察者实例对象,用于监视data中属性的变化
const obs = new Observer(data)
//准备一个vm实例对象
let vm = {}
vm._data = data = obs
function Observer(obj) {
//汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj)
//遍历
keys.forEach((k) => {
Object.defineProperty(this, k, {
get() {
return obj[k]
},
set(val) {
obj[k] = val
}
})
})
}
</script>
上述代码只是一个例子,只会对一层对象进行处理,vue
的操作是递归,直到数据类型是简单数据类型。
如需给后添加的属性做响应式,可以使用
Vue.set(object,propertyName,value)
或vm.$set(object,propertyName,value)
data: {
student:{
name: '张三',
age: 18,
friends:[
{name:'小明',age:20},
{name:'李四',age:15}
]
}
}
Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')
监测数组中的数据
这里可以去看一下vue
的官方文档:
通过包裹数组更新元素的方法实现,本质就是做了两件事
(1)调用原生对应的方法对数组进行更新
(2)重新解析模板,进而更新页面
所以在vue
修改数组中的某个元素一定要用如下方法:
- 使用API:
push()
,pop()
,shift()
,splice()
,sort()
,reverse()
等 Vue.set()
,vm.$set()
Vue2响应式原理的更多相关文章
- [切图仔救赎]炒冷饭--在线手撸vue2响应式原理
--图片来源vue2.6正式版本(代号:超时空要塞)发布时,尤雨溪推送配图. 前言 其实这个冷饭我并不想炒,毕竟vue3马上都要出来.我还在这里炒冷饭,那明显就是搞事情. 起因: 作为切图仔搬砖汪,长 ...
- Vue2 响应式原理
我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理. Object的响应式原理: 可以看到,其实核心就是把object的所有属性都加上getter. ...
- vue2响应式原理与vue3响应式原理对比
VUE2.0 核心 对象:通过Object.defineProtytype()对对象的已有属性值的读取和修改进行劫持 数组:通过重写数组更新数组一系列更新元素的方法来实现元素的修改的劫持 Object ...
- 由浅入深,带你用JavaScript实现响应式原理(Vue2、Vue3响应式原理)
由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...
- vue3剖析:响应式原理——effect
响应式原理 源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity 模块 ref: reactive: compu ...
- vue2.0与3.0响应式原理机制
vue2.0响应式原理 - defineProperty 这个原理老生常谈了,就是拦截对象,给对象的属性增加set 和 get方法,因为核心是defineProperty所以还需要对数组的方法进行拦截 ...
- Vue2.x响应式原理
一.回顾Vue响应式用法 vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue响应式原理的实现-面试必问
Vue2的数据响应式原理 1.什么是defineProperty? defineProperty是设置对象属性,利用属性里的set和get实现了响应式双向绑定: 语法:Object.definePro ...
随机推荐
- WebGL 的 Hello World
本文整理自 div 侠于 凹凸 2022 年技术分享,简单介绍了 WebGL 画一个基础图形的流程,希望你了解之后,在使用 3d 渲染库的时候可以少点迷糊. 四种常用的页面绘图工具 关于h5页面的图形 ...
- 07模块化设计之top_down
一设计功能:(一)用两个分频模块,实现16分频,且让输入a 和b在16个系统时钟内,相与一次. (二)模块化设计思想(结构化思维) 拆分,即把一个系统划分成多个功能模块,控制模块,组合模块.然后从功能 ...
- BUAA_DS_北航数据结构:输出全排列
输入一个数 \(n\),输出 \(1\sim n\) 的所有全排列,每个排列占一行,每个字符保留 \(5\) 个场宽.勤奋的同学一定已经开始打表了是吧. 说是能做肯定不是骗大家,那怎么做呢~ 其实回溯 ...
- 保姆教程系列二、Nacos实现注册中心
前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 上篇我们介绍到 保姆教程系列一.Linux搭建Nacos 注册中心原理 一.环境准备 Java版本:1.8+ (Linux ce ...
- spring学习二:jdbc相关回顾以及spring下dao
目录: Part一:回顾java web部分的jdbc.事务.连接池和dbutils工具等 : Part二:spring的JdbcTemplate使用: Part三:spring的事务处理: Part ...
- 什么是Spring beans?
Spring beans 是那些形成Spring应用的主干的java对象.它们被Spring IOC容器初始化,装配,和管理.这些beans通过容器中配置的元数据创建.比如,以XML文件中 的形式定义 ...
- 深入理解Java虚拟机-走进Java
一.Java技术体系 从广义上讲, Clojure. JRuby. Groovy等运行于Java虚拟机上的语言及其相关的程序都属于Java技术体系中的一员. 如果仅从传统意义上来看, Sun官方所定义 ...
- 如何给 Spring 容器提供配置元数据?
这里有三种重要的方法给 Spring 容器提供配置元数据. XML 配置文件. 基于注解的配置. 基于 java 的配置.
- django 三件套(render,redirect,HttpResponse)
Django基础必备三件套**: HttpResponse 内部传入一个字符串参数,返回给浏览器. from django.shortcuts import HttpResponse def inde ...
- vsftd及虚拟用户
临时需要搭建一个ftp,突然忘记怎么搞了,重新整一下,以后备用 vsftd及虚拟用户 1.安装vsftpd yum install vsftpd 2.添加用户(用于虚拟用户映射) adduser se ...