Skip to main content

Vue

· 3 min read
Lvxl

Vue官网

Vue数据响应式原理​

Vue2: 数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图 具体步骤:

  1. 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
  2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
  3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: (1)在自身实例化时往属性订阅器(dep)里面添加自己 (2)自身必须有一个update()方法 (3)待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
  4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

Vue3:

Vue和React区别​

Vue3和React的hook有什么区别​

Vue2中对象和数组响应式处理的区别​

Vue2和Vue3的自定义指令​

自定义指令如何实现权限判断元素显隐​

qiankun 共享数据​

vuex 与 pinia 好处 区别 持久化​

Vue.$nextTick​

是微任务

Vue编译三部曲​

  • 解析模版 parse 生存 AST

    通过正则等方式解析template中的数据，指令，style， class等

  • 优化AST optimize

    标记 static 静态节点

  • 生成代码 generate

    ast 转换成render function 字符串

初次渲染 - 先初始化数据 - 将模板进行编译 - 变成render fn - 生成虚拟dom - 变成真实dom - 放到页面中

Vue生命周期实现​