title: Vue 组件生命周期：探索钩子

date: 2024/5/27 18:42:38

updated: 2024/5/27 18:42:38

categories:

  • 前端开发

tags:

  • 生命周期
  • 异步加载
  • 通信原理
  • 父子通信
  • 兄弟通信
  • 跨层通信
  • 性能优化

第 1 章：介绍与背景

1.1 什么是 Vue 组件生命周期？

Vue 组件生命周期是指 Vue 组件从创建、运行到销毁的整个过程，共分为 8 个阶段：

  1. 创建前（beforeCreate）
  2. 创建后（created）
  3. 载入前（beforeMount）
  4. 载入后（mounted）
  5. 更新前（beforeUpdate）
  6. 更新后（updated）
  7. 销毁前（beforeDestroy）
  8. 销毁后（destroyed）

在每个阶段，Vue 框架都提供了特定的钩子函数，开发人员可以在这些函数中编写自定义的代码，从而实现对组件生命周期的控制和管理。

1.2 为什么需要了解生命周期？

了解 Vue 组件生命周期有以下几个优点：

  1. 了解组件的运行机制，提高开发效率。
  2. 在合适的时机进行数据处理和事件绑定，提高项目性能。
  3. 在组件创建和销毁时进行资源清理和内存释放，避免内存泄漏。
  4. 在生命周期钩子函数中进行异步数据加载和组件通信，使代码更加清晰和可维护。

1.3 如何利用生命周期提高开发效率？

  1. 在创建阶段，可以进行数据初始化和事件绑定，避免在模板中频繁的编写相同的代码。
  2. 在运行阶段，可以对数据进行监听和优化，提高项目性能。
  3. 在销毁阶段，可以进行资源清理和内存释放，避免内存泄漏。AD：漫画首页
  4. 在生命周期钩子函数中进行异步数据加载和组件通信，使代码更加清晰和可维护。
  5. 通过使用第三方库或插件，可以更加方便地使用生命周期钩子函数，提高开发效率。

第 2 章：组件生命周期概述

2.1 组件生命周期的基本概念

组件生命周期是指 Vue 组件从创建、运行到销毁的整个过程。在这个过程中，Vue 框架会自动调用一系列的生命周期钩子函数，开发人员可以在这些函数中编写自定义的代码，从而实现对组件生命周期的控制和管理。

2.2 生命周期钩子函数的分类

Vue 组件的生命周期钩子函数可以分为以下几类：

  1. 创建阶段钩子函数：在组件创建时调用，包括 beforeCreate 和 created 两个钩子函数。
  2. 载入阶段钩子函数：在组件载入时调用，包括 beforeMount 和 mounted 两个钩子函数。
  3. 更新阶段钩子函数：在组件更新时调用，包括 beforeUpdate 和 updated 两个钩子函数。
  4. 销毁阶段钩子函数：在组件销毁时调用，包括 beforeDestroy 和 destroyed 两个钩子函数。

2.3 常见的生命周期钩子函数

  1. beforeCreate：在组件实例被创建之前调用，此时组件实例的数据和方法还未初始化。
  2. created：在组件实例被创建之后调用，此时组件实例的数据和方法已经初始化，但组件还未被挂载到 DOM 上。
  3. beforeMount：在组件被挂载到 DOM 之前调用，此时组件的模板已经编译完成，但还未渲染到 DOM 上。
  4. mounted：在组件被挂载到 DOM 之后调用，此时组件已经渲染到 DOM 上，可以进行 DOM 操作和异步数据加载。
  5. beforeUpdate：在组件更新之前调用，此时组件的数据已经发生变化，但还未重新渲染到 DOM 上。
  6. updated：在组件更新之后调用，此时组件的数据已经重新渲染到 DOM 上，可以进行 DOM 操作和异步数据加载。
  7. beforeDestroy：在组件销毁之前调用，此时组件实例仍然可用，可以进行资源清理和内存释放。AD：首页 | 一个覆盖广泛主题工具的高效在线平台
  8. destroyed：在组件销毁之后调用，此时组件实例已经被销毁，无法再进行任何操作。

