Question

如果我使用缩小文件 - 下一个代码运行正常：

<div id="app">
{{ bus.someVar }} -- {{ myVar }}
</div>
<script>
var bus = new Vue({
  data: {
    someVar: 'Variable from BUS'
  }
})
var vm = new Vue({
  el: "#app",
  data: {
    myVar: 'Variable from MAIN VM'
  }
});
</script>

但是对于开发版本，它说＆＃34;属性或方法＆＃39; bus＆＃39;未定义＆＃34;。这是正常的行为吗？

Answer 1

在非缩小版本中，Vue将在渲染之前检查变量是否存在。由于bus.someVar实例中不存在vm，因此Vue会抛出错误并停止。

在缩小版中，没有这样的验证，所以渲染功能一直都在进行。

＆＃34;一路走来＆＃34;表示渲染函数将从外部（在您的情况下为全局）范围中获取实例中不存在的任何变量。

为了更好地理解，让我们看一下从模板生成的render函数。

考虑模板：

<div id="app">
{{ bus.someVar }} -- {{ myVar }}
</div>

Vue生成以下渲染功能：

function() {
  with(this) {
    return _c('div', {
      attrs: {
        "id": "app"
      }
    }, [_v("\n" + _s(bus.someVar) + " -- " + _s(myVar) + "\n")])
  }
}

＆＃34;扩大＆＃34;它将成为函数的名称：

function() {
  with(this) {
    return createElement('div', {
      attrs: {
        "id": "app"
      }
    }, [createTextVNode("\n" + toString(bus.someVar) + " -- " + toString(myVar) + "\n")])
  }
}

如果您需要一些时间阅读，那么为所提到的模板生成的渲染函数是有意义的。

现在，当该函数在vm Vue实例中运行时，this为vm。

由于with(this)的存在，上述代码会将myVar解析为this.myVar，这与vm.myVar相同。现在，类似地，由于bus不是vm的属性，它将回退到外部上下文，即window。当它找到另一个bus Vue实例时。

所以，简而言之：当前Vue实例中不存在的任何变量， minified Vue将从全局范围中获取。

这似乎令人困惑，因为问题示例中的bus是另一个Vue实例，但这只是巧合。为了证明我的观点，请看下面的演示。 bus只是属于全局范围的对象，Vue会选择它。

＆＃13;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
{{ bus.someVar }} -- {{ myVar }}
</div>

<script>
var bus = {someVar: 'Variable from (just an object) BUS'}

var vm = new Vue({
  el: "#app",
  data: {
    myVar: 'Variable from MAIN VM'
  }
});

console.log('bus it at the global scope:', bus.someVar);
console.log('bus is not at vm.bus:', vm.bus);
</script>

＆＃13;

vue.js开发和缩小版本之间的区别？

1 个答案: