框架

Vue

描述 Vue 组件声明周期（有父子组件的情况）？

描述组件渲染和更新的过程？

v-show 和 v-if 的区别？

v-show 所有节点都会被渲染，条件不成立的节点会被添加内联 style="display: none" 样式隐藏。

v-if 组件真正的渲染和销毁，而不是显示或隐藏

更新不频繁选择 v-if, 频繁变化就选择 v-show

为何 v-for 中要使用 key？

好处：减少渲染次数，提升渲染性能。
概述：为了给 vnode 的 diff 算法一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。

diff算法中通过 tag 和 key 来判断，是否是 sameNode。

建议尽可能在使用 v-for 时提供 key（业务唯一ID），而不是 index 或 random，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

key 的特殊主要用在 Vue 的 vdom 的 diff 算法上，在新旧 nodes 对比时辨识 VNodes。
如果不使用 key，它默认使用“就地更新”的策略，如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

注：有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误。

Vue 组件如何通讯？

父子组件 props this.$emit;
EventBus event.$on event.$off event.$emit;
vuex;

Vue 数据响应式核心API（Vue 2.0）

Vue 3.0 不在使用该API 改为使用 Proxy

核心 API Object.defineProperty
缺点：
深度监听，需要递归到底，一次性计算量大
无法监听新增属性/删除属性（Vue.set Vue.delete）
无法原生监听数组，需要特殊处理

/**
 * 模拟 触发更新视图
 */
function updateView() {
  console.log("视图更新");
}

// 重新定义数组原型 [场景三]
const oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
["push", "pop", "shift", "unshift", "splice"].forEach(methodName => {
  arrProto[methodName] = function () {
    updateView(); // 触发试图更新
    oldArrayProperty[methodName].call(this, ...arguments)
  }
})

/**
 * 重新定义属性，监听起来
 * @param {*} target 
 * @param {*} key 
 * @param {*} value 
 */
function defineReactive(target, key, value) {
  // 增加深度监听 递归 [场景一]
  observer(value)
  // 核心 API
  Object.defineProperty(target, key, {
    get(){
      return value
    },
    set(newValue) {
      if (newValue !== value) {
        // 增加深度监听 递归 [场景二]
        observer(newValue)

        // 设置新值
        // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
        value = newValue

        updateView()
      }
    }
  })
}

/**
 * 监听对象属性
 * @param {*} target 
 */
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是对象或数组
    return target
  }

  // 拦截数组 将其隐式原型指向 自定义数组原型类 [场景三]
  if (Array.isArray(target)) {
    target.__proto__ = arrProto
  }

  // 重新定义各个属性（for in 也可以遍历数组）
  for (const key in target) {
    defineReactive(target, key, target[key])
  }
}

// 准备数据
const data = {
  name: 'tianyou',
  age: 20,
  info: {
    address: '河南'
  },
  nums: [10,20,30]
}

// 监听数据
observer(data)

// 测试
// data.name = "huang" // 视图更新
// data.age = 66 // 视图更新
// data.info.address = "上海" // [场景一]：深度监听
// data.age = { num: 99 } // [场景二]：赋值对象
// data.nums.push(4) // [场景三]：监听数组变化

// 特殊场景
data.x = 666 // 新增属性，监听不到--所有有 Vue.set
delete data.x // 删除属性，监听不到--所有有 Vue.delete

console.log(data);

双向数据绑定 v-model 的实现原理？

<input type="text" :value="name" @input="(event) => { name = event.target.value }" />

input 元素的 value 指向 this.name;
绑定 input 事件 this.name = $event.target.value;
data 更新触发 re-render;

Vue 2.x 模板中的指令是如何解析实现的？

简要说明 Vue 2.x 的全链路运作机制？

简单介绍一下 Element UI 的框架设计？

如何理解 Vue 是一个渐进式框架？

Vue 里实现跨组件通信的方式有哪些？

Vue 中响应式数据是如何做到对某个对象的深层次属性的监听的？

基于 Vue 设计一个购物车

React

React 组件如何通讯？

JSX 本质是什么？

context 是什么，有什么用途？

shouldComponentUpdate 的用途？

描述 redux 单项数据流。

setState 是同步还是异步？

React Class 组件有哪些周期函数？分别有什么作用？

React Class 组件中请求可以在 componentWillMount 中发起吗？为什么？

React Class 组件和 React Hook 的区别有哪些？

React 中高阶函数和自定义 Hook 的优缺点？

简要说明 React Hook 中 useState 和 useEffect 的运行原理？

React 如何发现重渲染、什么原因容易造成重渲染、如何避免重渲染？

React Hook 中 useEffect 有哪些参数，如何检测数组依赖项的变化？

React 的 useEffect 是如何监听数组依赖项的变化的？

React Hook 和闭包有什么关联关系？

React 中 useState 是如何做数据初始化的？

列举你常用的 React 性能优化技巧？

基于 React 设计一个 todolist

其它

用 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"
        }
        // ....
      ]
    }
  ] 
}

ref：
snabbdom 虚拟DOM库open in new window
snabbdom 中文文档open in new window

MVVM、MVC 和 MVP 的区别是什么？各自有什么应用场景？、

谈谈 Electron、Nw.js、CEF、Flutter 和原生开发的理解？

谈谈桌面端应用中 HotFix 的理解？

你觉得什么样的场景需要使用微前端框架？

# 框架

# Vue

# React

# 其它

框架

Vue

React

其它