本文主要详细介绍了Vue的基本原理。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
Observer （数据劫持）
核心是通过Obeject.defineProperty()来监控数据的变化，setter和getter可以在这个函数内部定义。
每当数据发生变化，setter()就会被触发。此时，观察者将通过Dep通知观察者订户。
Dep （发布者）
有两个方法，addWatcher()和notify()，（收集 Watcher 依赖，并通知依赖变更）。
Dep存储多个匹配器。当Dep发现观察者有更新时，Dep会调用notify()方法通知Watcher进行更新。
Watcher （订阅者）
有一个update()方法，（订阅 Dep ，接收数据变更）。
Watcher 是Observer 和 Compile 之间通信的桥梁，主要做的事情有：
1.实例化自己时将自己添加到Dep
2.当收到属性更改的Dep.notice()通知时，可以调用自己的update()方法，并在Compile中触发回调绑定。
Compile
Compile主要做的是解析模板指令，用数据替换模板中的变量，然后初始化渲染页面视图，将每个指令对应的节点绑定到更新函数，添加订阅者来监控数据，一旦接收到数据有变动，收到通知，更新视图。
总结归纳：
作为MVVM模式的一个框架，vue的数据绑定底层原理是：数据劫持 + 发布订阅者模式。
主要有这样的四种“角色”:
ObserverDep数据收集Watcer订阅者编译器模板编译器。
Observer主要负责数据劫持。核心是通过Obeject.defineProperty()来监控数据变化。setter和getter可以在这个函数中定义。每当数据发生变化，setter()就会被触发。此时，观察者将通知Dep数据已经改变。
发布模式主要由Dep和Watcher完成。
Dep存储Watcher实例化时存储的所有依赖关系。这是一个数据集。当Dep从Observer收到数据变化的通知时，它将调用notice()方法告诉Watcher变化的依赖关系。
Watcher是订阅者，是连接观察者和编译者之间通信的桥梁。当它从Dep收到数据更改通知时，它将调用自己的update()方法，并触发Compile中的回调绑定。
Compile主要做的是解析模板指令，用数据替换模板中的变量，然后初始化渲染页面视图，将更新函数绑定到每个指令对应的节点，添加监听数据的订阅者。一旦数据发生变化，您将收到通知并更新视图。
源码目录结构
-.CircleCI//包含circle ci持续集成/持续部署工具的配置文件
.github //项目相关文档，以上文档都在这个文件夹里。
基准//基准，性能测试文件，Vue的运行演示，比如有大量数据的表或者渲染大量的SVG
dist //不同版本的Vue文件(UMD，CommonJS，es生产开发包)构建后输出
例子//一些例子，一些用Vue写的小demo
流//flow因为Vue使用了[Flow](https://flow.org/)进行静态类型检查，静态类型检查类型声明文件
包//包含两个不同的NPM包，服务器端渲染和模板编译器，分别针对不同的使用场景提供。
脚本//存储npm脚本配置文件，结合webpack和rollup进行编译、测试、构建等操作(用户无需在意)
alias.js //模块导入测试中使用的所有源代码和别名。
config.js //包含在' dist/'中找到的所有文件的构建配置
build.js //在config.js中构建所有汇总配置
src //主要源代码、核心内容的位置
编译器//解析模板相关
codegen //转换AST为渲染函数
指令//生成渲染函数前需要处理的一般指令
解析器//将模板解析成AST
核心//Vue核心代码，包括内置组件、全局API封装、Vue实例化、观察者、虚拟DOM、工具函数等等。
组件//组件相关属性，主要是保活
全局-api //Vue全局api，如Vue.use、Vue.extend、Vue.mixin等。
实例//实例化相关内容、生命周期、事件等。
观察者//响应式核心目录、双向数据绑定相关文件
util //工具方法
vdom //包含创建和修补虚拟dom的代码。
平台//与平台相关的内容。Vue.js是一个跨平台的MVVM框架(web，native，weex)
网//网页端
编译器//web端编译相关代码，用于将模板编译成渲染函数basic.js
运行时//web端运行时相关代码，用于创建Vue实例等。
服务器//服务器渲染
util //相关工具类
weex //基于通用的跨平台Web开发语言和开发经验构建Android、iOS和Web应用。
服务器//服务器渲染(ssr)
sfc //转换表文件组件(*。vue)
共享//全局共享的方法和常量
测试//测试测试用例
新版types//vue支持TypeScript，主要是一个TypeScript类型声明文件。
节点_模块//npm程序包存储目录
| - .babelrc.js //巴别塔配置
|-.editor config//文本编码样式配置文件
| - .eslinignore//eslint检查以忽略文件。
| - .eslintrc.js //eslint配置文件
| - .流配置//流配置文件
| - .gitignore //Git commit忽略文件配置。
|-backers . MD//赞助商信息文件
|-许可//项目开源协议
|-package . JSON//依赖
|-readme . MD//描述文件
| - yarn.lock //yarn版本锁定文件
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。