第 3 章：创建阶段

在 Vue.js 中，组件的创建阶段包括以下几个钩子函数：

  1. beforeCreate：在组件实例被创建之前调用，此时数据和方法还未初始化。
  2. created：在组件实例被创建之后调用，此时数据和方法已经初始化，可以进行数据操作和事件绑定。
  3. beforeMount：在组件被挂载到 DOM 之前调用，此时模板已经编译完成，但还未渲染到 DOM 上。
  4. mounted：在组件被挂载到 DOM 之后调用，此时组件已经渲染到 DOM 上，可以进行 DOM 操作和异步数据加载。

在创建阶段，可以在钩子函数中进行数据处理和事件绑定，以简化组件的代码和提高组件的性能。

例如，在 created 钩子函数中可以进行数据的请求和初始化，从而避免在组件挂载到 DOM 之后再进行数据请求，提高组件的渲染速度。

同时，可以在 created 钩子函数中进行事件的绑定，从而在组件创建时就完成事件的绑定，而无需在 mounted 钩子函数中进行事件绑定。

总之，在创建阶段进行数据处理和事件绑定，可以简化组件的代码和提高组件的性能，是实现高质量 Vue 组件开发的重要手段。

以下是一些代码示例：

// 在 created 钩子函数中进行数据的请求和初始化

export default {

  data() {

    return {

      user: null

    }

  },

  created() {

    this.fetchUser()

  },

  methods: {

    fetchUser() {

      // 进行数据请求和初始化

      this.user = {

        name: 'John Doe',

        age: 30

      }

    }

  }

}

// 在 created 钩子函数中进行事件的绑定

export default {

  data() {

    return {

      message: 'Hello World!'

    }

  },

  created() {

    this.handleClick = () => {

      console.log(this.message)

    }

  },

  mounted() {

    document.getElementById('btn').addEventListener('click', this.handleClick)

  }

}

在上述示例中，我们可以看到在 created 钩子函数中进行数据的请求和初始化，以及事件的绑定，从而在组件创建时就完成数据的请求和初始化，并且在组件挂载到 DOM 之后就完成事件的绑定。

第 4 章：运行阶段

在 Vue.js 中，组件的运行阶段包括以下几个钩子函数：

  1. beforeUpdate：在组件更新之前调用，此时数据已经更新，但 DOM 还未重新渲染。
  2. updated：在组件更新之后调用，此时 DOM 已经重新渲染。

在运行阶段，可以在钩子函数中进行数据监听和性能优化，以提高组件的响应速度和性能。

例如，在 beforeUpdate 钩子函数中可以进行数据的监听，从而在数据更新时及时更新组件的状态，避免出现数据不一致的情况。

同时，可以在 updated 钩子函数中进行性能优化，例如使用虚拟滚动技术来优化大量数据的渲染，或者使用防抖和节流技术来优化频繁触发的事件。

AD：专业搜索引擎

总之，在运行阶段进行数据监听和性能优化，可以提高组件的响应速度和性能，是实现高质量 Vue 组件开发的重要手段。

以下是一些代码示例：

// 在 beforeUpdate 钩子函数中进行数据的监听

export default {

  data() {

    return {

      count: 0

    }

  },

  beforeUpdate() {

    console.log(`count before update: ${this.count}`)

  },

  methods: {

    increment() {

      this.count++

    }

  }

}

// 在 updated 钩子函数中进行性能优化

