https://www.yuque.com/u640022/ootqox/lhsqnu
这个是看vue官方教程写的笔记 Vue Mastery。只针对vue3，是比较好的、更全的。

什么是数据响应式？

比如一段js代码：

  1. <div class="total">
  2.   total:1
  3. </div>
  5. const total = 1

当我们用js修改total的时候，div里面的total的值，并不会改变。
只能在修改之后，用js去获取dom去修改。

但是，如果有了数据响应式，那当我们修改total的时候，div里面的total是会随着修改而改变的。

Vue2实现数据响应式的方式是使用Object.defineProperty对数据进行劫持

  1. var obj = {}
  2. var age 
  3. Object.defineProperty(obj, 'age', {
  4.     get: function(){
  5.         console.log('get age...')
  6.         return age
  7.     },
  8.     set: function(val){
  9.         console.log('set age...')
  10.         age = val
  11.     }
  12. })
  13. obj.age = 100  // 'set age...'
  14. console.log(obj.age) // 'get age...', 100

上面的代码的getter和setter，其实和我们平时直接读取或修改数据没什么区别，差异就是getter和setter是一个函数，我们可以在这个函数里面进行拦截并做一些相应的行为（比如 set total以后，修改dom）