Vue.js每天必学之构造器与生命周期

构造器

Vue.js的构造器是指Vue实例化对象时，预设的一些属性、方法、钩子函数等等。

通过构造器可以预设数据、计算属性、方法和生命周期钩子函数等。

示例代码如下：

var vm = new Vue({
  // 选项
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // 'this' points to the vm instance
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    // 这是一个方法
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  },
  beforeCreate: function () {
    console.log('Vue实例化对象前创建完成')
  },
  created: function () {
    console.log('Vue实例化对象已创建完成')
  },
  beforeMount: function () {
    console.log('Vue实例挂载前执行')
  },
  mounted: function () {
    console.log('Vue实例已经挂载到页面上')
  }
})

生命周期

生命周期钩子函数是指Vue实例在不同阶段会自动执行的函数。

示例代码如下：

var vm = new Vue({
  // 选项
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // 'this' points to the vm instance
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    // 这是一个方法
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  },
  beforeCreate: function () {
    console.log('Vue实例化对象前创建完成')
  },
  created: function () {
    console.log('Vue实例化对象已创建完成')
  },
  beforeMount: function () {
    console.log('Vue实例挂载前执行')
  },
  mounted: function () {
    console.log('Vue实例已经挂载到页面上')
  },
  beforeUpdate: function () {
    console.log('数据更新前执行')
  },
  updated: function () {
    console.log('数据更新完成')
  },
  beforeDestroy: function () {
    console.log('Vue实例销毁前执行')
  },
  destroyed: function () {
    console.log('Vue实例已销毁')
  }
})

在以上示例代码中，Vue.js实例化对象时，定义了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等生命周期函数，并通过控制台输出各个生命周期函数的执行信息。

以上就是Vue.js每天必学之构造器与生命周期的完整攻略。