update

README.md

@@ -22,7 +22,7 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [5、关于组件引用的奥秘,ref知多少](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/3.关于组件引用的奥秘,ref知多少.md)
 - [6、使用ButtonGroup控制可点击组件的控制选中状态](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/4.使用ButtonGroup控制可点击组件的控制选中状态.md)
 - [7、我们为什么要设计el这个属性](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/40.我们为什么要设计el这个属性.md)
-- [9、z-index究竟是怎么回事](./z-index解析以及在FineUI中使用原则.md)
+- [9、z-index解析以及在FineUI中使用原则](./questions/9.z-index解析以及在FineUI中使用原则.md)
 - [10、computed通俗易懂的原理解析和日常排错](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/1.如何获取当前时间.md)
 - [11、绝对布局的隐藏知识点](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md)
 - [12、如何灵活应用布局组件,尽可能的减少DOM数量?](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/41.绝对布局的隐藏知识点.md)
@@ -40,12 +40,12 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [7、combo的一些特性详解](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/80.combo的一些特性详解.md)
 - [8、利用响应式编写组件代码的新思路](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/43.利用响应式编写组件代码的新思路.md)
 - [9、如何提供异步配置的接口](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/44.如何提供异步配置的接口.md)
-- [10、Fix.set和Fix.del是为了解决什么问题?]()
+- [10、Fix.set和Fix.del是为了解决什么问题?](./questions/10.Fix.set和Fix.del是为了解决什么问题.md)
-- [11、Fix中数组的使用技巧]()
+- [11、Fix中对数组、对象的操作技巧](./questions/11.Fix中对数组、对象的操作技巧.md)
 - [12、computed进行列表组件的状态控制](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/21.computed%E8%BF%9B%E8%A1%8C%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81%E6%8E%A7%E5%88%B6.md)
 - [13、如何在开发中有效减少dom数量]()
 - [14、怎么实现一个树形控件]()