export default {

  data() {

    return {

      items: []

    }

  },

  updated() {

    // 使用虚拟滚动技术来优化大量数据的渲染

    const container = document.getElementById('container')

    container.style.height = `${container.scrollHeight}px`

  },

  methods: {

    addItem() {

      this.items.push(`Item ${this.items.length}`)

    }

  }

第 5 章：销毁阶段

在 Vue.js 中，组件的销毁阶段包括以下两个生命周期钩子函数：

  1. beforeDestroy：在组件销毁之前调用。在这个阶段，组件实例仍然完全可用，这意味着所有的数据绑定、事件监听器、计算属性等都还在工作。
  2. destroyed：在组件销毁之后调用。在这个阶段，组件实例已经被销毁，所有的绑定和事件监听器都已经被移除，组件不再可用。

在销毁阶段，通常会进行资源清理和内存释放，以确保应用程序的性能和稳定性。以下是一些常见的清理操作：

  • 取消订阅：如果组件中使用了事件订阅（如使用 EventBus 或第三方库如 RxJS），应该在 beforeDestroy 钩子中取消这些订阅，以避免内存泄漏。
  • 清除定时器：如果在组件中使用了定时器（如 setInterval 或 setTimeout），应该在 beforeDestroy 钩子中清除这些定时器。
  • 解绑事件监听器：如果组件绑定了 DOM 事件监听器，应该在 beforeDestroy 钩子中解绑这些事件监听器。
  • 断开 WebSocket 连接：如果组件使用了 WebSocket 连接，应该在 beforeDestroy 钩子中断开这些连接。

以下是一个简单的示例，展示了如何在 beforeDestroy 钩子中进行资源清理：

export default {

  data() {

    return {

      timer: null

    };

  },

  created() {

    // 创建定时器

    this.timer = setInterval(() => {

      console.log('定时器运行中...');

    }, 1000);

  },

  beforeDestroy() {

    // 清除定时器

    clearInterval(this.timer);

  },

  destroyed() {

    console.log('组件已被销毁');

  }

};

在这个示例中，组件在创建时启动了一个定时器，并在销毁前清除这个定时器，以避免内存泄漏。destroyed 钩子简单地记录了组件已被销毁的信息。通过这种方式，可以确保组件在不再需要时能够正确地释放资源，从而优化应用程序的性能和内存使用。

第 6 章：异步数据加载

在 Vue.js 中，异步数据加载是常见的需求，通常通过在生命周期钩子函数中发起数据请求来实现。以下是如何使用生命周期函数进行数据请求以及在合适的时机取消请求的详细说明：

6.1 使用生命周期函数进行数据请求

通常，数据请求会在组件的生命周期钩子函数中发起，特别是 created 或 mounted 钩子。这两个钩子分别在组件实例被创建后和组件挂载到 DOM 后立即调用。

示例：在 created 钩子中发起数据请求

export default {

  data() {

    return {

      posts: []

    };

  },

  created() {

    this.fetchPosts();

  },

  methods: {

    async fetchPosts() {

      try {

        const response = await fetch('https://jsonplaceholder.typicode.com/posts');

        const data = await response.json();

        this.posts = data;

      } catch (error) {

        console.error('Error fetching posts:', error);

      }

    }

  }

};

在这个示例中，组件在创建后立即调用 fetchPosts 方法来获取数据。使用 async/await 来处理异步操作，使得代码更加清晰和易于理解。

6.2 在合适的时机取消请求

在某些情况下，可能需要在组件销毁前取消未完成的请求，以避免潜在的内存泄漏或不必要的网络请求。这通常在 beforeDestroy 钩子中完成。

示例：在 beforeDestroy 钩子中取消请求

假设使用 axios 进行数据请求，并且每个请求都有一个唯一的标识符，可以使用这个标识符来取消请求。

import axios from 'axios';

import { ref } from 'vue';

export default {

  data() {

    return {

      cancelTokenSource: ref(null),

      posts: []

    };

  },

  created() {

    this.fetchPosts();

  },

  beforeDestroy() {

    if (this.cancelTokenSource.value) {

      this.cancelTokenSource.value.cancel('组件销毁前取消请求');

    }

  },

  methods: {

    fetchPosts() {

      this.cancelTokenSource.value = axios.CancelToken.source();

      axios.get('https://jsonplaceholder.typicode.com/posts', {

        cancelToken: this.cancelTokenSource.value.token

      }).then(response => {

        this.posts = response.data;

      }).catch(thrown => {

        if (axios.isCancel(thrown)) {

          console.log(thrown.message); // 输出：组件销毁前取消请求

        } else {

          console.error('Error fetching posts:', thrown);

        }

      });

    }

  }

};

在这个示例中，使用 axios 的 CancelToken 来创建一个取消令牌，并在 beforeDestroy 钩子中使用这个令牌来取消请求。如果请求被取消，axios 会抛出一个特定的错误，可以通过 axios.isCancel 来检查这个错误。

通过这种方式，可以确保在组件不再需要数据时，不会继续进行不必要的数据请求，从而优化性能并减少资源消耗。

第 7 章：组件通信

在 Vue.js 中，组件通信是非常重要的话题，可以分为父子组件通信、兄弟组件通信和跨层级组件通信。以下是详细的说明：

7.1 父子组件通信

父子组件通信是最常见的组件通信方式，在父组件和子组件之间传递数据和事件非常简单。

父组件向子组件传递数据

可以使用 props 将数据从父组件传递到子组件。

示例：父组件向子组件传递数据

<!-- ParentComponent.vue -->

<template>

  <div>

    <child-component :title="parentTitle"></child-component>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  data() {

    return {

      parentTitle: 'Hello from parent!'

    };

  }

};

