阶段三模块一作业

╰+哭是因爲堅強的太久メ 2022-12-24 01:58 113阅读 0赞

一、简答题  
1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。

let vm = new Vue({ 
     el: '#el'
     data: { 
      o: 'object',
      dog: { }
     },
     method: { 
      clickHandler () { 
       // 该 name 属性是否是响应式的
       this.dog.name = 'Trump'
      }
     }
    })

答：不是响应式的，需要set调用definedReactive方法。

2、请简述 Diff 算法的执行过程  
请简述 diff 算法的执行过程  
解答：  
diff的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁  
patch 函数接收两个参数 oldVnode 和 vnode  
分别代表新的节点和之前的旧节点，这个函数会比较 oldVnode 和 vnode 是否是相同的，即调用函数 sameVnode(oldVnode,vnode)，根据这个函数的返回结果分如下两种情况：  
true: 则执行 patchVnode  
false: 则用 vnode 替换 oldVnode  
patchVnode 这个函数做了以下事情：  
找到对应的真实 dom，称为 el  
判断 vnode 和 oldVnode 是否指向同一个对象，如果是，那么直接 return  
如果它们都有文本节点并且不相等，那么将 el 的文本节点设置为 vnode 的文本节点  
如果 oldVnode 有节点而 vnode 没有，则删除 el 的子节点  
如果 oldVnode 没有子节点而 vnode 有，则将 vnode 的子节点真实化之后添加到 el  
如果两者都有子节点，使用 diff 算法对比子节点  
在进行同级别节点比较的时候，首先会对新老节点数组的开始和结尾节点设置标记索引，遍历过程中移动索引  
在对开始和结束节点比较的时候，总共有四种情况  
oldStartVnode / newStartVnode(旧开始节点 / 新开始节点)  
oldEndVnode / newEndVnode(旧结束节点 / 新结束节点)  
oldStartVnode / oldEndVnode(旧开始节点 / 新结束节点)  
oldEndVnode / newStartVnode(旧结束节点 / 新开始节点)  
开始节点和结束节点比较，着两种情况类型  
oldStartVnode / newStartVnode(旧开始节点 / 新开始节点)  
oldEndVnoe / newEndVnode(旧结束节点 / 新结束节点)  
如果 oldStartVnode 和 newStartVnode 是 sameVnode(key和sel相同)  
调用 patchVnode()对比和更新节点  
把旧开始和新开始索引往后移动 oldStartIdx++ / oldEndIdx++  
oldStartVnode / newEndVnode(旧开始节点 / 新结束节点)相同  
调用 patchVnode() 对比和更新节点  
把oldStartVnode 对应的 DOM元素，移动到右边  
更新索引  
oldEndVnode / newStartVnode(旧结束节点 / 新开始节点)相同  
调用 patchVnode()对比和更新节点  
把 oldEndVnode 对应的 DOM 元素，移动到左边  
更新索引  
如果不是以上四种情况  
遍历新节点，使用newStartNode的key在老节点数组中找到相同节点  
如果没有找到，说明 newStartNode 是新节点  
创建新节点对应的DOM元素，插入到DOM树种  
如果找到了  
判断新节点和找到的老节点的sel选择器是否相同  
如果不相同，说明节点被修改了  
重新创建对应的 DOM 元素，插入到 DOM 树中  
如果相同，把 elmToMove 对应的 DOM 元素，移动到左边  
循环结束  
当老节点的所有子节点先遍历完(oldStartIDx > oldEndIdx)，循环结束  
新节点的所有子节点先遍历完(newStartIdx > newEndIdx)，循环结束  
如果老节点的数组先遍历完(oldStartIdx > oldEndIdx)，说明新节点有剩余，把剩余节点批量插入到右边  
如果新节点的数组先遍历完(newStartIdx > newEndIdx)，说明老节点有剩余，把剩余节点批量删除

二、编程题  
1、模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 \# 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。

let _Vue = null
    export default class VueRouter { 
      static install (vue) { 
        // 1 判断当前插件是否被安装
        if (VueRouter.install.installed) return
        VueRouter.install.installed = true
        // 2 把Vue的构造函数记录在全局
        _Vue = vue
        // 3 把创建Vue的实例传入的router对象注入到Vue实例
        // _Vue.prototype.$router = this.$options.router
        _Vue.mixin({ 
          beforeCreate () { 
            if (this.$options.router) { 
              _Vue.prototype.$router = this.$options.router
            }
          }
        })
      }
    
      constructor (options) { 
        this.mode = options.mode || "hash"
        this.routes = options.routes
        this.routeMap = { }
        // observable
        this.data = _Vue.observable({ 
          current: '/'
        })
        this.init()
      }
      init () { 
        this.initRouteMap()
        this.initComponent(_Vue)
        this.initEvent()
      }
      initRouteMap () { 
        //遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
        this.routes.forEach( route => { 
          this.routeMap[route.path] = route.component
        })
      }
      initComponent(Vue){ 
        //创建 router-link 和 router-view 组件
        const self = this
        Vue.component('router-link',{ 
          props:{ 
            to:String
          },
          render(h){ 
            return h("a",{ 
              attrs:{ 
                href: self.mode === "history" ? "" : "#" + this.to
              },
              on:{ 
                click:self.mode === "history" ? this.clickhander : this.hashClickhander
              }
            },[this.$slots.default])
          },
          methods:{ 
            clickhander(e){ 
              history.pushState({ },"",this.to)
              this.$router.data.current=this.to
              e.preventDefault()
            },
            hashClickhander(e){ 
              this.$router.data.current=this.to
            }
          }
          // template:"<a :href='to'><slot></slot><>"
        })
    
        Vue.component('router-view',{ 
          render(h){ 
            let cm = self.routeMap[self.data.current]
            return h(cm)
          }
        })
      }
      initEvent(){ 
        //注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
        const eventType = this.mode === 'history' ? 'popstate' : 'hashchange'
        const handle = this.mode === 'history' ? this.getLocation : this.getHash
        window.addEventListener(eventType,handle.bind(this))
      }
      getLocation(){ 
        this.data.current = window.location.pathname
      }
      getHash(){ 
        let href = window.location.href
        const index = href.indexOf('#')
        if (index < 0) return '/'
        this.data.current = href.slice(index + 1)
      }
    }

