fix(Segment): 修复动态修改 tab 无效问题

在对 segment-item 的 tab 属性就行动态修改时，
segment-item 的数量如果与之前一致，页面视图将不会更新。
该 commit 修复了此问题

close #845

examples/dist/segment/index.js

@@ -2,8 +2,8 @@ import scrollCenter from '../behaviors/scrollCenter';
 
 Component({
   /**
-     * 组件的属性列表
-     */
+   * 组件的属性列表
+   */
   behaviors: [scrollCenter],
   externalClasses: [
     'l-class',
@@ -24,15 +24,16 @@ Component({
     'l-badge-class'
   ],
   options: {
-    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+    multipleSlots: true,
+    pureDataPattern: /^_/
   },
 
   relations: {
     '../segment-item/index': {
       type: 'child',
-      linked() {
+      linked(target) {
         // 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
-        this.initTabs();
+        this.initTabs(target);
       }
     },
   },
@@ -74,11 +75,11 @@ Component({
 
   observers: {
     'activeKey': function (newKey) {
-      if(!newKey) return;
-      const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
+      if (!newKey) return;
+      const index = this.data.tabList.findIndex(tab => tab.key === newKey);
       this.setData({
-        currentIndex:index
-      },() => {
+        currentIndex: index
+      }, () => {
         if (this.data.scrollable) {
           this.queryMultipleNodes();
         }
@@ -87,21 +88,23 @@ Component({
   },
 
   /**
-     * 组件的初始数据
-     */
+   * 组件的初始数据
+   */
   data: {
     tabList: [],
-    currentIndex: 0
+    currentIndex: 0,
+    _segmentItemInstances: []
   },
 
   /**
-     * 组件的方法列表
-     */
+   * 组件的方法列表
+   */
   methods: {
-    initTabs(val = this.data.activeKey) {
+    initTabs(segmentItemInstance) {
+      const val = this.data.activeKey
       let items = this.getRelationNodes('../segment-item/index');
       if (items.length > 0) {
-        if (items.length === this.data.tabList.length) return;
+        if (items.length === this.data.tabList.length && this.data._segmentItemInstances.indexOf(segmentItemInstance) > 0) return;
         let activeKey = val,
           currentIndex = this.data.currentIndex;
         const tab = items.map((item, index) => {
@@ -115,6 +118,7 @@ Component({
           tabList: tab,
           activeKey,
           currentIndex,
+          _segmentItemInstances: items
         }, () => {
           if (this.data.scrollable) {
             this.queryMultipleNodes();

src/segment/index.js

@@ -2,8 +2,8 @@ import scrollCenter from '../behaviors/scrollCenter';
 
 Component({
   /**
-     * 组件的属性列表
-     */
+   * 组件的属性列表
+   */
   behaviors: [scrollCenter],
   externalClasses: [
     'l-class',
@@ -24,15 +24,16 @@ Component({
     'l-badge-class'
   ],
   options: {
-    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+    multipleSlots: true,
+    pureDataPattern: /^_/
   },
 
   relations: {
     '../segment-item/index': {
       type: 'child',
-      linked() {
+      linked(target) {
         // 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
-        this.initTabs();
+        this.initTabs(target);
       }
     },
   },
@@ -74,11 +75,11 @@ Component({
 
   observers: {
     'activeKey': function (newKey) {
-      if(!newKey) return;
-      const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
+      if (!newKey) return;
+      const index = this.data.tabList.findIndex(tab => tab.key === newKey);
       this.setData({
-        currentIndex:index
-      },() => {
+        currentIndex: index
+      }, () => {
         if (this.data.scrollable) {
           this.queryMultipleNodes();
         }
@@ -87,21 +88,23 @@ Component({
   },
 
   /**
-     * 组件的初始数据
-     */
+   * 组件的初始数据
+   */
   data: {
     tabList: [],
-    currentIndex: 0
+    currentIndex: 0,
+    _segmentItemInstances: []
   },
 
   /**
-     * 组件的方法列表
-     */
+   * 组件的方法列表
+   */
   methods: {
-    initTabs(val = this.data.activeKey) {
+    initTabs(segmentItemInstance) {
+      const val = this.data.activeKey
       let items = this.getRelationNodes('../segment-item/index');
       if (items.length > 0) {
-        if (items.length === this.data.tabList.length) return;
+        if (items.length === this.data.tabList.length && this.data._segmentItemInstances.indexOf(segmentItemInstance) > 0) return;
         let activeKey = val,
           currentIndex = this.data.currentIndex;
         const tab = items.map((item, index) => {
@@ -115,6 +118,7 @@ Component({
           tabList: tab,
           activeKey,
           currentIndex,
+          _segmentItemInstances: items
         }, () => {
           if (this.data.scrollable) {
             this.queryMultipleNodes();