首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
数据驱动
new Vue 发生了什么
Vue 实例挂载的实现
render方法实现原理
Virtual DOM
createElement方法解析
update方法解析
组件化
createComponent方法
调用patch过程
vue合并配置
vue生命周期
组件注册过程
异步组件实现
深入响应式原理
响应式对象
依赖收集过程
派发更新过程
nextTick核心实现
检测变化源码分析
计算属性 VS 侦听属性
组件更新过程
原理图总结
编译流程
编译入口
parse解析环节
optimize优化过程
codegen代码转换
Vue核心扩展
event扩展
v-model扩展
slot插槽
keep-alive缓存优化
transition过渡
transition-group
Vue-Router路由
路由注册原理
VueRouter对象 解析
matcher实现
路径切换相关实现
Vuex状态管理
Vuex 初始化
API
插件能力
当前位置:
首页>>
技术小册>>
Vue原理与源码解析
小册名称：Vue原理与源码解析
Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。 在 Vue.js 中我们可以采用简洁的模板语法来声明式的将数据渲染为 DOM： ```asp <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 最终它会在页面上渲染出 Hello Vue。接下来，我们会从源码角度来分析 Vue 是如何实现的，分析过程会以主线代码为主，重要的分支逻辑会放在之后单独分析。数据驱动还有一部分是数据更新驱动视图变化，这一块内容我们也会在之后的章节分析，这一章我们的目标是弄清楚模板和数据如何渲染成最终的 DOM。
下一篇：
new Vue 发生了什么
该分类下的相关小册推荐：
移动端开发指南
vuejs组件实例与底层原理精讲
Vue3技术解密
vue项目构建基础入门与实战
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(四)
TypeScript和Vue从入门到精通(二)
Vue源码完全解析
Vue.js从入门到精通(二)
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(三)
VUE组件基础与实战
