fix(v3): generate id with key #1746

packages/uni-app-plus/dist/index.v3.js

@@ -2844,9 +2844,9 @@ var serviceContext = (function () {
     result = Math.floor(result + EPS);
     if (result === 0) {
       if (deviceDPR === 1 || !isIOS) {
-        return 1
+        result = 1;
       } else {
-        return 0.5
+        result = 0.5;
       }
     }
     return number < 0 ? -result : result
@@ -7989,6 +7989,8 @@ var serviceContext = (function () {
     webview.addEventListener('resize', debounce(onResize, 50));
   }
 
+  const VD_SYNC_VERSION = 2;
+
   const PAGE_CREATE = 2;
   const MOUNTED_DATA = 4;
   const UPDATED_DATA = 6;
@@ -8000,9 +8002,9 @@ var serviceContext = (function () {
 
   const WEBVIEW_READY = 'webviewReady';
   const VD_SYNC_CALLBACK = 'vdSyncCallback';
-  const INVOKE_API = 'invokeApi';
-  const WEB_INVOKE_APPSERVICE$1 = 'WEB_INVOKE_APPSERVICE';
-  const WEBVIEW_INSERTED = 'webviewInserted';
+  const INVOKE_API = 'invokeApi';
+  const WEB_INVOKE_APPSERVICE$1 = 'WEB_INVOKE_APPSERVICE';
+  const WEBVIEW_INSERTED = 'webviewInserted';
   const WEBVIEW_REMOVED = 'webviewRemoved';
 
   function onWebviewRecovery (webview, routeOptions) {
@@ -13541,20 +13543,24 @@ var serviceContext = (function () {
     }
   }
 
-  function generateId (vm, parent) {
+  function generateId (vm, parent, version) {
     if (!vm.$parent) {
       return '-1'
     }
     const vnode = vm.$vnode;
     const context = vnode.context;
+    let id = vnode.data.attrs._i;
+    if (version && hasOwn(vnode.data, 'key')) { // 补充 key 值
+      id = id + ';' + vnode.data.key;
+    }
     // slot 内的组件，需要补充 context 的 id，否则可能与内部组件索引值一致，导致 id 冲突
     if (context && context !== parent && context._$id) {
       if (process.env.NODE_ENV !== 'production') {
-        console.log('generateId:' + context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i);
+        console.log('generateId:' + context._$id + ';' + parent._$id + ',' + id);
       }
-      return context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i
+      return context._$id + ';' + parent._$id + ',' + id
     }
-    return parent._$id + ',' + vnode.data.attrs._i
+    return parent._$id + ',' + id
   }
 
   function setResult (data, k, v) {
@@ -13643,7 +13649,7 @@ var serviceContext = (function () {
           this._$vdomSync = new VDomSync(this.$options.pageId, this.$options.pagePath, this.$options.pageQuery, this);
         }
         if (this._$vd) {
-          this._$id = generateId(this, this.$parent);
+          this._$id = generateId(this, this.$parent, VD_SYNC_VERSION);
           this._$vd.addVm(this);
           this._$vdMountedData = Object.create(null);
           this._$setData(MOUNTED_DATA, this._$vdMountedData);
@@ -13875,6 +13881,7 @@ var serviceContext = (function () {
     const statusbarHeight = getStatusbarHeight();
 
     return {
+      version: VD_SYNC_VERSION,
       disableScroll,
       onPageScroll,
       onPageReachBottom,

src/platforms/app-plus/constants.js

+export const VD_SYNC_VERSION = 2
+
 export const PAGE_CREATE = 2
 export const MOUNTED_DATA = 4
 export const UPDATED_DATA = 6
@@ -14,7 +16,7 @@ export const APP_SERVICE_ID = '__uniapp__service'
 export const WEBVIEW_READY = 'webviewReady'
 export const WEBVIEW_UI_EVENT = 'webviewUIEvent'
 export const VD_SYNC_CALLBACK = 'vdSyncCallback'
-export const INVOKE_API = 'invokeApi'
-export const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE'
-export const WEBVIEW_INSERTED = 'webviewInserted'
+export const INVOKE_API = 'invokeApi'
+export const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE'
+export const WEBVIEW_INSERTED = 'webviewInserted'
 export const WEBVIEW_REMOVED = 'webviewRemoved'

src/platforms/app-plus/helpers/util.js

-export function generateId (vm, parent) {
+import {
+  hasOwn
+} from 'uni-shared'
+
+export function generateId (vm, parent, version) {
   if (!vm.$parent) {
     return '-1'
   }
   const vnode = vm.$vnode
   const context = vnode.context
+  let id = vnode.data.attrs._i
+  if (version && hasOwn(vnode.data, 'key')) { // 补充 key 值
+    id = id + ';' + vnode.data.key
+  }
   // slot 内的组件，需要补充 context 的 id，否则可能与内部组件索引值一致，导致 id 冲突
   if (context && context !== parent && context._$id) {
     if (process.env.NODE_ENV !== 'production') {
-      console.log('generateId:' + context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i)
+      console.log('generateId:' + context._$id + ';' + parent._$id + ',' + id)
     }
-    return context._$id + ';' + parent._$id + ',' + vnode.data.attrs._i
+    return context._$id + ';' + parent._$id + ',' + id
   }
-  return parent._$id + ',' + vnode.data.attrs._i
+  return parent._$id + ',' + id
 }

src/platforms/app-plus/service/framework/plugins/data.js

@@ -6,7 +6,8 @@ import {
 
 import {
   MOUNTED_DATA,
-  UPDATED_DATA
+  UPDATED_DATA,
+  VD_SYNC_VERSION
 } from '../../../constants'
 
 import {
@@ -88,7 +89,7 @@ export function initData (Vue) {
         this._$vdomSync = new VDomSync(this.$options.pageId, this.$options.pagePath, this.$options.pageQuery, this)
       }
       if (this._$vd) {
-        this._$id = generateId(this, this.$parent)
+        this._$id = generateId(this, this.$parent, VD_SYNC_VERSION)
         this._$vd.addVm(this)
         this._$vdMountedData = Object.create(null)
         this._$setData(MOUNTED_DATA, this._$vdMountedData)

src/platforms/app-plus/service/framework/plugins/lifecycle.js

@@ -16,6 +16,10 @@ import {
 }
   from 'uni-core/service/plugins/lifecycle'
 
+import {
+  VD_SYNC_VERSION
+} from '../../../constants'
+
 import {
   ON_REACH_BOTTOM_DISTANCE,
   TITLEBAR_HEIGHT
@@ -43,6 +47,7 @@ function parsePageCreateOptions (vm, route) {
   const statusbarHeight = getStatusbarHeight()
 
   return {
+    version: VD_SYNC_VERSION,
     disableScroll,
     onPageScroll,
     onPageReachBottom,

src/platforms/app-plus/view/framework/plugins/data.js

 import Vue from 'vue'
 
-import {
+import {
   VD_SYNC,
   PAGE_CREATE,
   MOUNTED_DATA,
@@ -43,7 +43,9 @@ const handleData = {
     // 初始化当前页面 VueComponent（生成页面样式代码）
     PageVueComponent = getPageVueComponent(pagePath)
     // 生成当前页面 vd
-    vd = new VDomSync(pageId)
+    vd = new VDomSync(pageId, {
+      version: pageOptions.version
+    })
   },
   [MOUNTED_DATA]: function onMounted (data) {
     vd.addVData.apply(vd, data)

src/platforms/app-plus/view/framework/plugins/vdom-sync.js

@@ -18,11 +18,13 @@ function findParent (vm) {
 }
 
 export class VDomSync {
-  constructor (pageId) {
+  constructor (pageId, options = {}) {
     this.pageId = pageId
     this.addBatchVData = Object.create(null)
     this.updateBatchVData = []
     this.vms = Object.create(null)
+
+    this.version = options.version
   }
 
   addVData (cid, data = {}, options = {}) {
@@ -34,7 +36,7 @@ export class VDomSync {
   }
 
   initVm (vm) {
-    vm._$id = generateId(vm, findParent(vm))
+    vm._$id = generateId(vm, findParent(vm), this.version)
     let vData = this.addBatchVData[vm._$id]
     if (!vData) {
       console.error('cid unmatched', vm)