Vue.js源码：数据驱动机制详解.pdfVIP

数据驱动

数据驱动

Vue.js一个思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成

的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。它相比我们

传统的前端开发，如使用jQuery等前端库直接修改DOM，大大简化了代码量。

特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因

为DOM变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触

DOM，这样的代码非常利于。

在Vue.js中我们可以采用简洁的模板语法来式的将数据渲染为DOM：

divid=app

{{message}}

/div

varapp=newVue({

el:#app,

data:{

message:HelloVue!

}

})

最终它会在页面上渲染出HelloVue。接下来，我们会从源码角度来分析Vue是

如何实现的，分析过程会以主线代码为主，重要的分支逻辑会放在单独分析。

数据驱动还有一部分是数据更新驱动视图变化，这一块内容我们也会在的章

节分析，这一章我们的目标是弄清楚模板和数据如何渲染成最终的DOM。

任务

请仔细阅读本文档，为下面学习内容做准备。