Vue2 原理_2022-05-24

程序猿_阿涛哥
174 阅读2分钟

第3章 Vue2原理

3-1 vue2原理-大厂必考

3-2 如何理解MVVM

很久很久的组件化：

  • sap jsp php 已经有了组件化
  • nodejs也有类似的组件化

image.png

image.png 本质的区别：数据驱动视图

  • 传统组件，只是静态渲染，更新依赖于操作DOM
  • 数据驱动视图-Vue MVVM

image.png

3-3 监听data变化的核心API是什么

Vue的响应式

  • 组件data的数据一旦发生改变，立刻触发视图的更新
  • 核心APIObject.defineProperty 这个方法接收三个参数:
  • 1.属性所在的对象
  • 2.属性的名字
  • 3.一个描述符对象 image.png Vue3 启用 Proxy
  • 兼容性不好，且无法使用polyfill

3-4 如何深度监听data变化

image.png image.png 缺点：

image.png

3-5 vue如何监听数组变化

image.png

  • 无法原生监听数组，需要特殊处理

image.png

3-6 虚拟DOM-面试里的网红

image.png

image.png

image.png

image.png Vue3.0重写了vdom的代码，优化了性能

3-7 用过虚拟DOM吗

h() => Vnode=>patch(container, Vnode)=> patch(Vnode,newVode)=>patch(newVode, null)

image.png

3-8 虚拟DOM-diff算法概述

日常体现：key

image.png

image.png

image.png

3-9 深入diff算法源码-生成vnode

3-10 深入diff算法源码-patch函数

patch(container, Vnode)=> patch(Vnode,newVode)=>patch(newVode, null)

image.png

image.png

3-11 深入diff算法源码-patchVnode函数

image.png

image.png

3-12 深入diff算法源码-updateChildren函数

image.png

image.png 在循环里： image.png

image.png

image.png

3-13 虚拟DOM-考点总结和复习

  • patchVnode
  • addVnodes remoevnodes
  • updateChildren(key的重要性)
  • vdom 的核心概念: h、vnode 、patch、 diff、 key等 vdom价值： 数据驱动试图，操作dom,转移到js 的计算

3-14 模板编译前置知识点-with语法

image.png

  • js 的 with 语法

image.png

  • with 语法 慎用，打破了 作用域规则，易读性差
  • vue template complier 将模板编译为 render函数
  • 执行render函数生成 vnode

3-15 vue模板被编译成什么

image.png image.png

image.png

3-16 vue组件可用render代替template

image.png

3-17 回顾和复习已学的知识点

image.png

3-18 vue组件是如何渲染和更新的

image.png

image.png

image.png

3-19 vue组件是异步渲染的

image.png

3-20 如何用JS实现hash路由

image.png

image.png

image.png

image.png

3-21 如何用JS实现H5 history路由

image.png

image.png

image.png

image.png

第5章 Vue3面试题

5-1 Proxy 基本使用（1）

image.png

5-2 Proxy 基本使用（2）

image.png

image.png

Reflect的作用

  • 和proxy的能力一一对应
  • 规范化 标准化 函数式
  • 替代掉Object上的工具函数 image.png

image.png

5-3 vue3用Proxy实现响应式

性能提升：什么时候get 到层级才会去递归 image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