Что такое ViewModel во Vue и как он работает

Определение

ViewModel в Vue.js — это объект, который обрабатывает данные и логику, связывая данные (Model) и представление (View). Он обеспечивает реактивность, позволяя автоматически обновлять интерфейс при изменении состояния данных.

Как работает ViewModel

1. Создание экземпляра Vue: При создании экземпляра Vue с помощью new Vue() создается ViewModel. Этот объект управляет состоянием и поведением компонента.

   const app = new Vue({
       el: '#app',
       data: {
           message: 'Hello Vue!'
       }
   });

2. Реактивность: ViewModel использует реактивные свойства. Когда данные изменяются, Vue отслеживает эти изменения и обновляет представление.

   app.message = 'Hello World!'; // Обновление автоматически отобразится в интерфейсе

3. Связывание данных: С помощью директив, таких как v-bind, v-model, Vue связывает данные ViewModel с элементами интерфейса.

   <div id="app">
       <p>{{ message }}</p>
       <input v-model="message">
   </div>

4. Методы и вычисляемые свойства: ViewModel может содержать методы и вычисляемые свойства, которые помогают в управлении логикой и состоянием.

   const app = new Vue({
       data: {
           counter: 0
       },
       computed: {
           doubledCounter() {
               return this.counter * 2;
           }
       },
       methods: {
           increment() {
               this.counter++;
           }
       }
   });

Пример

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
    <button @click="increment">Increment</button>
    <p>Doubled: {{ doubledCounter }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        counter: 0
    },
    computed: {
        doubledCounter() {
            return this.counter * 2;
        }
    },
    methods: {
        increment() {
            this.counter++;
        }
    }
});
</script>