一、简答题
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)    })  }