乐趣区

关于vue-router:Part3模块一

jiezi
一、简答题
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)
    })
  }
退出移动版