Доступ к несуществующему атрибуту в экземпляре Vue автоматически завершается ошибкой

Question 1

Я изучаю 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>

javascript vue.js

0

Tom Russell 11 Сен 2018 в 03:01

Answer

Атрибуты экземпляра ограничены элементом 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(), не являются реактивными. Это может быть полезно для локальных переменных, которые не обязательно должны быть в шаблоне (например, идентификаторы таймера).

1

Community 20 Июн 2020 в 09:12

Question 2

Атрибуты экземпляра ограничены элементом 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(), не являются реактивными. Это может быть полезно для локальных переменных, которые не обязательно должны быть в шаблоне (например, идентификаторы таймера).

1

Community 20 Июн 2020 в 09:12

Доступ к несуществующему атрибуту в экземпляре Vue автоматически завершается ошибкой

1 ответ

Похожие вопросы

Новые вопросы

javascript