odjbin/vue-core-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(vue): 构建ref简单数据类型的响应性

Browse Source
This commit is contained in:
dj
2026-02-05 23:38:51 +08:00
parent 6b7b452a56
commit 2ed86a03b5
3 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/shared/src/index.ts
View File

@@ -5,9 +5,7 @@ export const isObject = (val: unknown) =>
val !== null && typeof val === 'object' val !== null && typeof val === 'object'
/** /**
* 对比两个数据是否发生改变 * 对比两个数据是否发生改变, 如果发生改变则返回true
* @param value
* @param oldValue
*/ */
export const hasChanged = (value: any, oldValue: any): boolean => export const hasChanged = (value: any, oldValue: any): boolean =>
!Object.is(value, oldValue) !Object.is(value, oldValue)

21
packages/vue/examples/reactivity/ref-shallow.html Normal file
View File

@@ -0,0 +1,21 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const { ref,effect } = Vue
const obj=ref('张三')
effect(()=>{
document.querySelector('#app').innerText=obj.value
})
setTimeout(()=>{
obj.value='李四'
},2000)
</script>
</html>

9
packages/vue/examples/reactivity/ref.html
View File

@@ -9,16 +9,15 @@
<div id="app"></div> <div id="app"></div>
</body> </body>
<script> <script>
const { reactive,effect } = Vue const { ref,effect } = Vue
const obj=reactive({ const obj=ref({
name:'张三' name:'张三'
}) })
effect(()=>{ effect(()=>{
document.querySelector('#app').innerText=name document.querySelector('#app').innerText=obj.value.name
}) })
setTimeout(()=>{ setTimeout(()=>{
obj.name='李四' obj.value.name='李四'
},2000) },2000)
</script> </script>
</html> </html>