</script>

<!-- ChildComponent.vue -->

<template>

  <div>

    <h1>{{ title }}</h1>

  </div>

</template>

<script>

export default {

  props: {

    title: String

  }

};

</script>

子组件向父组件发送事件

可以使用 $emit 将事件从子组件发送到父组件。

示例：子组件向父组件发送事件

<!-- ParentComponent.vue -->

<template>

  <div>

    <child-component @child-event="handleChildEvent"></child-component>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  methods: {

    handleChildEvent(message) {

      console.log('Received message from child:', message);

    }

  }

};

</script>

<!-- ChildComponent.vue -->

<template>

  <div>

    <button @click="sendMessage">Send message to parent</button>

  </div>

</template>

<script>

export default {

  methods: {

    sendMessage() {

      this.$emit('child-event', 'Hello from child!');

    }

  }

};

</script>

7.2 兄弟组件通信

对于兄弟组件之间的通信，可以使用一个中间组件或者通过事件总线（event bus）。

使用中间组件

可以使用一个中间组件来传递数据和事件。

示例：使用中间组件

<!-- ParentComponent.vue -->

<template>

  <div>

    <first-child @first-child-event="handleFirstChildEvent"></first-child>

    <second-child :message="firstChildMessage"></second-child>

  </div>

</template>

<script>

import FirstChildComponent from './FirstChildComponent.vue';

import SecondChildComponent from './SecondChildComponent.vue';

export default {

  components: {

    FirstChildComponent,

    SecondChildComponent

  },

  data() {

    return {

      firstChildMessage: null

    };

  },

  methods: {

    handleFirstChildEvent(message) {

      this.firstChildMessage = message;

    }

  }

};

</script>

<!-- FirstChildComponent.vue -->

<template>

  <div>

    <button @click="sendMessage">Send message to second child</button>

  </div>

</template>

<script>

export default {

  methods: {

    sendMessage() {

      this.$emit('first-child-event', 'Hello from first child!');

    }

  }

};

</script>

<!-- SecondChildComponent.vue -->

<template>

  <div>

    <h1>{{ message }}</h1>

  </div>

</template>

<script>

export default {

  props: {

    message: String

  }

};

</script>

使用事件总线

可以使用一个全局事件总线来实现兄弟组件之间的通信。

示例：使用事件总线

// main.js

import Vue from 'vue';

export const EventBus = new Vue();

// FirstChildComponent.vue

<template>

  <div>

    <button @click="sendMessage">Send message to second child</button>

  </div>