-- [15、开发时必须三思的事情都有哪些]()
+- [15、]()
 - [16、为什么不推荐使用同步的watch]()
 - [17、处理树结构的常用算法]()
 - [18、组件生命周期与Model状态控制](https://code.fineres.com/projects/BUSSINESS/repos/nuclear-webui/pull-requests/9193/diff/#packages/bi-webui/src/modules/conf/pack/analysis/transfer/operator/dimension/combo/combo.tsx)

questions/10.Fix.set和Fix.del是为了解决什么问题.md

@@ -0,0 +1,55 @@
+# Fix.set和Fix.del是为了解决什么问题
+
+为了知道Fix.set和Fix.del是做什么的,首先要清楚Fix有哪些场景watch不到.
+
+熟悉Vue的同学肯定知道,Vue2.0版本中的`$set`和`$delete`,其实原理是类似的
+
+```javascript
+    state: function () {
+        return {
+            obj: {
+                a: 1,
+            },
+            arr: [0, 1],
+        };
+    },
+
+    watch: {
+        "obj.b": function () {
+            console.log(this.model.obj);
+        },
+        "arr.2": function () {
+            console.log(this.model.obj);
+        },
+    },
+
+    actions: {
+        changeArr: function () {
+            //  这两种形式都不能触发watch
+            this.model.obj.b = 2;
+            this.model.arr[2] = 2;
+        },
+    },
+```
+`Fix.set`在修改对象属性后会手动触发一次通知,因此原本无法watch到变更的场景又可以了.
+```javascript
+    Fix.set(this.model.obj, "b", 2);
+    Fix.set(this.model.arr, 2, 2);
+```
+同样的,`Fix.del`可以正常触发对删除属性的watch
+```javascript
+    watch: {
+        "obj.a": function () {
+            console.log(this.model.obj);
+        },
+    },
+
+    actions: {
+        changeArr: function () {
+            // delete this.model.obj.a;
+            Fix.del(this.model.obj, "a");
+        },
+    },
+```
+
+很多数情况下我们不借助`Fix.set`和`Fix.delete`也能实现功能,例如后续讲到的[11、Fix中对数组、对象的操作技巧](./11.Fix中对数组、对象的操作技巧.md)也可以解决我们的一些问题

questions/11.Fix中对数组、对象的操作技巧.md

@@ -0,0 +1,78 @@
+# Fix中对数组、对象的操作技巧
+
+Fix编程中状态控制采用数组,对象等非基础数据类型的场景很多,相信大多数人在接触Fix的时候都会遇到这些困惑:"为什么我明明改了值,但是没watch到呢?"
+
+下面结合几个示例
+
+## 修改数组内子元素,期望watch到数组改变
+
+对数组进行push,pop会可以watch到数组的变化,这是我们所熟知的
+我们修改了列表中的某一项,期望触发watch,从而重新渲染整个列表,但是并未得偿所愿.
+
+```javascript
+    state: function () {
+        return {
+            arr: [{ value: 1 }, { value: 2 }],
+        };
+    },
+
+    watch: {
+        arr: function () {
+            console.log(this.model.arr);
+            //  do populate
+        },
+    },
+
+    actions: {
+        changeArr: function () {
+            //  这样写法并不能触发watch
+            this.model.arr[0] = { value: 0 };
+        },
+    },
+```
+从内部原理上讲可以简单理解为修改数组的某一项,整个数组的引用并未发生改变,所以也就不会触发通知.
+
+那想办法使数组的引用变了就可以了.常用的技巧是使用`splice`方法
+```javascript
+    //  利用splice修改某个索引位置元素
+    this.model.arr.splice(0, 1, { value: 0 });
+
+    //  或者通过splice(0, 0)的技巧触发数组引用改变.常用于修改较深层次的对象解构,用该方式触发数组watch
+    this.model.arr[0].value = 0;
+    this.model.arr.splice(0, 0);
+```
+
+## 修改了对象的某个属性,期望watch到对象变化
+
+修改对象属性,增删改属性,想通过watch到整个obj的变更来进行重新渲染.
+(对象属性可以通过obj.* Fix.set等方式处理,暂不在本篇论述)
+```javascript
+    state: function () {
+        return {
+            obj: {
+                a: 1,
+            },
+        };
+    },
+
+    watch: {
+        obj: function () {
+            console.log(this.model.obj);
+        },
+    },
+
+    actions: {
+        changeArr: function () {
+            //  这样写法并不能触发watch
+            this.model.obj.a = 2;
+            this.model.obj.b = 1;
+        },
+    },
+```
+同对数组的操作一样,我们同样需要想办法改变对象的引用.常用的方法是使用传统`BI.extend`或者es6的解构操作符
+```javascript
+    //  通过解构产生一个全新的对象
+    this.model.obj = { ...this.model.obj, a: 2, b: 1 };
+    //  类似于Object.assign,注意用第一个参数的空对象来产生新的引用
+    this.model.obj = BI.extend({}, this.model.obj, { a: 2, b: 1 });
+```

questions/2.获取时间日期方法.md

@@ -0,0 +1,10 @@
+# FineUI中获取时间日期方法
+
+```javascript
+//  获取当前时间
+BI.getDate()    //  Sun Oct 09 2022 16:41:57 GMT+0800 (中国标准时间)
+//  根据时间戳获取时间
+BI.getDate(1665304924353)   //  Sun Oct 09 2022 16:42:04 GMT+0800 (中国标准时间)
+//  动态参数,依次为 year, month, day, hour, minute, second, millisecond
+BI.getDate(2022,9) //  Sat Oct 01 2022 00:00:00 GMT+0800 (中国标准时间)
+```

questions/20.如何监听元素大小变化.md

@@ -9,3 +9,5 @@
 `BI.ResizeDetector.addResizeListener`则是真实的监听组件元素大小改变,常用于计算动态宽高等场景
 
 注意事项:有添加监听必有取消监听,要注意再组建销毁时移除掉事件监听,有两种形式,一种是在添加监听的方法会返回一个移除当前监听的函数,调用即可.另一种是调用`BI.Resizers.remove`和`BI.ResizeDetector.removeResizeListener`方法
+
+额外话: `BI.ResizeDetector`现阶段采用的实现方案是对元素附加一个额外的div,通过监听scroll事件变相实现的. 为了拥抱未来,后续会改成`ResizeObserver`实现