fed-e-task-03-02

简答题

请简述 Vue 首次渲染的过程。

• 进行Vue初始化，初始化实例成员和静态成员
• 调用 new Vue()
• 在 Vue 的构造函数中调用this._init()
• 在this._init()中最终调用了vm.$mount()

  • entry-runtime-with-compiler.js中的$mount。

    如果没有传递render, 将模板template编译成render函数，options.render = render

  • runtime/index.js中的$mount

    调用mountComponent()

• mountComponent(this.el)
  • 判断是否有render选项，如果没有但是传入了模板，并且当前是开发环境，就会发送一个警告(运行时版本不支持编译)
  • 触发beforeMount
  • 定义updateComponent
  • 创建Watcher实例，传递了updateComponent参数，调用watcher.get方法
  • 触发mounted
  • return vm
• watcher.get()
  • 创建完watcher会调用一次get
  • 调用updateComponent()
  • 调用vm._render()创建VNode
  • 调用vm._update(vnode...)

请简述 Vue 响应式原理。

• 从Vue实例的init方法开始，init方法内部调用了
  • initState() 初始化Vue实例的状态
  • initState内部调用了initData() 将data属性注入到Vue实例上
  • observe() 将data对象转换成响应式对象
• observe(value)
  • 判断value是否是对象，如果不是对象直接返回
  • 判断value对象是否有__ob__，如果有直接返回，如果没有就创建observer对象
  • 返回observer对象
• 创建observer对象是通过Observer类创建的
  • 给value对象定义不可枚举的__ob__属性，记录当前的observer对象
  • 进行数组的响应式处理（改写数组的那几个特殊的方法push、pop、sort...，调用完这些方法后需要发送通知，调用ob里的dep里的notify方法）
  • 进行对象的响应式处理，调用walk方法（遍历对象里的属性，对每一个属性调用defineReactive）
• defineReactive
  • 为每一个属性创建dep对象，进行依赖的收集
  • 如果当前属性的值又是一个对象，调用observe（递归）
  • 定义getter，1.收集依赖 2.返回属性的值
  • 定义setter，1.保存新值，如果新值是对象，递归调用observe 2.派发更新（发送通知），调用dep.notify()
• 收集依赖
  • 在watcher对象的get方法中调用pushTarget记录Dep.target属性
  • 访问data中的成员的时候收集依赖，defineReactive的getter中收集依赖
  • 把属性对应的watcher对象添加到dep的subs数组中
  • 给子对象childOb收集依赖，目的是子对象添加和删除成员时发送通知
• Watcher
  • 数据发生变化的时候，调用dep.notify()，notify会调用watcher对象的update()方法
  • 在update方法中会调用queueWatcher()，判断watcher是否被处理，如果没有的话添加到queue队列中，并调用刷新任务队列的函数flushSchedulerQueue()
  • flushSchedulerQueue()
    • 触发beforeUpdate钩子函数
    • 调用watcher.run() run() -> get() -> getter() -> updateComponent ，调用完后展示在视图上
    • 清空上一次的依赖
    • 触发actived钩子函数
    • 触发updated钩子函数

请简述虚拟 DOM 中 Key 的作用和好处。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

请简述 Vue 中模板编译的过程。

• compileToFunctions(template, ...)
  • 先从缓存中加载编译好的render函数
  • 缓存中如果没有就调用compile(template, options)
• compile(template, options)
  • 合并options
  • 调用baseCompile(template,trim(), finalOptions)
• baseCompile(template,trim(), finalOptions)
  • parse()
    • 把template转换成AST tree
  • optimize() 优化处理
    • 标记AST tree 中的静态sub trees
    • 检测到静态子树，设置为静态，不需要在每次重新渲染的时候重新生成节点
    • patch阶段跳过静态子树
  • generate()
    • AST tree 生成js的创建代码
• compileToFunctions(template, ...) 回到入口函数
  • 继续把上一步中生成的字符串形式js代码转换为函数
  • createFunction()
  • render和staticRenderrFns初始化完毕，挂载到Vue实例的options对应的属性中