Vue系列二十一：源码解析

你的名字 2022-01-30 11:31 227阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]  
1、\[\].slice.call(lis): 将伪数组转换为真数组  
2、node.nodeType: 得到节点类型  
3、Object.defineProperty(obj, propertyName, \{\}): 给对象添加/修改属性(指定描述符)  
 configurable: true/false 是否可以重新define  
 enumerable: true/false 是否可以枚举(for…in / keys())  
 value: 指定初始值  
 writable: true/false value是否可以修改存取(访问)描述符  
 get: 函数, 用来得到当前属性值  
 set: 函数, 用来监视当前属性值的变化  
4、Object.keys(obj): 得到对象自身可枚举的属性名的数组  
5、DocumentFragment: 文档碎片(高效批量更新多个节点)  
6、obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性

<body>
    
    <div id="test">vue源码解析</div>
    
    <ul id="fragment_test">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
    
    
    
    <script type="text/javascript">
      //1. [].slice.call(lis): 根据伪数组生成对应的真数组
      const lis = document.getElementsByTagName('li') // lis是伪数组(伪数组是指一个有length和数值下标属性的对象)
      console.log(lis instanceof Object, lis instanceof Array, lis.forEach)//true false undefined
      // 数组的slice()截取数组中指定部分的元素, 生成一个新的数组
      const lis2 = Array.prototype.slice.call(lis)
      console.log(lis2 instanceof Object, lis2 instanceof Array, lis.forEach)//false true function
    
      //2. node.nodeType: 得到节点类型
      const elementNode = document.getElementById('test')
      const attrNode = elementNode.getAttributeNode('id')
      const textNode = elementNode.firstChild
      console.log(elementNode.nodeType, attrNode.nodeType, textNode.nodeType)
    
      //3. Object.defineProperty(obj, propertyName, {}): 给对象添加属性(指定描述符)
      const obj = {
        firstName: 'A',
        lastName: 'B'
      }
      //给obj添加fullName属性
      //obj.fullName = 'A-B'
      /*
        属性描述符：
        1.数据描述符：
          configurable： 是否可以重新定义
          enumerable： 是否可以枚举
          value： 初始值
          writable： 是否可以修改属性值
        2.访问描述符：
          get： 回调函数，根据其它相关的属性动态计算得到当前属性值
          set： 回调函数，监视当前属性值的变化，更新其它相关的属性值
        */
      Object.defineProperty(obj, 'fullName', {
        get () {
          return this.firstName + "-" + this.lastName
        },
        set (value) {
          const names = value.split('-')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      })
      console.log(obj.fullName) //A-B
      obj.firstName = 'C'
      obj.lastName = 'D'
      console.log(obj.fullName) // C-D
      obj.fullName = 'E-F'
      console.log(obj.firstName,obj.lastName) // E F
    
      Object.defineProperty(obj, 'fullName2', {
        configurable: false,
        enumerable: true,
        value: 'G-H',
        writable: false
      })
      console.log(obj.fullName2)  // G-H
      obj.fullName2 = 'J-K'
      console.log(obj.fullName2) // G-H
    
      /*Object.defineProperty(obj, 'fullName2', { //不能重新定义
          configurable: false,
          enumerable: false,
          value: 'G-H',
          writable: true
      })*/
    
      //4. Object.keys(obj): 得到对象自身可枚举属性组成的数组
      const names = Object.keys(obj)
      console.log(names)
    
      //5. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性
      console.log(obj.hasOwnProperty('fullName'), obj.hasOwnProperty('toString'))  // true false
    
      //6. DocumentFragment: 文档碎片(高效批量更新多个节点)
      // document: 对应显示的页面, 包含n个elment  一旦更新document内部的某个元素界面更新
      // documentFragment: 内存中保存n个element的容器对象(不与界面关联), 如果更新framgnet中的某个element, 界面不变
      /*
      <ul id="fragment_test">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
      </ul>
       */
      const ul = document.getElementById('fragment_test')
      // 1. 创建fragment
      const fragment = document.createDocumentFragment()
      // 2. 取出ul中所有子节点取出保存到fragment
      let child
      while(child=ul.firstChild) { // 一个节点只能有一个父亲
        fragment.appendChild(child)  // 先将child从ul中移除, 添加为fragment子节点
      }
    
      // 3. 更新fragment中所有li的文本
      Array.prototype.slice.call(fragment.childNodes).forEach(node => {
        if (node.nodeType===1) { // 元素节点 <li>
          node.textContent = 'atguigu'
        }
      })
    
      // 4. 将fragment插入ul
      ul.appendChild(fragment)
    
    </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20220130/d59a06b19e0946a18790e2272230855c.png