抖音 27.2.0 在 if 内的 ref 无法获取到 #4554
Description
问题描述
抖音 App 版本为 27.2.0 的抖音小程序，v-if 判断的 ref 组件，无法通过 this.$refs 拿到组件实例，如果是抖音App 27.1.0 版本的话，是正常的。
复现步骤
- 新建一个 vue 文件：
<!-- src/pages/index/index.vue -->
<template>
<view>
<counter v-if="showCounter" ref="counterRef" />
<button @click="toggle">toggle</button>
<button @click="add">+</button>
</view>
</template>
<script>
import counter from '../../components/counter.vue';
export default {
components: {
counter,
},
data() {
return {
showCounter: false,
}
},
methods: {
toggle() {
this.showCounter = !this.showCounter;
},
add() {
// 这里 this.$refs 拿不到 counterRef
this.$refs.counterRef.plus();
},
}
}
</script>
<style></style>- 新建
counter组件
<!-- src/components/counter.vue -->
<template>
<view>
{{ counter }}
</view>
</template>
<script>
export default {
name: 'counter',
data() {
return {
counter: 0,
};
},
methods: {
plus() {
this.counter++;
},
},
};
</script>
<style></style>- 编译后，使用 抖音App 27.2.0 版本扫码预览上述代码（一定要真机预览，开发者工具无法重现），点击 toggle 按钮后，点击 + 按钮。
预期结果
点击 + 按钮后，应该能看到数字 0 叠加到 1。
实际结果
报错，refs 拿不到 counterRef。
系统信息:
- 发行平台: 抖音小程序
- 操作系统 Android 13
- uni-app版本
uni-app v3.8.12
uni-app cli v2.0.2-3081220230817001
Environment Info:
System:
OS: Windows 10
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@dcloudio/types: ^3.3.2 => 3.4.0
@dcloudio/uni-app: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-app-plus: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-app-plus-nvue: 0.0.1
@dcloudio/uni-app-plus-nvue-v8: 0.0.1
@dcloudio/uni-automator: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-cli-i18n: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-cli-shared: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-h5: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-helper-json: * => 1.0.13
@dcloudio/uni-i18n: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-migration: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-360: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-alipay: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-baidu: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-jd: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-kuaishou: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-lark: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-qq: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-toutiao: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-vue: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-weixin: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-mp-xhs: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-quickapp-native: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-quickapp-webview: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-stacktracey: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-stat: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/uni-template-compiler: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/vue-cli-plugin-hbuilderx: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/vue-cli-plugin-uni: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/vue-cli-plugin-uni-optimize: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/webpack-uni-mp-loader: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@dcloudio/webpack-uni-nvue-loader: 0.0.1
@dcloudio/webpack-uni-pages-loader: ^2.0.2-3081220230817001 => 2.0.2-3081220230817001
@hap-toolkit/dsl-vue: 0.6.13
@vue/babel-helper-vue-jsx-merge-props: 1.4.0
@vue/babel-helper-vue-transform-on: 1.1.5
@vue/babel-plugin-jsx: 1.1.5
@vue/babel-plugin-transform-vue-jsx: 1.4.0
@vue/babel-preset-app: 5.0.8
@vue/babel-preset-jsx: 1.4.0
@vue/babel-sugar-composition-api-inject-h: 1.4.0
@vue/babel-sugar-composition-api-render-instance: 1.4.0
@vue/babel-sugar-functional-vue: 1.4.0
@vue/babel-sugar-inject-h: 1.4.0
@vue/babel-sugar-v-model: 1.4.0
@vue/babel-sugar-v-on: 1.4.0
@vue/cli-overlay: 5.0.8
@vue/cli-plugin-babel: ~5.0.0 => 5.0.8
@vue/cli-plugin-router: 5.0.8
@vue/cli-plugin-vuex: 5.0.8
@vue/cli-service: ~5.0.0 => 5.0.8
@vue/cli-shared-utils: 5.0.8
@vue/component-compiler-utils: 3.3.0 (3.3.0)
@vue/composition-api: 1.7.0
@vue/devtools-api: 6.0.0-beta.15
@vue/shared: ^3.0.0 => 3.3.4
@vue/web-component-wrapper: 1.3.0
mpvue-page-factory: 1.0.1
mpvue-template-compiler: 1.0.13
uni-h5-vue: 2.6.10
uni-mp-vue: 2.6.10
vue: >= 2.6.14 < 2.7 => 2.6.14
vue-hot-reload-api: 2.3.4
vue-loader: 17.3.0 (15.10.2, 15.10.2, 17.3.0)
vue-router: 3.0.1
vue-style-loader: 4.1.3 (4.1.3)
vue-template-compiler: >= 2.6.14 < 2.7 => 2.6.14 (2.7.14, 2.6.14)
vue-template-es2015-compiler: 1.9.1
vue3: 1.0.0
vuex: ^3.2.0 => 3.6.2 (3.6.2)
npmGlobalPackages:
@vue/cli: Not Found补充信息
经过排查，发现因为抖音App 27.2.0 版本的 SDKVersion 为 3.0.0，在 initRefs 方法中，对 selectAllComponents API 做了一个兼容处理：
但是只判断了 minorVersion > 16 ，实际应该判断为 majorVersion > 1 || minorVersion > 16 才对。
手动修改代码如下图后，测试正常：
