Vue响应式

概念：

响应式的效果就是，数据驱动视图。只用按照普通的语法，改变一个数据，相应的视图就自动更新。保证试图中的数据与组件中的数据同步。

原理：

  1. 通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter⽅法） 实现数据劫持

  2. 观察者模式（发布者-订阅者）

    • 观察者(订阅者) – Watcher：
      update()：当事件发⽣时，具体要做的事情
    • 目标(发布者) – Dep:
      ①subs 数组：存储所有的观察者
      ②addSub()：添加观察者
      ③notify()：当事件发⽣，调⽤所有观察者的 update() 方法

  3. 当数据发⽣改变通过发布者订阅者模式来进行通知进行界面刷新

具体响应式方法

数组方法

  • push()：该方法是在数组最后添加数据，并返回数组长度
  • pop()：删除最后一个元素，并返回删除的元素值
  • shift()：删除数组的第一个元素，返回第一个删除的值
  • unshift()：向数组开头添加元素，返回数组长度
  • reverse()：翻转数组
  • sort(function(a,b){return a-b})：数组排序升序/b-a降序
  • splice(index,howmany,arr1,arr2…) ：用于添加或删除数组中的元素。从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。
    原数组改变。

对象方法

  • Vue.set(对象,’属性’,’属性值’)：为对象动态添加属性
  • Vue.delete(对象,’属性值’)：动态的删除对象的属性