vue-reactive

KO | EN

gitlite — search

#hacktoberfest #react #ai #android #deep-learning #java #windows #awesome #kubernetes #awesome-list #security #pytorch #ios #openai

(★ 63)

:rocket: 用最简短的方式实现符合 Vue2 源码结构的响应式原理。

vue-reactive 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-reactive
用最简短的方式完成符合Vue源码结构的响应式流程。
排除掉Vue内部一些和响应式无关的复杂逻辑，排除一些优化逻辑，剩下实现响应式的关键步骤，更加有利于理解Vue的响应式是怎么设计的。

## 预览地址
https://sl1673495.github.io/vue-reactive/.
请在控制台打印出data后尽情玩耍。

## 用法
```js
import { reactive, computed, watch, Watcher } from '../src'

const data = reactive({
  msg: 'Hello World',
  number: 1,
})

const numberPlusOne = computed(() => data.number + 1)

new Watcher(() => {
 document.getElementById('app').innerHTML = `
 当前data的状态是：
 ${JSON.stringify(data)}
 请在控制台输入data，分别改变data.msg尝试效果
 data.msg被watch了，可以打印出新旧值的变化
 msg is ${data.msg} 
 `
})

new Watcher(() => {
 document.getElementById('app2').innerHTML = `
 请在控制台改变data.number尝试computed效果
 data.number现在是${data.number}
 computed: 1 + number 是 ${numberPlusOne.value}
 `
})

watch(
  () => data.msg,
  (newVal, oldVal) => {
    console.log('newVal: ', newVal)
    console.log('old: ', oldVal)
  }
)

;(window as any).data = data
```

## 源码解读
[手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch实现](https://juejin.im/post/5db6433b51882564912fc30f)

## 版本
已经全面使用ts重构，js版本请查看标签`js-version`

vue-reactive

vue-reactive 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-reactive

vue-reactive 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README