vue源码中computed和watch的解读
computed
- 会基于其内部的 响应式依赖 进行缓存。
- 只在相关 响应式依赖发生改变 时 它们才会重新求值。
- 可以在将模板中使用的常量放在计算属性中。
watch
- 监听数据变化，并在监听回调函数中返回数据变更前后的两个值。
- 用于在数据变化后执行 异步操作 或者开销较大的操作。
watchEffect
在 composition API中 watchEffect会在它所依赖的数据发生改变时立即执行，并且执行结果会返回一个函数，我们称它为stop函数
，可以用于停止监听数据变化，下面是示例代码演示：
const count = ref(0)
// -> log 0
const stop = watchEffect(() => {
console.log(count.value)
})
setTimeout(()=>{
// -> log 1
count.value++
},100)
// -> later
stop()下面我们来实现以上介绍的几个composition API
- computed -> let x = computed(()=> count.value + 3);
- watch -> watch(()=> count.value, (curVal, preVal) => {}, { deep, immediate })
- watchEffect -> let stop = watchEffect(()=> count.value + 3)
computed
核心思路是
// 简单定义
let computed = (fn) => {
let value;
return {
get value() {
return value
}
}
}
// 调用
let computedValue = computed(() => count.value + 3)
// 监听
watchEffect(() => {
document.getElementById('computed').innerText = computedValue.value
});
下面我们在此基础之上实现依赖更新的操作
let computed = (fn) => {
let value;
return {
get value() {
// 5手动执行一次依赖
value = fn()
return value
}
}
}
let count = ref(1);
let computedValue = computed(() => count.value + 3)
function add() {
document.getElementById('add').addEventListener('click',()=>{
count.value++
})
}
add()
watchEffect(() => {
document.getElementById('text').innerText = count.value
document.getElementById('computed').innerText = computedValue.value
});依赖缓存计算
呈上页面 -html
<!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>Vue3 - computed</title>
</head>
<body>
<div id="app">
result:
<span id="text">0</span>
<br />
computed:
<span id="computed">0</span>
</div>
<button id="add">add</button>
</body>
</html>包含了computed的实现的完整js代码。
;(function () {
let active
/*
* @params fn -> 要执行的函数
* @params option -> 可选参数
* @return effect -> 执行watchEffect
*/
let effect = (fn, options = {}) => {
let effect = (...args) => {
try {
active = effect
// 避免了死循环
return fn(...args)
} finally {
active = null
}
}
// 更新数据时也需要让schedular执行
effect.options = options
return effect
}
let watchEffect = function (cb) {
let runner = effect(cb)
runner()
}
// 需要有个队列来存储各项任务
let queue = []
// 通过微任务方式去执行队列中的任务
let nextTick = (cb) => Promise.resolve().then(cb)
// 将任务添加到队列
let queueJob = (job) => {
if (!queue.includes(job)) {
queue.push(job)
nextTick(flushJobs)
}
}
// 执行队列中的任务
let flushJobs = () => {
let job
while ((job = queue.shift()) !== undefined) {
job()
}
}
// 收集更多依赖
class Dep {
// 依赖收集，将响应依赖添加到deps中
constructor() {
this.deps = new Set()
}
depend() {
if (active) {
this.deps.add(active)
}
}
// 通知所有依赖更新
notify() {
// 将任务加到队列中
this.deps.forEach((dep) => {
dep.options && dep.options.schedular && dep.options.schedular()
queueJob(dep)
})
}
}
let ref = (initValue) => {
let value = initValue
let dep = new Dep()
return Object.defineProperty({}, 'value', {
get() {
dep.depend()
return value
},
set(newValue) {
value = newValue
dep.notify()
}
})
}
let computed = (fn) => {
let value
let dirty = true
let runner = effect(fn, {
// 通过钩子函数处理dirty参数
schedular: () => {
if (!dirty) {
dirty = true
}
}
})
return {
get value() {
if (dirty) {
value = runner()
// 缓存标识
dirty = false
// 这里在dirty改变为false之后需要在依赖发生变化时候重置为true,
}
return value
}
}
}
let count = ref(1)
// 同93 数据发生更新时让dirty 重置
let computedValue = computed(() => count.value + 3)
function add() {
document.getElementById('add').addEventListener('click', () => {
count.value++
})
}
add()
watchEffect(() => {
document.getElementById('text').innerText = count.value
document.getElementById('computed').innerText = computedValue.value
})
})()watch
// watch(()=> count.value, (curVal, preVal) => {}, { deep, immediate })
;(function () {
let active
/*
* @params fn -> 要执行的函数
* @params option -> 可选参数
* @return effect -> 执行watchEffect
*/
let effect = (fn, options = {}) => {
let effect = (...args) => {
try {
active = effect
// 避免了死循环
return fn(...args)
} finally {
active = null
}
}
// 更新数据时也需要让schedular执行
effect.options = options
return effect
}
let watchEffect = function (cb) {
let runner = effect(cb)
runner()
}
// 需要有个队列来存储各项任务
let queue = []
// 通过微任务方式去执行队列中的任务
let nextTick = (cb) => Promise.resolve().then(cb)
// 将任务添加到队列
let queueJob = (job) => {
if (!queue.includes(job)) {
queue.push(job)
nextTick(flushJobs)
}
}
// 执行队列中的任务
let flushJobs = () => {
let job
while ((job = queue.shift()) !== undefined) {
job()
}
}
// 收集更多依赖
class Dep {
// 依赖收集，将响应依赖添加到deps中
constructor() {
this.deps = new Set()
}
depend() {
if (active) {
this.deps.add(active)
}
}
// 通知所有依赖更新
notify() {
// 将任务加到队列中
this.deps.forEach((dep) => {
dep.options && dep.options.schedular && dep.options.schedular()
queueJob(dep)
})
}
}
let ref = (initValue) => {
let value = initValue
let dep = new Dep()
return Object.defineProperty({}, 'value', {
get() {
dep.depend()
return value
},
set(newValue) {
value = newValue
dep.notify()
}
})
}
let watch = (source, cb, options = {}) => {
const { immediate } = options
const getter = () => {
return source()
}
let oldValue
const runner = effect(getter, {
schedular: () => applyCbk()
})
const applyCbk = () => {
let newValue = runner()
if (newValue !== oldValue) {
cb(newValue, oldValue)
oldValue = newValue
}
}
// 有默认值时执行回调
if (immediate) {
applyCbk()
} else {
oldValue = runner()
}
}
let count = ref(1)
function add() {
document.getElementById('add').addEventListener('click', () => {
count.value++
})
}
add()
watch(
() => count.value,
(newValue, oldValue) => {
console.log(newValue, oldValue)
},
{ immediate: true }
)
})()参数1响应式更新，参数2使用schedular执行回调，参数3 如果存在时就默认执行回调2
watchEffect
- stop方法的实现
- 数组API响应式执行依赖更新
- Vue.set的实现，数组索引加入代理中
// let stop = watchEffect(()=> count.value + 3)
;(function () {
let active
/*
* @params fn -> 要执行的函数
* @params option -> 可选参数
* @return effect -> 执行watchEffect
*/
let effect = (fn, options = {}) => {
// 包裹一次effect 避免对fn的污染，保证fn纯净
let effect = (...args) => {
try {
active = effect
// 避免了死循环
return fn(...args)
} finally {
active = null
}
}
// 更新数据时也需要让schedular执行
effect.options = options
// 用于反向查找
effect.deps = [];
return effect
}
let cleanUpEffect = (effect) => {
const { deps } = effect;
deps.forEach(dep => dep.delete(effect))
}
let watchEffect = function (cb) {
let runner = effect(cb)
runner()
// 返回一个stop函数，清楚当前的监听
return () => {
cleanUpEffect(runner)
}
}
// 需要有个队列来存储各项任务
let queue = []
// 通过微任务方式去执行队列中的任务
let nextTick = (cb) => Promise.resolve().then(cb)
// 将任务添加到队列
let queueJob = (job) => {
if (!queue.includes(job)) {
queue.push(job)
nextTick(flushJobs)
}
}
// 执行队列中的任务
let flushJobs = () => {
let job
while ((job = queue.shift()) !== undefined) {
job()
}
}
// 收集更多依赖
class Dep {
// 依赖收集，将响应依赖添加到deps中
constructor() {
this.deps = new Set()
}
depend() {
if (active) {
this.deps.add(active)
// 添加依赖时追加当前的deps, 实现双向互通。双向索引
active.deps.push(this.deps)
}
}
// 通知所有依赖更新
notify() {
// 将任务加到队列中
this.deps.forEach((dep) => {
dep.options && dep.options.schedular && dep.options.schedular()
queueJob(dep)
})
}
}
let ref = (initValue) => {
let value = initValue
let dep = new Dep()
return Object.defineProperty({}, 'value', {
get() {
dep.depend()
return value
},
set(newValue) {
value = newValue
dep.notify()
}
})
}
let count = ref(1)
function add() {
document.getElementById('add').addEventListener('click', () => {
count.value++
})
}
add()
let stop = watchEffect(() => {
document.getElementById('text').innerText = count.value
})
setTimeout(() => {
stop();
}, 3000);
})()
免责声明
本文是通过对vue响应式computed计算属性，watch, watchEffect源码学习的一些笔记分享，会涉及到一些引用，出处不详，如商业用途谨慎转载。
vue源码中computed和watch的解读的更多相关文章
- 【Vue】VUE源码中的一些工具函数
Vue源码-工具方法 /* */ //Object.freeze()阻止修改现有属性的特性和值,并阻止添加新属性. var emptyObject = Object.freeze({}); // th ...
- vue 源码解析computed
计算属性 VS 侦听属性 Vue 的组件对象支持了计算属性 computed 和侦听属性 watch 2 个选项,很多同学不了解什么时候该用 computed 什么时候该用 watch.先不回答这个问 ...
- 了解一下vue源码中vue 的由来
我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-r ...
- Vue源码中compiler部分逻辑梳理（内有彩蛋）
目录 一. 简述 二. 编译流程 三. 彩蛋环节 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 ...
- nodeType属性在vue源码中的使用
每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型中定义12个常量表示: nodeType在vue中的应用 在vue编译的过程中需要查找html结构中的双大括号 ...
- 从Vue源码中我学到了几点精妙方法
话不多说,赶快试试这几个精妙方法吧!在工作中肯定会用得到. 立即执行函数 页面加载完成后只执行一次的设置函数. (function (a, b) { console.log(a, b); // 1,2 ...
- 【Vue源码学习】依赖收集
前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- Vue源码学习（一）：调试环境搭建
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 ...
随机推荐
- CPU 是如何认识和执行代码的
CPU的介绍 CPU 也称为微处理器,是计算机的心脏和/或大脑. 深入研究计算机的核心,可以帮助我们有效地编写计算机程序. CPU 是计算机的心脏和大脑,它执行提供给他们的指令.它的主要工作是执行算术 ...
- fastjson过滤多余字段
/** * Description:过滤实体中的字段 * @param src 需要过滤的对象,如 list,entity * @param clazz 实体的class ...
- jenkins之代码回滚
#:通过传参数方式 #:保存后就会看到这样 #;:我们在jenkins服务器写一个脚本 root@ubuntu:~# mkdir /root/script/web1 -pv mkdir: create ...
- html5 绘图
SVG 在 SVG 中,每个元素是图型与数据相结合的一个对象. 修改对象属性的值,图型会立即体现出这种变化. 因为是对象,所以支持事件处理. D3使用的是SVG Canvas 不支持事件处理. cha ...
- zabbix之监控面试
先用shell脚本把值取出来,然后重启agent,在server端用zabbix-get命令测试一下,看能不能通过userparameter指定的可以将值取出来,如果没问题,在在网页创建模板,加监控项 ...
- SpringBoot(4)：整合Mybatis
1. 导入mybatis所需要的依赖 1 <!-- 引入 myBatis,这是 MyBatis官方提供的适配 Spring Boot的--> 2 <dependency> 3 ...
- 查询表名和表备注（中文名） 及 dba_tables、all_tables和user_tables的区别
1. select a.* from ALL_TAB_COMMENTS a --查表名和表中文名select a.* from ALL_TAB_COLUMNS a --查询表字段属性select a. ...
- jQuery全局进行方法扩展
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>01 ...
- 【力扣】973. 最接近原点的 K 个点
我们有一个由平面上的点组成的列表 points.需要从中找出 K 个距离原点 (0, 0) 最近的点. (这里,平面上两点之间的距离是欧几里德距离.) 你可以按任何顺序返回答案.除了点坐标的顺序之外, ...
- Linkerd Service Mesh 服务配置文件规范
服务配置文件 为 Linkerd 提供有关服务的附加信息. 以下是可以使用服务配置文件完成的所有操作的参考. 系列 中文手册(https://linkerd.hacker-linner.com) Sp ...