系列文章目录

Vue.js基础简答题

---

---

前言

Vue.js 生命周期指的是Vue实例的生命周期；
Vue实例的生命周期，指的是实例从创建到运行、再到销毁的过程。
通过设置生命周期函数，可以在生命周期的特定阶段执行功能。
生命周期函数也称生命周期钩子。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建阶段

特点：每个实例只能执行一次。

1.beforeCreate

beforeCreate 是 Vue 实例创建之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用的生命周期钩子函数。在这个阶段，实例的数据观测尚未开始，所以如果需要在此阶段进行数据观测，需要手动触发 $watch。

new Vue({el: '#app',data: {message: 'Hello Vue!'},beforeCreate: function() {this.$watch('message', function(newVal, oldVal) {console.log('message changed from', oldVal, 'to', newVal);});}
});

2.created

created 是 Vue 实例创建完成后被立即调用的生命周期钩子函数。在这个阶段，实例已经完成了数据观测 (data observer),事件配置等工作，因此可以放心地对 DOM 进行操作。通常在这个阶段进行一些初始化操作，如获取数据、设置事件监听等。

new Vue({el: '#app',data: {message: 'Hello Vue!'},created: function() {console.log('Vue instance created');}
});

3.beforeMount

beforeMount 是挂载阶段之前被调用的生命周期钩子函数。在这个阶段，模板编译完成，但是还没有将虚拟 DOM 渲染到真实 DOM。这个阶段可以用来执行一些与 DOM 直接相关的操作，如修改 CSS、添加事件监听器等。需要注意的是，如果在这个阶段进行了 DOM 操作，可能会导致性能问题。因此，建议使用 Vue.js 提供的指令和计算属性来处理数据绑定和 DOM 操作。

new Vue({el: '#app',data: {message: 'Hello Vue!'},beforeMount: function() {// 在挂载前修改样式、添加事件监听器等操作}
});

4.mounted

mounted 是挂载阶段结束后被调用的生命周期钩子函数。在这个阶段，实例已经成功挂载到 DOM,可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。

new Vue({el: '#app',data: {message: 'Hello Vue!'},mounted: function() {// 在挂载后修改样式、访问 DOM、发送网络请求等操作$.get('https://api.example.com/data').then(function(data) {Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题}
});

二、运行阶段

特点：按需调用。

1.beforeUpdate

beforeUpdate 是数据更新时触发的生命周期钩子函数。在这个阶段，实例的数据仍然保持不变，因此可以放心地进行数据处理和计算属性的更新。如果在这个阶段进行了不必要的操作，可能会导致性能问题。建议使用计算属性来处理数据更新。

new Vue({el: '#app',data: {_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突},computed: {message: function() { return this._message; } // 将 _message 通过计算属性暴露给模板使用},beforeUpdate: function() {} // 在数据更新前执行的操作，例如更新计算属性等
});

2.updated

updated 是数据更新后触发的生命周期钩子函数。在这个阶段，实例的数据已经被更新，可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。

new Vue({el: '#app',data: {_message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突},computed: {message: function() { return this._message; } // 将 _message 通过计算属性暴露给模板使用},methods: {fetchData: function() {$.get('https://api.example.com/data').then(function(data) {Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message}.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题}},updated: function() {} // 在数据更新后执行的操作，例如调用方法等
});

三、销毁阶段

特点：每个实例只能执行一次。

1.beforeDestroy

beforeDestroy 是组件销毁之前被调用的生命周期钩子函数。在这个阶段，实例仍然可以访问 DOM 和进行 DOM API 操作，但已经被标记为即将卸载。如果需要在组件销毁前进行一些清理操作，可以在这个阶段进行。

new Vue({el: '#app',data: {},methods: {},beforeDestroy: function() {// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等},beforeUnmount: function() {} // 在组件卸载前执行的操作，例如移除事件监听器等
});

2.destroyed

destroyed 是组件销毁后被调用的生命周期钩子函数。在这个阶段，实例已经从 DOM 中移除，所有与 DOM 相关的操作都不再有效。通常在这个阶段进行一些资源释放、清除定时器等操作。

new Vue({el: '#app',data: {},methods: {},beforeDestroy: function() {// 在组件销毁前执行的操作，例如清除定时器、解除事件监听等},destroyed: function() {} // 在组件销毁后执行的操作，例如关闭弹窗、清除定时器等
});

---

总结

Vue.js 是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，易于与其他库或已有项目集成。在 Vue.js 中，我们可以通过定义生命周期钩子函数来监听和操作 DOM 元素的变化，从而实现数据的双向绑定、组件化等功能。