随笔- 37 文章- 0 评论- 0 阅读- 21497

4.【测试平台开发】Vue生命周期钩子和侦听器学习教程2024-12-01

5.【测试平台开发】一步步教你vue-cli创建项目学习教程2024-12-02

Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它以其简洁的API和高效的响应式系统而广受欢迎。对于Vue.js开发者来说，理解侦听器和生命周期钩子是至关重要的。本文将详细介绍Vue.js中的侦听器和生命周期钩子，并通过示例代码帮助小白快速上手。

一、生命周期钩子

Vue组件实例在创建和销毁过程中会经历一系列的生命周期钩子。这些钩子允许开发者在组件的不同阶段插入自己的代码。

1.beforeCreate

实例初始化之前，此时无法访问数据、计算属性或方法。

示例：
beforeCreate() {
  console.log('实例初始化之前');
}

2.created

实例初始化完成，此时可以访问数据模型（data）、计算属性（computed）和方法（methods）。

示例：
created() {
  console.log('实例初始化完成');
  // 可以在这里发送异步请求
}

3.beforeMount

实例挂载之前，此时模板已经在内存中编译完成，但尚未挂载到DOM。

示例：
beforeMount() {
  console.log('实例挂载之前');
}

4.mounted

实例挂载完成，此时可以访问DOM元素。

示例：
mounted() {
  console.log('实例挂载完成');
  // 可以在这里渲染图表或发送异步请求
}

5.beforeUpdate

响应式数据更新前，此时数据已经更新，但DOM尚未重新渲染。

示例：
beforeUpdate() {
  console.log('实例更新前');
}

6.updated

响应式数据更新后，此时DOM已经重新渲染。

示例：
updated() {
  console.log('实例更新后');
}

7.beforeDestroy

实例销毁之前，此时仍然可以修改响应式数据。

示例：
beforeDestroy() {
  console.log('实例销毁之前');
}

8.destroyed

实例销毁完成，此时已经销毁了监听器、子组件和事件监听。

示例：
destroyed() {
  console.log('实例销毁完成');
}

二、侦听器（Watchers）

1.侦听器允许开发者在响应式数据变化时执行特定的逻辑。Vue提供了两种方式来使用侦听器：watch选项和$watch方法。

基本示例
export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)'
    };
  },
  watch: {
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer();
      }
    }
  },
  methods: {
    async getAnswer() {
      this.answer = 'Thinking...';
      try {
        const res = await fetch('https://yesno.wtf/api');
        this.answer = (await res.json()).answer;
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error;
      }
    }
  }
}

在这个示例中，当question数据变化时，如果包含问号，则调用getAnswer方法。

2.深层侦听器

默认情况下，watch是浅层的，即只有被侦听的属性本身变化时才会触发回调。如果想侦听嵌套对象的所有变更，需要使用deep: true选项。

export default {
  data() {
    return {
      someObject: {
        nested: {
          key: 'value'
        }
      }
    };
  },
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // 处理嵌套对象的变更
      },
      deep: true
    }
  }
}

3.即时回调

默认情况下，watch是懒执行的，即只有在数据源变化时才会执行回调。如果想在创建侦听器时立即执行一次回调，可以使用immediate: true选项。

export default {
  data() {
    return {
      question: ''
    };
  },
  watch: {
    question: {
      handler(newQuestion) {
        // 在组件实例创建时会立即调用
      },
      immediate: true
    }
  }
}

4.使用$watch方法

$watch方法允许在组件实例创建后动态添加侦听器。

export default {
  data() {
    return {
      question: ''
    };
  },
  created() {
    this.$watch('question', (newQuestion) => {
      // 处理question的变化
    });
  }
}