深入理解Vue生命周期、手动挂载及挂载子组件

深入理解Vue生命周期

Vue生命周期是Vue组件从创建到销毁直接的各个阶段，每个阶段都拥有自己的方法和属性。理解Vue生命周期非常重要，可以方便我们在合适的阶段做出更好的操作。

Vue生命周期分为8个阶段：

• beforeCreate：实例刚刚被创建，数据观测(data observer)和事件机制(event mechanism)未初始化。所以组件内一般无法拿到数据。
• created：实例已经创建完成，但还未开始DOM编译模板。组件内可进行数据获取，因此一些最早渲染的数据初始化通常在此阶段处理。
• beforeMount：模板已经在内存中编译完成，但尚未挂在到页面中。在这个周期中，可以在模板挂在到页面之前修改DOM。
• mounted：模板已经完成挂载到页面上，这个时候可以进行一些DOM操作，如定时器，监听事件等，这也是从服务端获取数据进行渲染的最后时机。
• beforeUpdate：当数据更新时会触发该钩子函数，在这个生命周期函数中，可以计算出更新前后数据的差异，并采取进一步的操作（如：删除某个节点）。
• updated：当数据更新后会触发该钩子函数，在该函数内部进行相应处理，如更新更新后的节点等操作。
• beforeDestroy：组件即将销毁，当组件被销毁前会触发该钩子函数，可以在该函数中清除定时器、取消事件监听等资源操作。
• destroyed：组件已经销毁完成并从页面中移除，此时，对组件的引用一般不再使用。

手动挂载及挂载子组件

手动挂载

手动挂载即在Vue的实例上进行手动挂载，以避免使用Vue的模板编译器，提高首次加载速度。手动挂载包括以下两个步骤：

1. 将Vue实例挂载到一个dom节点上

const app = new Vue({
  template: '<div>Hello World!</div>' // 模拟模板
})

app.$mount('#app') // 将Vue实例挂载到 #app dom节点上

1. 在指定dom节点上手动创建Vue实例，保持与模板渲染的一致

const app = new Vue({
  template: '<div>Hello {{name}}!</div>', // 模拟模板
  data: {
    name: 'Vue'
  }
})

// 将Vue实例手动挂载到dom节点上
const el = document.createElement('div')
el.id = 'app'
document.body.appendChild(el)

app.$mount('#app')

挂载子组件

挂载子组件需要使用Vue的components选项，在父组件中显式地声明子组件，然后在模板中使用子组件标签来挂载。

// 定义子组件
Vue.component('hello-child', {
  template: '<div>Hello {{name}}!</div>',
  data: function() {
    return {
      name: 'Vue'
    }
  }
})

// 定义父组件
const app = new Vue({
  el: '#app',
  template: '<hello-child />'
})

在示例中，使用Vue.component方法来定义子组件，然后在父组件模板中使用<hello-child />标签来挂载子组件。

下面是另一个例子，演示如何向子组件传递参数：

// 定义子组件
Vue.component('hello-child', {
  template: '<div>Hello {{name}}! I am {{age}} years old.</div>',
  props: ['name', 'age'] // 接收传入的name和age参数
})

// 定义父组件
const app = new Vue({
  el: '#app',
  data: {
    childName: 'Vue',
    childAge: 3
  },
  template: '<hello-child :name="childName" :age="childAge" />' // 传递参数给子组件
})

在示例中，我们在父组件的data中定义子组件所需要的参数，并在模板中使用:name和:age的语法将这些参数传递给子组件。子组件使用props选项来声明接收这些参数，并使用{{name}}和{{age}}语法在模板中渲染出来。