Var VM = new Vue({el: '#app', // effective scope data () {}, // data methods: {}, // filter: {}, // filter: {}, // custom directive (use less) components: {}, // Load component // lifecycle function, In addition to using beforeCreate created, little else than mounted () {}, created () {}, beforeMount () {}, mounted () {}, beforeUpdate () {}, updated () {}, beforeDestroy () {}, destroyed () () })Copy the code

Commonly used: beforeCreate, Created, Mounted, computed, and watch

beforeCreate

At this time, the this variable cannot be used, and the data under data, methods under methods, and events in Watch cannot be obtained

beforeCreate() { console.log(this.page); // undefined console.log{this.showPage); // undefined}, data() {return {page: 'first'}}, methods: {showPage() {console.log(this.page); }}Copy the code
created

At this point, you can manipulate data and methods in the VUE instance, but you can’t yet manipulate DOM nodes

Created () {let BTN = document.querySelector('button') console.log(btn.innertext)Copy the code
mounted

At this point, the mount is complete, the DOM node is rendered into the document, and some dom operations can be performed properly at this point

Mounted () {let BTN = document.querySelector('button') console.log(BTN.Copy the code
computed

Write all values that depend on other values as object keys

Data () {return {count: 1}}, computed: {// is the last value to be computed, and that value depends on this.count // So that the value is written in the object's key. CountDouble: {get: function() { return this.count * 2 }, set: function(newValue) { this.countDouble = newValue } } }Copy the code
watch

Write the listening value as the key value of the object

 data() {
    return {
      count: 1
    }
  },
  watch: {
    count: (val, oldVal) => {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
Copy the code

If this. Count changes, the funtion will be executed to listen for the change in the count variable. Note: The variable to listen for must be declared in data.

Reference: www.jianshu.com/p/8314ccd03…

Differences between Data and computed:
  1. Attributes in data do not change as the assigned variable changes
  2. When such changes are needed in response to changes in assigned variables, computed attributes are appropriate

Quoted: blog.csdn.net/weixin_3440…

Differences between Watch and computed:

Computed is used to define data based on data. Watch does something when the data changes. If you update other data, it’s the same as defining the data item to be updated as computed, so using computed is more readable. Although technically the Watch can be done. You can also do other things when watch’s data changes, such as calling a method, that computed doesn’t and shouldn’t do. Conclusion:

  1. If a data set depends on other data, design it for computed
  2. If you need to do something when the data changes, use Watch to watch the data change

Quote: segmentfault.com/q/101000000…

BeforeCreate created [can get data and methods] beforeMount Mounted [can get real DOM] beforeUpdate updated [Perform data update] beforeDestroy destroyed [Destroyed vUE instance, no longer features bidirectional data binding]

When does VUE trigger destroy

Destroy we destroy listener events and timer functions. There are two common ways to trigger destroy to destroy a component:

  1. Route switching when keep-alive is not used
  2. Set v-if to false for this component