</template>

<script>

import { EventBus } from './main';

export default {

  methods: {

    sendMessage() {

      EventBus.$emit('first-child-event', 'Hello from first child!');

    }

  }

};

</script>

// SecondChildComponent.vue

<template>

  <div>

    <h1>{{ message }}</h1>

  </div>

</template>

<script>

import { EventBus } from './main';

export default {

  data() {

    return {

      message: null

    };

  },

  created() {

    EventBus.$on('first-child-event', message => {

      this.message = message;

    });

  }

};

</script>

7.3 跨层级组件通信

对于跨层级组件之间的通信，可以使用 provide 和 inject 或者使用 Vuex 状态管理。

使用 provide 和 inject

可以使用 provide 和 inject 在父组件和子组件之间进行跨层级通信。

示例：使用 provide 和 inject

<!-- ParentComponent.vue -->

<template>

  <div>

    <first-child></first-child>

  </div>

</template>

<script>

import FirstChildComponent from './FirstChildComponent.vue';

import SecondChildComponent from './SecondChildComponent.vue';

export default {

  components: {

    FirstChildComponent

  },

  provide() {

    return {

      parentMessage: 'Hello from parent!'

    };

  }

};

</script>

<!-- FirstChildComponent.vue -->

<template>

  <div>

    <second-child></second-child>

  </div>

</template>

<script>

import SecondChildComponent from './SecondChildComponent.vue';

export default {

  components: {

    SecondChildComponent

  },

  inject: ['parentMessage']

};

</script>

<!-- SecondChildComponent.vue -->

<template>

  <div>

    <h1>{{ parentMessage }}</h1>

  </div>

</template>

<script>

export default {

  inject: ['parentMessage']

};

</script>

使用 Vuex

可以使用 Vuex 状态管理来实现跨层级组件通信。

示例：使用 Vuex

// store.js

import Vuex from 'vuex';

import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    message: 'Hello from Vuex!'

  },

  mutations: {

    setMessage(state, message) {

      state.message = message;

    }

  }

});

export default store;

// ParentComponent.vue

<template>

  <div>

    <first-child></first-child>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

import FirstChildComponent from './FirstChildComponent.vue';

export default {

  components: {

    FirstChildComponent

  },

  methods: {

    ...mapMutations(['setMessage'])

  },

  mounted() {

    this.setMessage('Hello from parent!');

  }

};

第 8 章：组件优化

在构建大型 Vue.js 应用时，性能和内存优化是非常重要的。以下是有关组件优化的详细说明。

8.1 性能优化

8.1.1 使用 v-if 和 v-for 时注意顺序

在使用 v-if 和 v-for 时，应该优先使用 v-if，因为 v-for 会每次都重新渲染整个列表。如果同时使用 v-if 和 v-for，v-for 应该优先放在 v-if 前面。

8.1.2 使用 key 来优化 v-for

在使用 v-for 时，应该为每个项目提供一个唯一的 key，这可以帮助 Vue.js 跟踪每个节点的身份，从而提高渲染性能。

8.1.3 使用 v-once 渲染静态内容

如果某个组件的内容在整个生命周期中都不会改变，可以使用 v-once 来渲染静态内容，以提高渲染性能。

8.1.4 使用 v-memo 缓存组件

在使用 v-for 时，可以使用 v-memo 来缓存组件，以避免重新渲染。

8.1.5 使用 v-pre 跳过编译

如果某个组件的内容不需要被 Vue.js 编译，可以使用 v-pre 来跳过编译，以提高渲染性能。

8.1.6 使用 v-cloak 隐藏未编译的Mustache标签

在使用 Mustache 标签时，可以使用 v-cloak 来隐藏未编译的 Mustache 标签，以避免闪烁。

8.2 内存优化

8.2.1 使用 v-if 和 v-for 时注意性能

在使用 v-if 和 v-for 时，应该注意它们的性能影响，避免不必要的渲染。

