再聊VUE框架

再聊VUE框架

1. nextTick
在下次dom 更新循环结束之后执⾏延迟回调，可⽤于获取更新后的 dom 状态 新版本中默认是mincrotasks , v-on中会使⽤ macrotasks
macrotasks任务的实现:
setImmediate / MessageChannel / setTimeout
2. ⽣命周期
init
initLifecycle/Event，往vm上挂载各种属性
callHook: beforeCreated: 实例刚创建
initInjection/initState: 初始化注⼊和 data响应性
created: 创建完成，属性已经绑定， 但还未⽣成真实 dom进⾏元素的挂载：$el / vm.$mount()
是否有template : 解析成 render function
*.vue⽂件: vue-loader会将 <template> 编译成render function
beforeMount: 模板编译/挂载之前 执⾏render function ，⽣成真实的dom，并替换到 dom tree中
mounted : 组件已挂载update 执⾏ diff 算法，⽐对改变是否需要触发UI更新
flushScheduleQueue
watcher.before: 触发 beforeUpdate 钩⼦ - watcher.run(): 执⾏ watcher中的
notify，通知所有依赖项更新UI触发 updated钩⼦: 组件已更新
actived / deactivated(keep-alive) : 不销毁，缓存，组件激活与失活
destroy
beforeDestroy : 销毁开始 销毁⾃身且递归销毁⼦组件以及事件监听
remove() : 删除节点
watcher.teardown() : 清空依赖
vm.$off() : 解绑监听
destroyed: 完成后触发钩⼦
上⾯是vue的声明周期的简单梳理，接下来我们直接以代码的形式
来完成vue的 初始化

new Vue({})
// 初始化Vue实例
function _init() {
// 挂载属性
initLifeCycle(vm)
// 初始化事件系统，钩⼦函数等
initEvent(vm)
// 编译slot、vnode
initRender(vm)
// 触发钩⼦
callHook(vm, 'beforeCreate')
// 添加inject功能
initInjection(vm)
// 完成数据响应性 props/data/watch/computed/methods
initState(vm)
// 添加 provide 功能
initProvide(vm)
// 触发钩⼦
callHook(vm, 'created')
// 挂载节点
if (vm.$options.el) {
vm.$mount(vm.$options.el)
} }
// 挂载节点实现
function mountComponent(vm) {
// 获取 render function
if (!this.options.render) {
// template to render
// Vue.compile = compileToFunctions
let { render } = compileToFunctions()
this.options.render = render
}
// 触发钩⼦
callHook('beforeMounte')
// 初始化观察者
// render 渲染 vdom，
vdom = vm.render()
// update: 根据 diff 出的 patchs 挂载成真实的 dom 
vm._update(vdom)
// 触发钩⼦ 
callHook(vm, 'mounted') }
// 更新节点实现
funtion queueWatcher(watcher) {
nextTick(flushScheduleQueue) }
// 清空队列
function flushScheduleQueue() {
// 遍历队列中所有修改
for(){
// beforeUpdate
watcher.before()

// 依赖局部更新节点
watcher.update()
callHook('updated')
} }
// 销毁实例实现
Vue.prototype.$destory = function() {
// 触发钩⼦
callHook(vm, 'beforeDestory')
// ⾃身及⼦节点
remove()
// 删除依赖
watcher.teardown()
// 删除监听
vm.$off()
// 触发钩⼦
callHook(vm, 'destoryed') 
}

3. Proxy 相⽐于 defineProperty 的优势
数组变化也能监听到
不需要深度遍历监听

 let data = { a: 1 }
let reactiveData = new Proxy(data, {
get: function(target, name){
// ...
},
// ...
})

4. vue-router
mode
hash
history
跳转
this.$router.push()
<router-link to=""></router-link>
占位

<router-view></router-view>

5. vuex
state : 状态中⼼
mutations: 更改状态
actions : 异步更改状态
getters : 获取状态
modules : 将 state分成多个modules ，便于管理

每天一句中文式外语

俄语

— Хочу приглашать вас в театр (в кино‚на стол‚ко мне 
в гости)
（哈球 普里格拉习气 瓦斯 付 节阿特尔[付 给诺，纳 斯多，嘎 母聂 无 国司机]
我想请你去看戏（去看电影，去吃饭，来我家做客）
— С удовольствием‚А когда?（苏打握力司特为夜幕，啊嘎疙瘩？）
很高兴去，什麽时候去？
— Сегодня вечером в 8 (восемь) часов.
（谢我的你啊 畏怯拉木 我泄密 器所负）
今晚 8 点钟。
— Как раз я свободен‚обязательно приду.
（嘎克拉斯 压 丝袜报界嗯，阿比阿扎接力纳 普力度）
正好我有空，一定去。
— Тогда я вас позваню.（大哥大 压 瓦斯 八字瓦牛）
到时候我给你打电话。
— Хорошо.（哈拉说）
好！
— Сегодня хорошая погода!（谢我的你啊 哈罗沙哑 巴国大）
今天天气不错！
— Да‚очень тепло.（大 哦且你 节普罗）
是啊，非常暖和。
— Вы знаете‚какая погода будет завтра?
（位 子那也节，嘎嘎压 巴国大 不解特 咋伏特拉）
您知道明天天气怎麽样？
— Передали‚что будет ветер.（别列大力，拾掇 不解特 慰藉了）
预报说有大风。
— Снег будет?（四聂可 不节特）
有雪吗？
— Не будет‚новерно‚будет песочная буря.
（聂 不解特，那为了那，不解特 别所起那压 不俩）
没有，可能有沙尘暴。
— Ужасно.（五日阿斯那）
糟透了！
— Здесь сухой климат.（字节习 苏霍伊 克立马特）
这里的气候总是很干燥。
— А зимой холодно?（啊 贼贸易 活拉的那）
冬天冷吗？
— Очень.（哦且尼）
非常冷。
1、— Как дела?（嘎可 节拉）
最近还好吧？
— Спасибо‚хорошо(нормально).（司巴西把，哈拉说[拿了马里那]）
谢谢，还不错[一般]。 2、— Не заняты ли вы в эти дни?（聂 扎尼阿得 李 维 无 埃及 的你）
 这几天还忙吧？
— Очень занят(скучно).（哦且你 扎尼阿特[司故事那]）
非常忙[很无聊]。 3、— С Новым годом (С Рождеством)!
（四 挪威母 国大木 [司 拉日杰斯特我母]）
 新年快乐[圣诞节快乐]！ — Спасибо‚и вас тоже.（司巴西把，已 瓦斯 多热）
谢谢，您也一样。
4、— Желаю вам успехов(счастья‚здоровья)!
（日拉油 瓦母 无私别哈夫[下司企压，自大罗维亚]
 祝你事业有成[万事如意，身体健康]！ — Большое спасибо.（巴黎说也 司巴西把）
多谢。
5、— Счастливого пути!（下私立娃娃 不及）
 一路顺风！
— Счастливо остаётесь.（下私立瓦 啊司打药解析）
也祝你在这里开心！