发表于 |

Vue源码阅读（三）

响应式数据

data**，props，computed，watch**

响应式原理

Object.defineProperty** + 观察者模式**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 定义响应式，
function defineReactive (obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: false,
    configurable: true,
    get: function getter () {
      console.log('get:' + key)
      return val
    },
    set: function setter (newVal) {
      console.log('set: ' + key)
      val = newVal
    }
  })
}

const data = { name: '张三 ', age: 18 }

const keys = Object.keys(data)

keys.map(key => {
  defineReactive(data, key, data[key])
})

console.log(data.name)   // get: name

data.age = 20            // set: age

image.png

observe (vm.data)

image.png

render.call(vm)

image.png

vm.flag = 1 —-> vm.flag.set(1)

案例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 1
vm.flag = 1

// 2
vm.male.name = 'ted'
vm.male.age = 40

// 3
vm.male = { name: 'ted', age: 40 }
vm.male.name = 'abc'
vm.male.age = 41

vm.male = {}
vm.male.name = 'ted'
vm.male.age = 40

// 4
function onClick (vm) {
  vm.male.name = 'xxx'
  vm.male.age = 50
  console.log(document.getElementById('demo').innerText)
  vm.$nextTick(() => {
    console.log(document.getElementById('demo').innerText)
  })
}

event-loop

event-loop.png

ISSUE（#3371）

image.png

发表于 |

Vue源码阅读（二）

开发调试

npm run dev

示例演示

变量：
vm
vm.$options

new Vue()

1586230039996-b1993fb9-a042-41c7-9147-1d021b631bd4.png

从入口开始

import Vue from *
_render() –> compileToFunction() –> baseCompile() –> parse() –> generate()
_update() –> patch() –>

总结归纳

流程图
无标题绘图.jpg


发表于 |

方式一（标签化形式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const store = configureStore()
const history = syncHistoryWithStore(hashHistory, store)

const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={Main} onEnter={processToken}>
        <IndexRoute component={ItemDefinitions}/>
        <Route  path='ItemDefinitions' component={ItemDefinitions}></Route>
        <Route  path='StockItem' component={StockItem}></Route>  
        <Route  path='StockTransaction' component={StockTransaction}></Route>  
        <Route  path='RequisitionedDetails' component={RequisitionedDetails}></Route>    
        <Route  path='validatedemo' component={ValidateDemo}></Route>
        <Route path='*' component={ItemDefinitions}></Route>
      </Route>
    </Router>
  </Provider>
)

export default router

这种方式比较常见，通过Provide传入 store 和 history，然后所有的路由配置在一个地方，便于代码查找和新增。

方式二（json配置文件形式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// createRoutes.js

const createRoutes = store => ({
  path: '/index',
  getComponent(nextState, cb) {
    import('LAYOUTS/HomeLayout').then((HomeLayout) => {
      cb(null, HomeLayout.default);
    });
  },
  onChange(preState, nextState) {
    const { menuState } = store.getState();
    const { selected, opened } = menuState;
    const { pathname } = nextState.location;
    if (pathname !== selected) {
      store.dispatch(changeMenuSelected(pathname));
    }
    const nowOpened = getMenusOpened(pathname);
    if (nowOpened && nowOpened !== opened) {
      store.dispatch(changeMenuOpened(nowOpened));
    }
  },
  indexRoute: HomeRoute(store),
  childRoutes: [
    EInvoiceManage(store),
    EInvoiceHead(store),
    MakeInvoiceCompany(store),
    MakeInvoiceProject(store),
    MakeInvoiceSource(store),
    ConfigWarning(store),
    ConfigAuthority(store)
  ]
});
export default createRoutes;

同样是传入store 和 history，这种形式，路由对store和history的操作大多集中在各个组件逻辑里。

发表于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 1 fib(100)
function fib(n) {
	if (n <= 1) {
		return 1
	}
	return fib(n-1) + fib(n-2)
}
// fib(100)

// 2 fib2(100000)
function fib2(n) {
	if (n <= 1) {
		return 1
	}
	if (fib2[n]) {
		return fib2[n]
	}
	fib2[n] = fib2(n-1) + fib2(n-2)
	return fib2[n]
}

// 3 fib3(1000000)
function fib3(n , f1 = 1 , f2 = 1) {
  if( n <= 1 ) {
  	return f2
  }
  return fib3(n - 1, f2, f1 + f2)
}