Vue数据驱动原理是如何实现视图与数据双向同步的？

本文共计2725个文字，预计阅读时间需要11分钟。

前言 + Vue 区别于传统的 JS 库，例如 jQuery，其中一个最大的特点就是无需手动操作 DOM，只需对数据进行变更，视图也会自动更新。例如，你想修改 div，只需更改数据，div 的内容也会自动更新。

前言

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。 比如你想修改div#app里的内容:

/// JQuery <div id="app"></div> <script> $('#app').text('lxb') </script>

<template> <div id="app">{{ message }}</div> <button @click="change">点击修改message</button> </template> <script> export default { data () { return { message: 'lxb' } }, methods: { change () { this.message = 'lxb1' // 触发视图更新 } } } </script>

在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行了操作，接下来我们通过分析源码来进一步分析，Vue是如何做到数据驱动的，而数据驱动主要分成两个部分依赖收集和派发更新。