大家好,又见面了,我是你们的朋友全栈君。
Vue的响应式原理
- 数据发生改变,界面跟着更新,并不是理所当然的,Vue内部是做了很多封装的
依赖技术的分析和学习
- 首先,来看一个最简单的Vue响应式例子:
<div id="app">
{
{message}}
</div>
<script src='./js/vue.js'></script>
<script> const app = new Vue({
el: '#app', data: {
message: '哈哈哈哈', name: 'coderYYY' } }) </script>
- 分析
- 1.app.message修改数据,Vue内部是如何监听message数据的改变?
- Vue2 ->
object.defineProperty
-> 监听对象属性的改变 - Vue3 ->
Proxy
- Vue2 ->
- 2.当数据发生改变,Vue是如何知道要通知哪些人,界面发生刷新?
- 发布者订阅者模式
- 1.app.message修改数据,Vue内部是如何监听message数据的改变?
const obj = {
message: '哈哈哈哈',
name: 'yyy'
}
// 1.监听值的改变 -> Object.defineProperty(属性所在的对象,要添加或者修改的对象属性,属性描述符)
Object.keys(obj).forEach(key => {
let value = obj[key]
Object.defineProperty(obj, key, {
set(newValue) {
console.log('监听' + key + '改变');
// 告诉谁?谁用告诉谁?谁在用?
// 根据解析html代码,获取到哪些人有用属性
// 张三/李四/王五 在用
value = newValue
// dep.notify()// 通知
},
get() {
// 谁用一次就会调用一次get
// 张三: get -> update
// 李四: get -> update
// 王五: get -> update
console.log('获取' + key + '对应的值');
return value
}
})
})
// 2.发布者订阅者模式
// 发布者
class Dep {
// 存储所有对属性有依赖的东西
constructor() {
this.subscribe = [] // subscribe 订阅 这个数组记录谁要订阅属性
}
addSub(watcher) {
this.subscribe.push(watcher)
}
notify(){
this.subscribe.forEach(item=>{
item.update()
})
}
}
const dep = new Dep()
// 订阅者
class Watcher {
constructor(name) {
this.name = name;
}
update() {
console.log(this.name + '发生update');
}
}
const w1 = new Watcher('张三')
dep.addSub(w1)
const w2 = new Watcher('李四')
dep.addSub(w2)
const w3 = new Watcher('王五')
dep.addSub(w3)
dep.notify()
通过图解理解过程
-
视频对应目录
-
最后,附一个推荐文章帮助理解
深入浅出vue的响应式原理,看这一篇就够了!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135185.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...