新浪博客

Vue工作机制------基础描述

2022-07-03 08:05阅读:
首先在new Vue()之后,Vue 会调用进行初始化,会初始化生命周期、事件、props、methods、data、computed与watch等。其中最重要的是通过object.defineProperty设置setter与getter,用来实现响应式以及依赖收集 初始化之后调用$mount挂载组件
Vue工作机制------基础描述
Vue工作机制------基础描述
编译模块分三个阶段
parse: 使用正则解析template中的vue的指令(v-xxx)变量 (@方法)等等,形成语法树AST
optimize: 标记一些静态节点,用作后面的性能优化(update的时候),在diff的时候直接略过
generate: 把第一步生成的AST转换为渲染函数,供render渲染DOM,经过以上步骤,就可以得到
render funciton
响应式是vue的核心内容,初始化通过defineProperty进行绑定,设置通知机制,当编译生成的渲染函数被实际渲染的时候,就会触发getter进行依赖收集,在数据发生变化的时候,触发setter进行更新

我的更多文章

下载客户端阅读体验更佳

APP专享