Vue Learn Vue Instance

Posted by alext on Tue, 18 Jan 2022 23:22:03 +0100

Vue instance

Create a Vue instance:

A Vue application starts by creating a Vue instance with the Vue function:

var vm = new Vue({
  // option
})

Data and methods

When a Vue instance is created, it adds all the properties from the data object to the Vue's responsive system. When the values of these properties change, the view responds by matching the updated values.

// Our Data Objects
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// Get the property on this instance
// Returns the corresponding field in the source data
vm.a == data.a // => true

// Setting property also affects the original data
vm.a = 2
data.a // => 2

// ...and vice versa
data.a = 3
vm.a // => 3

That is, two-way binding

When the data changes, the view is rendered again. Note that a property that already exists in the data when an instance is created is responsive. That is, if you add a new property, such as:

vm.b = 'hi'

The change to b will not trigger any view updates. If you know you will need a property later, but at first it is empty or does not exist, then you only need to set some initial values. For example:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Use Object.freeze(), which prevents modifications to existing properties, also means that the response system can no longer track changes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <p>{{foo}}</p>
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>

    <script type="text/javascript">
      var obj = {
          foo:'bar'
      }
      Object.freeze(obj)
      new Vue({
          el:'#app',
          data:obj
      })
    </script>
  </body>
</html>

In addition to data property, Vue instances expose some useful instance property methods. They all have a $prefix to distinguish them from user-defined properties. For example:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be in `vm.a`Called after change
})

Hook for instance life cycle

Each Vue instance is created through a series of initialization processes - for example, setting up data monitoring, compiling templates, mounting instances to the DOM, updating the DOM as data changes, and so on. Functions called life cycle hooks are also run during this process, which gives users the opportunity to add their own code at different stages.

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this`points to a vm instance
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

There are also other hooks that are called at different stages of the instance life cycle, such as mounted,updated,destroyed. The this context of the life cycle hook points to the Vue instance calling it.

Note: Do not use on option property or callback Arrow function For example, create: () => console. Log (this.a) or vm. $ Watch ('a', newValue => this.myMethod()). Because the arrow function does not have this, this will be searched up the upper lexical scope as a variable until it is found, often resulting in Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this. Errors such as myMethod is not a function.

Life cycle diagram:

The following diagram shows the life cycle of an instance. You don't need to know everything right away, but as you learn and use it, its value will grow

Topics: Vue

Programmer Think