8.2.2 使用 v-show 渲染静态内容

在使用 v-show 时，可以渲染静态内容，而不是使用 v-if 创建和销毁节点。

8.2.3 使用 Object.freeze 冻结数据

在使用 Object.freeze 时，可以冻结数据，避免不必要的重新渲染。

8.2.4 使用 v-once 渲染静态内容

在使用 v-once 时，可以渲染静态内容，而不是每次都重新渲染节点。

8.2.5 使用 $once 监听事件

在使用 $once 时，可以监听事件，而不是使用 $on 创建永久的监听器。

8.2.6 使用 $off 取消事件监听

在使用 $off 时，可以取消事件监听，避免内存泄漏。

8.3 避免常见的陷阱

8.3.1 避免使用 Array.prototype.splice 修改数组

在使用 Array.prototype.splice 时，可能会导致 Vue.js 无法检测到变化，从而导致不必要的重新渲染。

8.3.2 避免使用 Object.assign 修改对象

在使用 Object.assign 时，可能会导致 Vue.js 无法检测到变化，从而导致不必要的重新渲染。

8.3.3 避免使用箭头函数

在使用箭头函数时，可能会导致 this 指向不正确，从而导致不必要的重新渲染。

8.3.4 避免使用 v-html 和 v-text 混合使用

在使用 v-html 和 v-text 时，可能会导致不必要的重新渲染。

8.3.5 避免使用 v-model 和 .sync 修饰符混合使用

在使用 v-model 和 .sync 修饰符时，可能会导致不必要的重新渲染。

8.3.6 避免使用 watch 监听数组

在使用 watch 时，可能会导致不必要的重新渲染。

8.3.7 避免使用 watch 监听对象

在使用 watch 时，可能会导致不必要的重新渲染。

8.3.8 避免使用 deep 选项

在使用 deep 选项时，可能会导致不必要的重新渲染。

8.3.9 避免使用 immediate 选项

在使用 immediate 选项时，可能会导致不必要的重新渲染。

8.3.10 避免使用 computed 和 watch 混合使用

在使用 computed 和 watch 时，可能会导致不必要的重新渲染。

8.3.11 避免使用 methods 和 computed 混合使用

在使用 methods 和 computed 时，可能会导致不必要的重新渲染。

8.3.12 避免使用 created 和 mounted 混合使用

在使用 created 和 mounted 时，可能会导致不必要的重新渲染。

8.3.13 避免使用 beforeDestroy 和 destroyed 混合使用

在使用 beforeDestroy 和 destroyed 时，可能会导致不必要的重新渲染。

8.3.14 避免使用 activated 和 deactivated 混合使用

在使用 activated 和 deactivated 时，可能会导致不必要的重新渲染。

8.3.15 避免使用 keep-alive 和 v-if 混合使用

在使用 keep-alive 和 v-if 时，可能会导致不必要的重新渲染。

8.3.16 避免使用 transition 和 v-if 混合使用

在使用 transition 和 v-if 时，可能会导致不必要的重新渲染。

8.3.17 避免使用 v-else 和 v-else-if 混合使用

在使用 v-else 和 v-else-if 时，可能会导致不必要的重新渲染。

8.3.18 避免使用 v-for 和 v-if 混合使用

在使用 v-for 和 v-if 时，可能会导致不必要的重新渲染。

8.3.19 避免使用 v-model 和 .sync 修饰符混合使用

在使用 v-model 和 .sync 修饰符时，可能会导致不必要的重新渲染。

8.3.20 避免使用 v-model 和 v-for 混合使用

在使用 v-model 和 v-for 时，可能会导致不必要的重新渲染。

8.3.21 避免使用 v-model 和 v-show 混合使用

在使用 v-model 和 v-show 时，可能会导致不必要的重新渲染。

8.3.22 避免使用 v-model 和 v-once 混合使用

在使用 v-model 和 v-once 时，可能会导致不必要的重新渲染。

