Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit68462b7

Browse files
committed
Ref 实现
1 parentd99ea8c commit68462b7

File tree

7 files changed

+221
-23
lines changed

7 files changed

+221
-23
lines changed

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88

99
###目录
1010

11-
| 章节| 目录|
12-
| :------------| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
13-
| 整体架构|[1. Vue3 设计思想](https://2xiao.github.io/leetcode-js/vue/1.html) <br>[2. 开发环境搭建](https://2xiao.github.io/leetcode-js/vue/2.html)|
14-
| 响应式原理|[3. 响应式数据核心](https://2xiao.github.io/leetcode-js/vue/3.html) <br>[4. Reactivity 模块](https://2xiao.github.io/leetcode-js/vue/4.html) <br>[5. Ref的概念](https://2xiao.github.io/leetcode-js/vue/5.html) <br>[6. Computed 实现原理](https://2xiao.github.io/leetcode-js/vue/6.html) <br>[7. Watch & WatchEffect](https://2xiao.github.io/leetcode-js/vue/7.html)|
15-
| 渲染原理|[8. 实现 runtime-dom](https://2xiao.github.io/leetcode-js/vue/8.html) <br>[9. 实现 runtime-core](https://2xiao.github.io/leetcode-js/vue/9.html)|
16-
| Diff 算法原理|[10. 实现 Diff 算法](https://2xiao.github.io/leetcode-js/vue/10.html)|
17-
| 组件渲染原理|[11. 实现 Text 和 Fragment](https://2xiao.github.io/leetcode-js/vue/11.html) <br>[12. 实现组件渲染](https://2xiao.github.io/leetcode-js/vue/12.html) <br>[13. 实现 setup 函数](https://2xiao.github.io/leetcode-js/vue/13.html) <br>[14. 实现函数式组件](https://2xiao.github.io/leetcode-js/vue/14.html) <br>[15. 依赖注入原理](https://2xiao.github.io/leetcode-js/vue/15.html) <br>[16.实现 Ref](https://2xiao.github.io/leetcode-js/vue/16.html)|
18-
| 其他实现原理|[17. 实现 Teleport](https://2xiao.github.io/leetcode-js/vue/17.html) <br>[18. 实现 Transition](https://2xiao.github.io/leetcode-js/vue/18.html) <br>[19. 实现 KeepAlive](https://2xiao.github.io/leetcode-js/vue/19.html) <br>[20. 实现异步组件](https://2xiao.github.io/leetcode-js/vue/20.html)|
19-
| 模板编译原理|[21. 编译优化](https://2xiao.github.io/leetcode-js/vue/21.html) <br>[22. 模板转化 AST 语法树](https://2xiao.github.io/leetcode-js/vue/22.html) <br>[23. 代码转化](https://2xiao.github.io/leetcode-js/vue/23.html) <br>[24. 代码生成](https://2xiao.github.io/leetcode-js/vue/24.html)|
11+
| 章节| 目录|
12+
| :------------| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
13+
| 整体架构|[1. Vue3 设计思想](https://2xiao.github.io/leetcode-js/vue/1.html) <br>[2. 开发环境搭建](https://2xiao.github.io/leetcode-js/vue/2.html)|
14+
| 响应式原理|[3. 响应式数据核心](https://2xiao.github.io/leetcode-js/vue/3.html) <br>[4. Reactivity 模块](https://2xiao.github.io/leetcode-js/vue/4.html) <br>[5. Ref实现](https://2xiao.github.io/leetcode-js/vue/5.html) <br>[6. Computed 实现原理](https://2xiao.github.io/leetcode-js/vue/6.html) <br>[7. Watch & WatchEffect](https://2xiao.github.io/leetcode-js/vue/7.html)|
15+
| 渲染原理|[8. 实现 runtime-dom](https://2xiao.github.io/leetcode-js/vue/8.html) <br>[9. 实现 runtime-core](https://2xiao.github.io/leetcode-js/vue/9.html)|
16+
| Diff 算法原理|[10. 实现 Diff 算法](https://2xiao.github.io/leetcode-js/vue/10.html)|
17+
| 组件渲染原理|[11. 实现 Text 和 Fragment](https://2xiao.github.io/leetcode-js/vue/11.html) <br>[12. 实现组件渲染](https://2xiao.github.io/leetcode-js/vue/12.html) <br>[13. 实现 setup 函数](https://2xiao.github.io/leetcode-js/vue/13.html) <br>[14. 实现函数式组件](https://2xiao.github.io/leetcode-js/vue/14.html) <br>[15. 依赖注入原理](https://2xiao.github.io/leetcode-js/vue/15.html) <br>[16.简化版 Ref 实现](https://2xiao.github.io/leetcode-js/vue/16.html)|
18+
| 其他实现原理|[17. 实现 Teleport](https://2xiao.github.io/leetcode-js/vue/17.html) <br>[18. 实现 Transition](https://2xiao.github.io/leetcode-js/vue/18.html) <br>[19. 实现 KeepAlive](https://2xiao.github.io/leetcode-js/vue/19.html) <br>[20. 实现异步组件](https://2xiao.github.io/leetcode-js/vue/20.html)|
19+
| 模板编译原理|[21. 编译优化](https://2xiao.github.io/leetcode-js/vue/21.html) <br>[22. 模板转化 AST 语法树](https://2xiao.github.io/leetcode-js/vue/22.html) <br>[23. 代码转化](https://2xiao.github.io/leetcode-js/vue/23.html) <br>[24. 代码生成](https://2xiao.github.io/leetcode-js/vue/24.html)|
2020

2121
---
2222

‎packages/reactivity/dist/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@
1515
// } from "/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js";
1616

1717
// 自己的
18-
import{reactive,effect}from"./reactivity.js";
18+
import{reactive,effect,ref,toRef,toRefs}from"./reactivity.js";
1919

20-
// reactive 让数据变成响应式的
21-
// effect 副作用 数据变化后可以让effect重新执行 组件、watch、computed 都是基于effect来实现
22-
letobj={name:"erxiao",age:18};
23-
conststate=reactive(obj);
20+
constobj=reactive({name:"erxiao",age:18});
21+
// console.log({ ...obj });
22+
console.log(obj);
2423

24+
const{ name}=toRefs(obj);
2525
effect(()=>{
26-
app.innerHTML=`姓名${state.name} 年龄${state.age}`;
26+
app.innerHTML=name.value=="erxiao" ?1 :2;
2727
});
2828

2929
setTimeout(()=>{
30-
state.age++;// 数据变化后effect会再次重新执行
30+
name.value="xiaoge";
3131
},1000);
3232
</script>
3333
</body>

‎packages/reactivity/dist/reactivity.js‎

Lines changed: 98 additions & 1 deletion
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp