vue3.0响应式原理.reactive watchEffect

固定值

let activeEffect;
class Dep {constructor(value) {this.subscribes = new Set()this._value = value}get value() {this.depend()return this._value}set value(newValue) {this._value = newValuethis.notify()}depend() {if (activeEffect) {this.subscribes.add(activeEffect)}}notify() {this.subscribes.forEach(effect => {effect()})}
}function watchEffect(effect) {activeEffect = effect effect()activeEffect = null
}const dep = new Dep('hello!')
watchEffect(() => {console.log(dep.value) // hello！
})
dep.value = 'change!' // change!

Object.defineProperty

let activeEffect;class Dep {subscribes = new Set()depend() {if (activeEffect) {this.subscribes.add(activeEffect)}}notify() {this.subscribes.forEach(effect => {effect()})}
}function watchEffect(effect) {activeEffect = effect effect()activeEffect = null
}function reactive(raw) {Object.keys(raw).forEach(key => {const dep = new Dep()let value = raw[key]Object.defineProperty(raw, key, {get() {dep.depend()return value},set(newValue) {value = newValuedep.notify()}})})return raw
}const state = reactive({count: 1
})watchEffect(() => {console.log(state.count)
})state.count++

Proxy

let activeEffect;class Dep {subscribes = new Set()depend() {if (activeEffect) {this.subscribes.add(activeEffect)}}notify() {this.subscribes.forEach(effect => {effect()})}
}function watchEffect(effect) {activeEffect = effecteffect()activeEffect = null
}const targetMap = new WeakMap()function getDep(target, key) {let depMap = targetMap.get(target)if (!depMap) {depMap = new Map()targetMap.set(target, depMap)}let dep = depMap.get(key)if (!dep) {dep = new Dep()depMap.set(key, dep)}return dep
}
const reactiveHandlers = {get(target, key, receiver) {const dep = getDep(target, key)dep.depend()return Reflect.get(target, key, receiver)},set(target, key, value, receiver) {const dep = getDep(target, key)let result = Reflect.set(target, key, value, receiver)dep.notify()return result}
}
function reactive(raw) {return new Proxy(raw, reactiveHandlers)
}const state = reactive({count: 1
})watchEffect(() => {console.log(state.count)
})state.count++

vue3.0响应式原理.reactive watchEffect相关推荐

Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
arduinowifi.send怎么获取响应_Vue3.0 响应式原理（一）
前几天,回顾整理下关于vue2.0的响应式原理.温故而知新么,那么今天,整理了一下关于vue3.0的响应式原理,利用 JavaScript 来写的.本着尽可能的清晰易懂的原则,所以,可能会分几篇文章来 ...
手写Vue3.0响应式
github源码地址一. Reflect拦截器 Reflect(反射) 是一个内置的对象,它提供拦截 JavaScript 操作的方法.Reflect的所有属性和方法都是静态的(就像Math对象). ...
手写简单vue3响应式原理(reactive ref toRef toRefs)
reactive ref toRef toRefs // 判断对象是否是对象 const isObject = val => val !== null && typeof val ...
实现vue2.0响应式原理
很久之前为了面试,看了一些分析源码的博客,没有最近重新看一下vue的源码,匆匆浏览记住一些概念,因为懒惰,后面也没有再去深入探索:前段时间痛定思痛,觉得不能这样下去,过一下vue源码,此文章也是为了记 ...
matlabeig函数根据什么原理_vue3.0 源码解析二：响应式原理（下)
一回顾上文上节我们讲了数据绑定proxy原理,vue3.0用到的基本的拦截器,以及reactive入口等等.调用reactive建立响应式,首先通过判断数据类型来确定使用的hander,然后创建p ...
vue3.0 Beta发布，顺便来看看Vue3 的响应式和以前有什么区别
前言 vue 3.0 Beta 测试版发布可以通过vue-cli-plugin-vue-next创建一个vue3.0的beta项目. 目前尚不支持IE11,后期可能会处理兼容版本. 对vue3源码有 ...
TS手写简陋版reactive响应式原理(依赖收集，依赖更新)
最近博主看源码了解到了vue3的响应式原理 vue3的响应式实现是依赖收集与依赖更新,vue3已经从Object.property更换成Proxy,Proxy相比于前者可以直接监听对象数组,对于深层次 ...

vue3.0响应式原理.reactive watchEffect

固定值

Object.defineProperty

Proxy

vue3.0响应式原理.reactive watchEffect相关推荐

最新文章

热门文章