8.3.23 避免使用 v-model 和 v-memo 混合使用

在使用 v-model 和 v-memo 时，可能会导致不必要的重新渲染。

8.3.24 避免使用 v-model 和 v-pre 混合使用

在使用 v-model 和 v-pre 时，可能会导致不必要的重新渲染。

8.3.25 避免使用 v-model 和 v-cloak 混合使用

在使用 v-model 和 v-cloak 时，可能会导致不必要的重新渲染。

8.3.26 避免使用 v-model 和 v-html 混合使用

在使用 v-model 和 v-html 时，可能会导致不必要的重新渲染。

8.3.27 避免使用 v-model 和 v-text 混合使用

在使用 v-model 和 v-text 时，可能会导致不必要的重新渲染。

8.3.28 避免使用 v-model 和 Object.freeze 混合使用

在使用 v-model 和 Object.freeze 时，可能会导致不必要的重新渲染。

8.3.29 避免使用 v-model 和 $once 混合使用

在使用 v-model 和 $once 时，可能会导致不必要的重新渲染。

8.3.30 避免使用 v-model 和 $off 混合使用

在使用 v-model 和 $off 时，可能会导致不必要的重新渲染。

8.3.31 避免使用 v-model 和 $on 混合使用

在使用 v-model 和 $on 时，可能会导致不必要的重新渲染。

8.3.32 避免使用 v-model 和 $emit 混合使用

在使用 v-model 和 $emit 时，可能会导致不必要的重新渲染。

8.3.33 避免使用 v-model 和 $refs 混合使用

在使用 v-model 和 $refs 时，可能会导致不必要的重新渲染。

8.3.34 避免使用 v-model 和 $nextTick 混合使用

在使用 v-model 和 $nextTick 时，可能会导致不必要的重新渲染。

8.3.35 避免使用 v-model 和 vm.$forceUpdate 混合使用

在使用 v-model 和 vm.$forceUpdate 时，可能会导致不必要的重新渲染。

8.3.36 避免使用 v-model 和 vm.$set 混合使用

在使用 v-model 和 vm.$set 时，可能会导致不必要的重新渲染。

8.3.37 避免使用 v-model 和 vm.$delete 混合使用

在使用 v-model 和 vm.$delete 时，可能会导致不必要的重新渲染。

8.3.38 避免使用 v-model 和 vm.$watch 混合使用

在使用 v-model 和 vm.$watch 时，可能会导致不必要的重新渲染。

8.3.39 避免使用 v-model 和 vm.$watch 深度监听混合使用

在使用 v-model 和 vm.$watch 深度监听时，可能会导致不必要的重新渲染。

8.3.40 避免使用 v-model 和 vm.$watch 立即执行混合使用

在使用 v-model 和 vm.$watch 立即执行时，可能会导致不必要的重新渲染。

8.3.41 避免使用 v-model 和 vm.$set 数组混合使用

在使用 v-model 和 vm.$set 数组时，可能会导致不必要的重新渲染。

8.3.42 避免使用 v-model 和 vm.$delete 数组混合使用

在使用 v-model 和 vm.$delete 数组时，可能会导致不必要的重新渲染。

8.3.43 避免使用 v-model 和 vm.$watch 数组混合使用

在使用 v-model 和 vm.$watch 数组时，可能会导致不必要的重新渲染。

8.3.44 避免使用 v-model 和 vm.$watch 数组深度监听混合使用

在使用 v-model 和 vm.$watch 数组深度监听时，可能会导致不必要的重新渲染。

8.3.45 避免使用 v-model 和 vm.$watch 数组立即执行混合使用

在使用 v-model 和 vm.$watch 数组立即执行时，可能会导致不必要的重新渲染。

8.3.46 避免使用 v-model 和 vm.$set 对象混合使用

在使用 v-model 和 vm.$set 对象时，可能会导致不必要的重新渲染。

