vue 双向绑定实现:
vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时,则会调用getter方法,当data中的属性被改变时,则会调用setter方法。
react----redux
基本思想是整个应用的 state 保持在一个单一的 store 中。 store 就是一个简单的 javascript 对象, 而改变应用 state 的唯一方式是在应用中触发 actions,然后为这些 actions 编写 reducers 来修改 state。 整个 state 转化是在 reducers 中完成,并且不应该有任何副作用。
在 Redux 中,何为 store
Store 是一个 javascript 对象,它保存了整个应用的 state。与此同时,Store 也承担以下职责:
- 允许通过 getState() 访问 state
- 运行通过 dispatch(action) 改变 state
- 通过 subscribe(listener) 注册 listeners
- 通过 subscribe(listener) 返回的函数处理 listeners 的注销
何为 action
Actions 是一个纯 javascript 对象,它们必须有一个 type 属性表明正在执行的 action 的类型。实质上,action 是将数据从应用程序发送到 store 的有效载荷。
何为 reducer
一个 reducer 是一个纯函数,该函数以先前的 state 和一个 action 作为参数,并返回下一个 state。
Redux Thunk 的作用 Redux thunk 是一个允许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。如果满足某个条件,thunk 则可以用来延迟 action 的派发(dispatch),这可以处理异步 action 的派发(dispatch)。 何为纯函数(pure function) 一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数,这也意味着一个纯函数对于同样的参数总是返回同样的结果。
vuex 是基于redux
- 全局的store
- 响应式
- 不能直接修改,commit(mutation)
vuex使用单一状态树 吧store的实例注入到所有的子组件,mutation处理同步事务
- action : 提交mutation,异步
- module
vue更新data
- 异步更新
- 多次更新data,只在最后一次渲染
react的setState
state → 生命周期处理 → 触发render → 创建虚拟DOM → 生成fiberDom → diff → 生成新的任务 → 任务分片 → 渲染
- 两个参数。
setState(updater,[callback])
,第一个参数是更新的对象,第二个参数是更新完成的回调函数; - setStat本身执行过程和代码是同步的
- 合成事件(onClick、onChanged等)和钩子函数中setState是异步的,将多次合并成一次更新;
- 在原生事件和 setTimeout 中都是同步的。
- 浅合并 Objecr.assign()
react的setState流程
- 将state放入数组(队列);
- 检查是否在更新阶段
- 是:组件放在dirtyComponent
- 否:调用update更新,标记当前处于更新阶段
- 最后再遍历dirtyComponent执行更新
react和vue的比较
相同
- vitual dom
- 组件化
- props,单一数据流
不同点
- react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
- 状态管理(react)
- 对象属性(vue)
- vue:view——medol之间双向绑定
- vue:组件之间的通信(props,callback,emit)
路由
- HTML5 提供的history API (pushState,replaceState,popsState)
- hashRouter。原理:window.location.hash不刷新,window.location.pathname要刷新
- history(H5)。window.history.pushState不刷新,改变pathname