uni-app vue3 模板里的表达式计算结果错误

uni-app vue3 模板里的表达式计算结果错误

开发环境 版本号 项目创建方式
Mac 10.15 HBuilderX

操作步骤：

运行上面的代码，观察输出结构

预期结果：

插值表达式计算结果正常

实际结果：

计算结果为 undefined

bug描述：

vue3 插值计算有问题，如果在插值中调用了方法进行计算，编译运行后的值为 undefined。

源代码

<template>  
  <view>  
    <view>  
      <view>  
        <text>{{ msg + '...' }}</text>  
      </view>  
      <view>  
        <text>{{ 10 > 9 ? 1 : 0 }}</text>  
      </view>  
      <view>  
        <text>  
          msg method:  
          {{  
            message  
              .split('')  
              .reverse()  
              .join('-')  
          }}  
          / {{ message }}  
        </text>  
      </view>  
      <view>  
        <text>{{ (10).toString(2) }}</text>  
      </view>  
      <view>  
        <text>{{ binary(10) }}</text>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      msg: 'hello',  
      message: 'word',  
    };  
  },  
  methods: {  
    binary(value) {  
      return value.toString(2)  
    }  
  }  
};  
</script>  

<style></style>

编译后的代码

<view>  
  <view>  
    <view><text>{{msg+'...'}}<text/></view>  
    <view><text>{{10>9?1:0}}</text></view>  
    <view><text>{{'msg method:\n '+$root.g0+"\n / "+message+''}}</text></view>  
    <view><text>{{$root.g1}}</text></view>  
    <view><text>{{$root.m0}}</text></view>  
  </view>  
</view>

在微信开发者工具商看了下，vue2 版本的 component data 上有 $root 状态，但 vue3 版本是没有的。然后看了下编译后的逻辑层代码，里面有个 render 函数。

var render = function() {  
  var _vm = this  
  var _h = _vm.$createElement  
  var _c = _vm._self._c || _h  
  var s0 = _vm.__get_style([_vm.style1, _vm.style2])  

  var g0 = _vm.message  
    .split("")  
    .reverse()  
    .join("-")  
  var g1 = (10).toString(2)  
  var m0 = _vm.binary(10)  
  _vm.$mp.data = Object.assign(  
    {},  
    {  
      $root: {  
        s0: s0,  
        g0: g0,  
        g1: g1,  
        m0: m0  
      }  
    }  
  )  
}

更多关于uni-app vue3 模板里的表达式计算结果错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

未复现此问题，请升级至HBuilder X - 3.2.14-alpha版本试下

更多关于uni-app vue3 模板里的表达式计算结果错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于uni-app在Vue3模式下对模板表达式的编译处理方式与Vue2不同导致的。

在Vue2版本中，uni-app会将模板中的复杂表达式提取到$root对象中，通过数据绑定的方式传递到视图层。但从你提供的编译后代码可以看到，在Vue3版本中，虽然编译逻辑仍然生成了$root对象，但实际运行时Vue3组件实例上并没有这个属性。

解决方案：

  1. 避免在模板中使用复杂表达式，改为在计算属性或方法中处理：
<template>
  <view>
    <text>{{ reversedMessage }}</text>
    <text>{{ binaryNumber }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'word',
      number: 10
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('-');
    },
    binaryNumber() {
      return this.number.toString(2);
    }
  }
};
</script>
  1. 对于简单表达式，可以保持原样，uni-app会正常处理：
<text>{{ msg + '...' }}</text>
<text>{{ 10 > 9 ? 1 : 0 }}</text>
  1. 如果必须使用复杂表达式，可以考虑使用立即执行函数：
<text>{{ (() => message.split('').reverse().join('-'))() }}</text>
回到顶部