2025年vue的原理mvvm模式简读，template及slot编译原理

科技前沿 • 2025-02-28 12:11 • 阅读 30

大家好，我是讯享网，很高兴认识大家。

MVVM

M:Model 数据模型 v:View 视图 vm:ViewModel 数据视图模型 数据改变，则视图更新，视图更新，数据也随之变化的数据与视图的双向绑定。

讯享网

底层原理

讯享网数据劫持者：Observer,劫持监查数据对象的所有属性，有变动则拿到最新值 指令解析器：compile,对每个元素节点的指令进行扫描和解析， 根据指令模型替换数据以及绑定相应的函数。 watcher：订阅者，连接Observer和Compile的桥梁， 能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

在这里插入图片描述
讯享网

<input type="text" id="input"> <p id="show"></p> <script> var obj = {}; Object.defineProperty(obj,'input',{ get(){ return obj; }, set(newvalue){ document.getElementById('input').value = newvalue; document.getElementById('show').innerHTML = newvalue; } }) document.addEventListener('keyup',(e)=>{ obj.input = e.target.value }) </script>

讯享网Vue采用数据劫持 结合发布者 订阅者模式， 通过Object.defineProperty() 来劫持各个属性的setter,getter属性， 在数据变动话，通知订阅者， 触发更新回调函数，重新渲染视图

vue，template编译原理：
在这里插入图片描述

new Vue({el,data}), el首先要转为template，指令解析器将template解析为AST, data实现数据劫持，底层原理使用Object.defineProperty()，触发订阅者， 然后一起触发render函数，渲染页面。

讯享网抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。 AST的作用？ 解释器/编译器进行语法分析的基础 AST的使用场景？ JS：代码压缩、混淆、编译 CSS：代码兼容多版本 HTML：Vue中Virtual DOM的实现

vue,slot的编译原理

父级： <div> <com1>插入插槽slot中</com1> </div> 子级组件： <div> <slot></slot> </div> 父组件先解析，然后把com1当成子元素处理，把插槽当成com1的子元素来处理。 子组件解析，slot作为一个占位符，会被解析成一个函数。 在这个函数中，第一步解析得到的插槽节点，然后返回 那么子组件的节点就完整了，插槽也成功插入成功。

2025年vue的原理mvvm模式简读，template及slot编译原理

相关推荐