vue生命周期小结

1、Vue组件的生命周期钩子函数
Vue.js 是一款流行的前端 JavaScript 框架，它的组件有一套完整的生命周期函数，在组件从创建到销毁的过程中，每个生命周期都会触发一些回调函数，这些生命周期的回调函数可以让开发者在特定的时机进行一些操作，例如初始化数据、监听事件、执行异步请求、操作 DOM 等。
下面是 Vue.js 组件的生命周期函数：
beforeCreate：在实例创建之前被调用，此时组件的 data、props 等数据都未初始化。

created：在实例创建后被调用，此时组件的 data、props、computed 等数据已经初始化完成，但 DOM 元素尚未生成。

beforeMount：在组件挂载到 DOM 元素之前被调用。

mounted：在组件挂载到 DOM 元素后被调用。此时组件已经生成了对应的 DOM 结构，可以对 DOM 进行操作。

beforeUpdate：在组件更新之前被调用。在此函数中，可以对更新前后的数据进行比较，决定是否需要更新组件。

updated：在组件更新完成后被调用。此时组件已经更新了对应的 DOM 结构，可以进行一些状态的更新。

beforeDestroy：在组件销毁之前被调用。可以在此函数中进行一些清理工作，例如取消定时器、解绑事件等。

destroyed：在组件销毁之后被调用。此时组件已经被彻底销毁，可以进行一些垃圾回收等工作。

除了上述生命周期函数，Vue.js 还提供了一些全局的生命周期函数，例如 beforeCreate、created、beforeMount、mounted 等，这些生命周期函数的作用与组件的生命周期函数类似，只是它们是针对整个 Vue.js 应用的。
以中兴云嵌入的配置中心购买页面为例，讲解Vue中的computed、watch、mounted和methods
computed选项用于定义计算属性，它是响应式的，当依赖的数据发生变化时，会自动重新计算并更新视图。适用于复杂的逻辑计算，例如根据输入的数据计算出某个结果。
watch选项用于监听数据的变化，当被监听的数据发生变化时，会触发回调函数。适用于对数据变化做出特定响应，例如在数据变化时发送网络请求或处理数据。

购买时长Select选择器处设置默认5年的购买时长，云厂商、地域和可用区要求默认选中Radio单选框的第一个选项，这些都需要对相关字段进行监听，在接口返回结果赋值后，将值的变化反馈到视图上、
mounted选项用于在组件挂载到DOM后执行一些操作，例如发送网络请求或初始化一些数据。适用于需要在组件挂载后执行一些操作的场景。

methods选项用于定义方法，它可以在模板中被调用。适用于在模板中触发某些行为，例如点击按钮时触发某个行为。

2、Promise对象
在 JavaScript 中，Promise 是一种用于异步编程的技术，它可以让我们更方便地处理异步操作的结果，并避免回调地域的问题。

上面的代码中，validateAppId函数返回一个 Promise 对象，它会发送一个网络请求并返回响应数据。当这个 Promise 被解决时，它会传递一个包含响应数据的值。如果发生错误，则会传递一个包含错误信息的原因。
3、深度样式

/deep/ 是一种 CSS 伪类选择器，可以用于设置深度样式。
在 Vue.js 中，组件的样式通常是由组件自身的样式和父组件的样式共同决定的。有时，我们希望在子组件中设置样式时可以覆盖父组件的样式，这时就可以使用 /deep/ 伪类选择器来设置深度样式。
/deep/ 伪类选择器可以让样式规则穿透到子组件中，从而实现深度样式的设置。例如：

/* 在组件中设置深度样式 */
.my-component /deep/ .child {
  color: red;
}

上面的代码中，.my-component 是组件的类名，.child 是子组件的类名。使用 /deep/ 伪类选择器可以让组件中的样式规则穿透到子组件中，并设置 .child 元素的颜色为红色。
需要注意的是，/deep/ 伪类选择器在 Vue.js 3.x 中已经被废弃，取而代之的是 ::v-deep 伪类选择器。使用 ::v-deep 伪类选择器的方式与使用 /deep/ 相同，例如：

/* 在组件中设置深度样式 */
.my-component ::v-deep .child {
  color: red;
}

总之，/deep/ 伪类选择器可以用于设置深度样式，它可以让样式规则穿透到子组件中。在 Vue.js 3.x 中，可以使用 ::v-deep 伪类选择器来实现相同的效果。