fix: 修复小程序平台 v-if="false" 时标签内部的方法和过滤器仍然会执行的问题 fixed #334 #1874

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -553,22 +553,22 @@ describe('mp:compiler-extra', () => {
     assertCodegen(
       '<view><view v-for="(item, index) in list"><view>{{handle(item)}}</view></view></view>',
       '<view><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index"><view><view>{{item.m0}}</view></view></block></view>',
-      'with(this){var l0=__map(list,function(item,index){var m0=handle(item);return{$orig:__get_orig(item),m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=handle(item);return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
       '<view><view v-for="(item, index) in list"><view>{{handle(item)}}{{item.title}}</view></view></view>',
       '<view><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index"><view><view>{{item.m0+item.$orig.title}}</view></view></block></view>',
-      'with(this){var l0=__map(list,function(item,index){var m0=handle(item);return{$orig:__get_orig(item),m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=handle(item);return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
       '<view><view v-for="(item, index) in list"><view v-for="(item1,index1) in list1">{{handle(item1)}}{{item1.title}}</view></view></view>',
       '<view><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index"><view><block wx:for="{{item.l0}}" wx:for-item="item1" wx:for-index="index1"><view>{{item1.m0+item1.$orig.title}}</view></block></view></block></view>',
-      'with(this){var l1=__map(list,function(item,index){var l0=__map(list1,function(item1,index1){var m0=handle(item1);return{$orig:__get_orig(item1),m0:m0}});return{$orig:__get_orig(item),l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
+      'with(this){var l1=__map(list,function(item,index){var $orig=__get_orig(item);var l0=__map(list1,function(item1,index1){var $orig=__get_orig(item1);var m0=handle(item1);return{$orig:$orig,m0:m0}});return{$orig:$orig,l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
     )
     assertCodegen(
       '<view v-for="(section, index) in sections" :key="index">title: {{ section.title|prefix }}<view v-for="(sub_titles, _index) in section.sub_titles" :key="_index">{{ sub_titles|prefix }}</view></view>',
       '<block wx:for="{{$root.l1}}" wx:for-item="section" wx:for-index="index" wx:key="index"><view>{{"title: "+section.f0}}<block wx:for="{{section.l0}}" wx:for-item="sub_titles" wx:for-index="_index" wx:key="_index"><view>{{sub_titles.f1}}</view></block></view></block>',
-      'with(this){var l1=__map(sections,function(section,index){var f0=_f("prefix")(section.title);var l0=__map(section.sub_titles,function(sub_titles,_index){var f1=_f("prefix")(sub_titles);return{$orig:__get_orig(sub_titles),f1:f1}});return{$orig:__get_orig(section),f0:f0,l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
+      'with(this){var l1=__map(sections,function(section,index){var $orig=__get_orig(section);var f0=_f("prefix")(section.title);var l0=__map(section.sub_titles,function(sub_titles,_index){var $orig=__get_orig(sub_titles);var f1=_f("prefix")(sub_titles);return{$orig:$orig,f1:f1}});return{$orig:$orig,f0:f0,l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
     )
 
     assertCodegen(
@@ -579,12 +579,12 @@ describe('mp:compiler-extra', () => {
     assertCodegen(
       '<view v-for="(item, index) in list" :key="item">{{item.item.id | test | test1}}</view>',
       '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="$orig"><view>{{item.f0}}</view></block>',
-      'with(this){var l0=__map(list,function(item,index){var f0=_f("test1")(_f("test")(item.item.id));return{$orig:__get_orig(item),f0:f0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var f0=_f("test1")(_f("test")(item.item.id));return{$orig:$orig,f0:f0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
       '<text v-for="(item, i) in list" v-bind:key="i" >{{ item.split(\'\').join(\' \') }}</text>',
       '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="i" wx:key="i"><text>{{item.g0}}</text></block>',
-      'with(this){var l0=__map(list,function(item,i){var g0=item.split("").join(" ");return{$orig:__get_orig(item),g0:g0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      'with(this){var l0=__map(list,function(item,i){var $orig=__get_orig(item);var g0=item.split("").join(" ");return{$orig:$orig,g0:g0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
       `<view class="content">
@@ -595,7 +595,7 @@ describe('mp:compiler-extra', () => {
         </view>
     </view>`,
       '<view class="content"><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:for="{{item.l0}}" wx:for-item="item2" wx:for-index="index2" wx:key="index2"><view data-event-opts="{{[[\'tap\',[[\'show\',[\'$0\',\'$1\'],[[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']],[[\'list.\'+item.$orig.key+\'\',\'\',index2,\'id\']]]]]]]}}" bindtap="__e">{{\'\'+item2.m0+\'\'}}</view></block></view></block></view>',
-      'with(this){var l1=__map(tabList,function(item,index){var l0=__map(list[item.key],function(item2,index2){var m0=formatIt(item2.id);return{$orig:__get_orig(item2),m0:m0}});return{$orig:__get_orig(item),l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
+      'with(this){var l1=__map(tabList,function(item,index){var $orig=__get_orig(item);var l0=__map(list[item.key],function(item2,index2){var $orig=__get_orig(item2);var m0=formatIt(item2.id);return{$orig:$orig,m0:m0}});return{$orig:$orig,l0:l0}});$mp.data=Object.assign({},{$root:{l1:l1}})}'
     )
   })
 
@@ -676,4 +676,21 @@ describe('mp:compiler-extra', () => {
       '<video controls></video>'
     )
   })
+  it('generate v-if', () => {
+    assertCodegen(
+      '<view v-if="show">{{getValue(key)}}</view>',
+      '<block wx:if="{{show}}"><view>{{$root.m0}}</view></block>',
+      'with(this){var m0=show?getValue(key):null;$mp.data=Object.assign({},{$root:{m0:m0}})}'
+    )
+    assertCodegen(
+      '<view v-if="getValue(key)">{{getValue(key)}}</view>',
+      '<block wx:if="{{$root.m0}}"><view>{{$root.m1}}</view></block>',
+      'with(this){var m0=getValue(key);var m1=m0?getValue(key):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}'
+    )
+    assertCodegen(
+      '<view v-for="(item,index) in list" :key="index"><view v-if="item">{{getValue(item)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+    )
+  })
 })

packages/uni-template-compiler/lib/script/traverse/member-expr.js

 const t = require('@babel/types')
+const traverse = require('@babel/traverse').default
+
+const {
+  VAR_ROOT
+} = require('../../constants')
 
 function isMatch (name, forItem, forIndex) {
   return name === forItem || name === forIndex
@@ -33,8 +38,36 @@ function findScoped (path, state) {
   return scoped || state
 }
 
+function findTest (path, state) {
+  let tests
+  while (path.parentPath && path.key !== 'body') {
+    if (path.key === 'consequent' || path.key === 'alternate') {
+      let test = t.arrayExpression([t.clone(path.container.test)])
+      traverse(test, {
+        noScope: true,
+        MemberExpression (path) {
+          const names = state.scoped.map(scoped => scoped.forItem)
+          const node = path.node
+          const objectName = node.object.name
+          if (objectName === VAR_ROOT || names.includes(objectName)) {
+            path.replaceWith(node.property)
+          }
+        }
+      })
+      test = test.elements[0]
+      if (path.key === 'alternate') {
+        test = t.unaryExpression('!', test)
+      }
+      tests = tests ? t.logicalExpression('&&', test, tests) : test
+    }
+    path = path.parentPath
+  }
+  return tests
+}
+
 module.exports = function getMemberExpr (path, name, init, state, variableDeclaration = true) {
   const scoped = findScoped(path, state)
+  const test = findTest(path, state)
 
   if (!variableDeclaration) {
     scoped.declarationArray.push(t.expressionStatement(init))
@@ -45,7 +78,7 @@ module.exports = function getMemberExpr (path, name, init, state, variableDeclar
 
   scoped.propertyArray.push(t.objectProperty(identifier, identifier))
   scoped.declarationArray.push(
-    t.variableDeclaration('var', [t.variableDeclarator(identifier, init)])
+    t.variableDeclaration('var', [t.variableDeclarator(identifier, test ? t.conditionalExpression(test, init, t.nullLiteral()) : init)])
   )
 
   state.identifierArray.push(identifier)

packages/uni-template-compiler/lib/script/traverse/statements.js

@@ -43,20 +43,24 @@ function getMapCallExpression (
   forIndex
 ) {
   const blockStatement = []
+  // var $orgi = __get_orig(forItem)
+  blockStatement.push(t.variableDeclaration('var', [
+    t.variableDeclarator(t.identifier(VAR_ORIGINAL), t.callExpression(t.identifier(INTERNAL_GET_ORIG), [
+      t.identifier(forItem)
+    ]))
+  ]))
 
   if (declarationArray.length) {
     declarationArray.forEach(declaration => {
       blockStatement.push(declaration)
     })
     blockStatement.push(t.returnStatement(
-      // return {$orgi:__get_orig(forItem)}
+      // return {$orgi:$orgi}
       t.objectExpression(
         [
           t.objectProperty(
             t.identifier(VAR_ORIGINAL),
-            t.callExpression(t.identifier(INTERNAL_GET_ORIG), [
-              t.identifier(forItem)
-            ])
+            t.identifier(VAR_ORIGINAL)
           )
         ].concat(objectPropertyArray)
       )
@@ -116,4 +120,4 @@ module.exports = {
   getMapCallExpression,
   getDataExpressionStatement,
   getEventExpressionStatement
-}
+}