8.3.47 避免使用 v-model 和 vm.$delete 对象混合使用

在使用 v-model 和 vm.$delete 对象时，可能会导致不必要的重新渲染。

8.3.48 避免使用 v-model 和 vm.$watch 对象混合使用

在使用 v-model 和 vm.$watch 对象时，可能会导致不必要的重新渲染。

Vue 组件生命周期：探索钩子的更多相关文章

  1. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  4. Axios、Vue组件-生命周期、计算属性、Slot插槽、自定义事件、v-router、钩子函数

    Axios:网络通信 <script> var vm =new vue({ el:"#app", data(){ return{ info:{ //返回的数据必须和js ...

  5. Vue的生命周期（钩子函数）

    Vue一共有10个生命周期函数,我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容. 其实在Vue的官网有一张图已经很好的诠释了生命周期,我在这里就不再多讲了,直接贴图,然后上程序代码. ...

  6. vue组件生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  7. vue组件生命周期

    分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeM ...

  8. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  9. vue 学习一 组件生命周期

    先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...

  10. vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03

    目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...

随机推荐

  1. 并发系列64章(TPL 数据流（二）)第八章

    前言 续第七章. 正文 数据流块的并行处理 数据流块在网格上本身就是并行的,为什么这么说呢? 加入有两个数据库,他们链接在一起,然后给他们post数据. 当数据流块一在运行的时候,数据流块二也在执行, ...

  2. Object类的派生-c++

    /* * @Issue: 生成一个Object抽象类 * @Author: 一届书生 * @LastEditTime: 2020-02-24 10:34:13 */ #include<iostr ...

  3. Ajax 原理是什么？如何实现？

    一.是什么 AJAX全称(Asynchronous Javascript And XML) 即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情 ...

  4. Flink Standalone集群部署

    Flink Standalone模式部署集群是最简单的一种部署方式,不依赖于其他的组件,另外还支持YARN/Mesos/Docker等模式下的部署,这里使用的flink版本为最新的稳定版1.9.1版本 ...

  5. 《Effective C#》系列之（零）——概要

    把全书的内容讲述完整可能需要很长时间,我可以先回答主要目录和核心的内容.如果您有任何特定问题或需要更详细的解释,请告诉我. <Effective C#>一书共包含50条C#编程建议,以下是 ...

  6. 【Oracle】使用like的时候遇到的问题

    [Oracle]使用like的时候遇到的问题 like语句其中的%就代表着一个零或者多个字符,_代表一个字符,%与_可以同时使用 name想查询以'_'结尾的字符 用这个语句就会有问题 select ...

  7. 力扣618(MySQL)-学生地理信息报告（困难）

    题目: 一所美国大学有来自亚洲.欧洲和美洲的学生,他们的地理信息存放在如下 student 表中 该表没有主键.它可能包含重复的行.该表的每一行表示学生的名字和他们来自的大陆. 一所学校有来自亚洲.欧 ...

  8. 干货｜一文读懂阿里云数据库Autoscaling是如何工作的

    简介: 阿里云数据库实现了其特有的Autosaling能力,该能力由数据库内核.管控及DAS(数据库自治服务)团队共同构建,内核及管控团队提供了数据库Autoscaling的基础能力,DAS则负责性能 ...

  9. 云原生消息、事件、流超融合平台——RocketMQ 5.0 初探

    简介: 今天分享的主题是云原生消息事件流超融合平台 RocketMQ 5.0 初探,内容主要分为三个部分: 首先,带大家回顾业务消息领域首选 RocketMQ 4 发展历史以及 4.x 版本的演进与发 ...

  10. [FAQ] wechaty 与 wechaty-puppet-padplus 生态安全吗

    答案是肯定有风险. 非技术角度讲,使用这种方式登录微信存在被微信官方风控的可能性,需要特别注意. 另外,以下是 wechaty 项目说明文件中截取的内容: 我们可以看到,除了微信官方方面的风险,我们的 ...