2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令。

htmlUpdater(node, value, key) { 
    	node.innerHTML = value
    	new Watcher(this.vm, kry, (newValue) => { 
    		node.innerHTML = newValue
    	})
    }

// 编译元素节点，处理指令
    compileElement (node) { 
        // 定义正则
        let = onRE = /^@|^v-on:/
        // 遍历所有的属性节点
        Array.from(node.attributes).forEach(attr => { 
            // 判断是否是指令
            let attrName = attr.name
            // 处理 v-on 
            if(onRe.test(attrName)){ 
                attrName = attrName.replace(onRE,'')
                let key = attr.value
                this.addHandler(node, attrName, this.vm[key])
            }
            if (this.isDirective(attrName)) { 
                // v-text --> text
                attrName = attrName.substr(2)
                let key = attr.value
                this.updata(node, key, attrName)
            }
        })
    }
    addHandler(el, handleName, handle){ 
        el.addEventListener(handleName,handle)
    }

3、参考 Snabbdom 提供的电影列表的示例，利用Snabbdom 实现类似的效果，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]

import {  h, init } from 'snabbdom'
    import style from 'snabbdom/modules/style'
    import eventlisteners from 'snabbdom/modules/eventlisteners'
    import {  originalData } from './originData'
    
    let patch = init([style,eventlisteners])
    
    let data = [...originalData]
    const container = document.querySelector('#container')
    
    var sortBy = 'rank';
    let vnode = view(data);
    
    // 初次渲染
    let oldVnode = patch(container, vnode)
    
    
    // 渲染
    function render() { 
        oldVnode = patch(oldVnode, view(data));
    }
    // 生成新的VDOM
    function view(data) { 
        return h('div#container',
            [
                h('h1', 'Top 10 movies'),
                h('div',
                    [
                        h('a.btn.add',
                            {  on: {  click: add } }, 'Add'),
                        'Sort by: ',
                        h('span.btn-group',
                            [
                                h('a.btn.rank',
                                    { 
                                        'class': {  active: sortBy === 'rank' },
                                        on: {  click: [changeSort, 'rank'] }
                                    }, 'Rank'),
                                h('a.btn.title',
                                    { 
                                        'class': {  active: sortBy === 'title' },
                                        on: {  click: [changeSort, 'title'] }
                                    }, 'Title'),
                                h('a.btn.desc',
                                    { 
                                        'class': {  active: sortBy === 'desc' },
                                        on: {  click: [changeSort, 'desc'] }
                                    }, 'Description')
                            ])
                    ]),
                h('div.list', data.map(movieView))
            ]);
    }
    
    // 添加一条数据 放在最上面
    function add() { 
        const n = originalData[Math.floor(Math.random() * 10)];
        data = [{  rank: data.length+1, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
        render();
    }
    // 排序
    function changeSort(prop) { 
        sortBy = prop;
        data.sort(function (a, b) { 
            if (a[prop] > b[prop]) { 
                return 1;
            }
            if (a[prop] < b[prop]) { 
                return -1;
            }
            return 0;
        });
        render();
    }
    
    // 单条数据
    function movieView(movie) { 
        return h('div.row', { 
            key: movie.rank,
            style: { 
                display: 'none', 
                delayed: {  transform: 'translateY(' + movie.offset + 'px)', display: 'block' },
                remove: {  display: 'none', transform: 'translateY(' + movie.offset + 'px) translateX(200px)' }
            },
            hook: { 
                insert: function insert(vnode) { 
                    movie.elmHeight = vnode.elm.offsetHeight;
                }
            }
        }, [
            h('div', {  style: {  fontWeight: 'bold' } }, movie.rank),
            h('div', movie.title), h('div', movie.desc),
            h('div.btn.rm-btn', { on: {  click: [remove, movie]}}, 'x')]);
    }
    // 删除数据
    function remove(movie) { 
        data = data.filter(function (m) { 
            return m !== movie;
        });
        render()
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/7ce45f72107941ae99d0963afa785849.png