[Discussion]低版本浏览器的响应式系统

[cryzzchen]

问题描述

当前 issue 主要是讨论在低版本浏览器中不支持 Proxy 时，如何实现响应式系统。

方案一

类似于 vue2 响应式原理 的做法，使用 Object.defineProperty 来模拟 Proxy 的功能，但存在局限性，无法监听：

• 直接修改数组的某一项时；
• 新增或删除对象的某一项时；

因此，跟 Vue 2 一样，我们需要提供必要的方法来新增监听，这里暂时命名为 createReactive。

约束如下：

1. 数组需要使用 push, splice, shift 等 Array 的方法对数组进行修改；
2. 当需要新增某一项时，用 createReactive 方法手动添加，例如：

class CustomElement extends HTMLElement {
  data = {
     a: 'a'
  };

 handle() {
    setReactive(this.data, 'b', 'b'); // this.data.b = 'b';
  }
}

方案二

提供一个入口，当用户修改属性后，主动调用，发起更新。入口有两个方案：

1. 在 class 上新增 forceUpdate —— 跟 react 相似，但不符合标准
2. 增加一个函数，入参为组件

class CustomElement extends HTMLElement {
  data = {
     a: 'a'
  };

 handle() {
    this.data.a = [ 1, 2, 3];
    this.data.a[0] = -1;

    // 1. 在 class 上新增 forceUpdate ，不符合标准
    this.forceUpdate(); 

   // 2.  增加一个函数，入参为组件
   forceUpdate(this)；
  }
}

[SoloJiang]

this.pwcForceUpdate + 1