Question

我正在学习Vue，并且在同一页面上有两个实例vm1和vm2。

首先，范围界定很奇怪。实例属性的作用域是DOM元素，而不是大括号中的点运算符：

{{ attr1 }}而不是{{ vm.attr1 }}

不仅如此，当属性不存在时，魔术作用域也会自动失败！

下面的代码执行没有错误。注意toggle引用了is_visible上不存在的vm：

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
    <script>
      window.onload = function() {
        var vm1 = new Vue({
          el: '#vm1',
          data: {
            message: 'vm1',
          },
          methods:{
            toggle: function(){
              this.is_visible = !this.is_visible;
            }
          }
        });
        var vm2 = new Vue({
            el: '#vm2',
            data: {
              message: 'vm2',
            },
        });
      };
    </script>
  </head>
  <body>
    <div id="vm1">
      <h1 v-on:click="toggle()">{{ message }}</h1>
    </div>
    <div id="vm2">
      <h1>{{ message }}</h1>
    </div>
  </body>
</html>

Answer 1

实例属性的作用域是DOM元素，而不是大括号中的点运算符
{{ attr1 }} rather than {{ vm.attr1 }}

是的，这就是在模板中访问Vue属性的方式（不引用vm或this）。

当属性不存在时，魔术作用域将自动失败！

这不是沉默的失败。恰好是有效的JavaScript。在toggle()中，代码将附加一个名为is_visible的新属性，并将其值设置为否定。最初，它是未定义的，因此求反结果为true。

function Foo() {
  console.log({foo1: this.foo});
  this.foo = !this.foo;
  console.log({foo2: this.foo});
}

new Foo();

Vue不需要在data()中声明所有属性。您可以随时将新属性附加到组件实例。但是，未在data()中声明的属性是无效的。这对于不需要在模板中的局部变量（例如计时器ID）很有用。

静默访问Vue实例上的不存在属性失败

1 个答案: