一、简答题
1、当咱们点击按钮的时候动静给 data 减少的成员是否是响应式数据,如果不是的话,如何把新增成员设置成响应式数据,它的外部原理是什么。
let vm = new Vue({ el: '#el' data: { o: 'object', dog: {} }, method: { clickHandler () { // 该 name 属性是否是响应式的 this.dog.name = 'Trump' } }})
1.不是响应式的,对于曾经创立的实例,Vue不容许动静增加根级别的响应式属性
2.应用Vue.set(vm.dog, 'name', 'dog_name')或this.$set(this.dog, 'name', 'dog_name')
3.this.$set在new Vue()时候就被注入到Vue的原型上,set办法外部仍是调用了defineReactive()办法进行响应式解决
2、请简述 Diff 算法的执行过程
1.diff的过程就是调用名为patch(el, vnode)/patch(oldVnode, vnode)的函数,比拟新旧节点,一边比拟一边给实在DOM打补丁
2.patch里会调用sameVnode(oldVnode, vonde),依据返回后果:
- true: 则执行patchVnode
- false: 则用vnode替换oldVnode
3.patchVnode(oldNode, vnode, insertedVnodeQueue)
- 找到对应的实在DOM,成为el
- 判断vnode和oldVnode是否指向同一个对象,如果是,间接return
- 如果它们都有文本节点并且不相等,那么将el的文本节点设置为vnode的文本文本节点
- 如果oldVnode有子节点而vnode没有,则删除el的子节点
- 如果oldVnode没有子节点而vnode有,则将vnode的子节点实在化之后加到el
- 如果两者都有子节点,则执行updateChildren(parentElm, oldCh, newCh)函数比拟子节点(key很重要)
二、编程题
1、模仿 VueRouter 的 hash 模式的实现,实现思路和 History 模式相似,把 URL 中的 # 前面的内容作为路由的地址,能够通过 hashchange 事件监听路由地址的变动。
2、在模仿 Vue.js 响应式源码的根底上实现 v-html 指令,以及 v-on 指令。
v-html:
htmlUpdater (node, value, key) { node.innerHTML = value new Watcher(this.vm, key, (newValue) => { node.innerHTML = newValue }) }
v-on:
先批改update:
update (node, key, attrName) { let type = ''; const index = attrName.indexOf(':') let updateFn = this[attrName + 'Updater'] if (index > -1) { type = attrName.substr(index + 1) updateFn = this[attrName.substr(0, index) + 'Updater'] } updateFn && updateFn.call(this, node, this.vm[key], key, type) }
相应解决,未齐全解决
onUpdater (node, value, key, type) { const res = node.getAttribute(`v-on:${type}`) node.addEventListener(type, (e) => { console.log(res) }) }