[JavaScript知识库]Vue 基本原理面试题常见知识点

1. Vue 响应式基本原理

   // 能答出来 Vue 的响应式监听是通过 Object.defineProperty 实现的，至少就能得一半的分
   const data =  {}
   let name = 'zhangsan'
   Object.defineProperty(data, 'name', {
     get: function () {
       console.log('get');
       return name
     },
     set: function (newVal) {
       console.log('set');
       name = newVal
     }
   })
   
   console.log(data.name); // get   zhangsan
   data.name = 'lisi'  // set
   

2. Object.defineProperty 缺点
   • 深度监听，需要递归到底，一次性计算量很大
   • 无法监听新增属性 / 删除属性（vue.set / Vue.delete）
   • 无法原生监听数组，需要特殊处理
3. 用 JS 模拟 DOM 结构

   <div id="div1" class="container">
     <p>vdom</p>
     <ul style="font-size: 20px;">
       <li>a</li>
     </ul>
   </div>
   

   {
     tag: 'div',
     props: {
       className: 'container',
       id: 'div1'
     },
     children: [
       {
         tag: 'p',
         children: 'vdom'
       },
       {
         tag: 'ul',
         props: { style: 'font-size: 20px'},
         children: [
           {
             tag: 'li',
             children: 'a'
           }
         ]
       }
     ]
   }