一文读懂Vue生命周期（Vue2）

一文读懂Vue生命周期（Vue2）

目录

    • 一文读懂Vue生命周期（Vue2）
      • 1 前言
      • 2 Vue生命周期
        • 2.1 基本生命周期
          • 2.1.1 8个生命周期
          • 2.1.2 案例
        • 2.2 组件生命周期
          • 2.2.1 父子生命周期
          • 2.2.2 案例
        • 2.3 keep-alive生命周期
          • 2.3.1 案例
        • 2.4 其他
      • 3 总结

vue生命周期详解，vue更新生命周期，keepalive生命周期，

1 前言

对于一个Vue开发者而言，学习Vue生命周期是必不可少的内容，事实上学习Vue生命周期对于开发高质量的Vue应用至关重要。在初级阶段，需要学习基本组件的生命周期，以了解页面的加载逻辑。而在Vue工程化阶段，就必须要对Vue生命周期有更深的了解。这对以下几个方面来说是基础：

  1. 理解组件行为：通过了解Vue的生命周期，你可以更深入地理解Vue组件是如何创建、更新和销毁的。这有助于你预测组件在不同阶段的行为，并避免潜在的问题。
  2. 优化性能：在生命周期的不同阶段，你可以执行特定的操作来优化应用的性能。例如，在created阶段，你可以进行数据的初始化或发送网络请求，以避免在模板渲染时产生不必要的延迟。在beforeDestroy阶段，你可以清除定时器、解绑全局事件或销毁子组件，以防止内存泄漏。
  3. 更好的状态管理：Vue的生命周期允许你在组件的不同状态下执行特定的逻辑。例如，在updated阶段，你可以检查数据的变化并据此更新DOM或触发其他操作。这有助于你更好地管理组件的状态和响应数据的变化。

2 Vue生命周期

学习Vue生命周期是从简单到复杂的循序渐进过程，以下我们把其拆解成三个部分：

  1. 基本生命周期：单个Vue实例的生命周期；
  2. 组件生命周期：添加子组件时加载的生命周期；
  3. keep-alive生命周期：当使用keep-alive包裹组件时，该组件的生命周期；
2.1 基本生命周期
2.1.1 8个生命周期

Vue2基本生命周期钩子函数有11个，主要的生命周期有8个；主要的8个生命周期如下：

  1. beforeCreate（创建前）：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  2. created（创建后）：在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，以及 watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  3. beforeMount（挂载前）：在挂载开始之前被调用：相关的 render 函数首次被调用。此时模板编译已经完成但是还未挂载到页面上。
  4. mounted（挂载后）：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个in−document元素，当mounted被调用时vm.el 也在文档内。此时可以访问到 $el 属性，也可以操作 DOM 和通过 AJAX 获取数据。
  5. beforeUpdate（更新前）：数据更新时调用，发生在虚拟DOM打补丁之前。可以在这个钩子中访问现有的DOM，比如手动移除已添加的事件监听器。
  6. updated（更新后）：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
  7. beforeDestroy（销毁前）：实例销毁之前调用。在这一步中，实例仍然完全可用。
  8. destroyed（销毁后）：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器都会被移除，所有的子实例也会被销毁。

官网对8个生命周期图解如下：

生命周期

2.1.2 案例

仅仅学习理论是不够的，我们来通过案例来看各个生命周期实际执行顺序和各个生命周期能访问得到的内容：

执行顺序：

直接上最简单的能触发所有生命周期代码：

<template>
  <div>
    <title ref="myPage">生命周期</title>
    <div>参数：{{ parama }}</div>
    <el-button @click="updateParama">更新数据</el-button>
    <el-button @click="leavePage">离开页面</el-button>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);

export default {
  beforeCreate() {
    console.log("页面加载：beforeCreate");
  },
  created() {
    console.log("页面加载：created");
  },
  beforeMount() {
    console.log("页面加载：beforeMount");
  },
  mounted() {
    console.log("页面加载：mounted");
  },
  beforeUpdate() {
    console.log("页面更新:beforeUpdate");
  },
  updated() {
    console.log("页面更新：updated");
  },
  beforeDestroy() {
    console.log("页面销毁：beforeDestroy");
  },
  destroyed() {
    console.log("页面销毁：destroyed");
  },
  data() {
    return {
      parama: 0
    };
  },
  methods: {
    leavePage() {
      this.$router.push({ path: "/home" });
    },
    updateParama() {
      this.parama++;
    }
  }
};
</script>

页面效果如下：

在这里插入图片描述

当进入该页面时，触发前四个生命周期，执行顺序如控制台打印：

页面加载：beforeCreate
页面加载：created
页面加载：beforeMount
页面加载：mounted

当点击"更新数据"按钮时，依次触发beforeUpdate，updated；控制台打印：

页面更新:beforeUpdate
页面更新:updated

当点击“离开页面”按钮时，依次触发beforeDestroy，destroyed；控制台打印：

页面销毁：beforeDestroy
页面销毁：destroyed

大家可以复制代码自己试一下；

访问数据

再来看各个生命周期页面数据的访问情况，我们在每个生命周期都打印一下数据，代码如下：

beforeCreate() {
    console.log("页面加载：beforeCreate");
    console.log(this.parama);
  },
  created() {
    console.log("页面加载：created");
    console.log(this.parama);
  },
  beforeMount() {
    console.log("页面加载：beforeMount");
    console.log(this.parama);
  },
  mounted() {
    console.log("页面加载：mounted");
    console.log(this.parama);
  },
  beforeUpdate() {
    console.log("页面更新:beforeUpdate");
    console.log(this.parama);
  },
  updated() {
    console.log("页面更新：updated");
    console.log(this.parama);
  },
  beforeDestroy() {
    console.log("页面销毁：beforeDestroy");
    console.log(this.parama);
  },
  destroyed() {
    console.log("页面销毁：destroyed");
    console.log(this.parama);
  },

首先是页面加载时，控制台打印如下：

页面加载：beforeCreate
parama undefined

页面加载：created
parama 0

页面加载：beforeMount
parama 0

页面加载：mounted
parama 0

我们可以看到beforeCreate时是访问不到数据的，因为属性还未初始化；其他生命周期都能正常访问到数据。

我们再来看一下数据更新，点击“更新数据按钮”，控制台打印如下：

页面更新:beforeUpdate
parama 1

页面更新：updated
parama 1

我们可以看到两个更新的生命周期打印的数据相同，这里要注意的是，数据更新与生命周期触发的顺序是：

parama变成1 -> beforeUpdate -> updated

到这里大家都能明白生命周期顺序与数据访问之间的关系了。

2.2 组件生命周期
2.2.1 父子生命周期

当页面没有引入子组件时，如果没有做过异步处理，页面生命周期将会顺序执行，当引入子组件之后，父组件生命周期+子组件生命周期会交叉执行，具体执行顺序如下：

  • 页面加载：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 数据更新：当父子不涉及传参时，父子数据更新单独触发，不会相互影响；当父子涉及传参时：父beforeUpdate ->子beforeUpdate ->子updated->父updated
  • 组件销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
2.2.2 案例

我们看一下案例的完整代码，将上面的案例添加子组件代码，并将父组件的参数传给子组件，子组件参数传给父组件，页面如下：

在这里插入图片描述

父页面：

<template>
  <div>
    <title ref="myPage">生命周期</title>
    <div>父页面：</div>
    <div>参数：{{ parama }}</div>
    <div>子参数：{{ childData }}</div>
    <el-button @click="updateParama">更新父数据</el-button>
    <el-button @click="leavePage">离开页面</el-button>
    <child :param="parama" @childData="getChildData"></child>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
import child from "./conponents/child";
Vue.use(Button);

export default {
  beforeCreate() {
    console.log("页面加载：beforeCreate");
    console.log("parama", this.parama);
  },
  created() {
    // await setTimeout({}, 1000);
    console.log("页面加载：created");
    console.log("parama", this.parama);
  },
  beforeMount() {
    console.log("页面加载：beforeMount");
    console.log("parama", this.parama);
  },
  mounted() {
    console.log("页面加载：mounted");
    console.log("parama", this.parama);
  },
  beforeUpdate() {
    console.log("页面更新:beforeUpdate");
    console.log("parama", this.parama);
  },
  updated() {
    console.log("页面更新：updated");
    console.log("parama", this.parama);
  },
  beforeDestroy() {
    console.log("页面销毁：beforeDestroy");
    console.log("parama", this.parama);
  },
  destroyed() {
    console.log("页面销毁：destroyed");
    console.log("parama", this.parama);
  },
  components: {
    child
  },
  data() {
    return {
      parama: 0,
      childData: 0
    };
  },
  methods: {
    leavePage() {
      this.$router.push({ path: "/home" });
    },
    updateParama() {
      this.parama++;
    },
    getChildData(a) {
      this.childData = a;
    }
  }
};
</script>

子组件：

<template>
  <div class="child">
    <title>子组件</title>
    <div>子组件：</div>
    <div>参数：{{ paramaChild }}</div>
    <div>父传参：{{ param }}</div>
    <el-button @click="updateParama">更新子页面数据</el-button>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);

export default {
  beforeCreate() {
    console.log("子页面加载：beforeCreate");
    console.log("paramaChild", this.paramaChild);
  },
  created() {
    // await setTimeout({}, 1000);
    console.log("子页面加载：created");
    console.log("paramaChild", this.paramaChild);
  },
  beforeMount() {
    console.log("子页面加载：beforeMount");
    console.log("paramaChild", this.paramaChild);
  },
  mounted() {
    console.log("子页面加载：mounted");
    console.log("paramaChild", this.paramaChild);
  },
  beforeUpdate() {
    console.log("子页面更新:beforeUpdate");
    console.log("paramaChild", this.paramaChild);
  },
  updated() {
    console.log("子页面更新：updated");
    console.log("paramaChild", this.paramaChild);
  },
  beforeDestroy() {
    console.log("子页面销毁：beforeDestroy");
    console.log("paramaChild", this.paramaChild);
  },
  destroyed() {
    console.log("子页面销毁：destroyed");
    console.log("paramaChild", this.paramaChild);
  },
  props: {
    param: Number
  },
  data() {
    return {
      paramaChild: 0
    };
  },
  methods: {
    updateParama() {
      this.paramaChild++;
      this.$emit("childData", this.paramaChild);
    }
  }
};
</script>
<style>
.child {
  margin: 20px;
  border: 1px solid gray;
}
</style>
  • 页面加载

页面加载时，父子生命周期：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

控制台日志如下：

页面加载：beforeCreate
parama undefined
页面加载：created
parama 0
页面加载：beforeMount
parama 0
子页面加载：beforeCreate
undefined
子页面加载：created
paramaChild 0
子页面加载：beforeMount
paramaChild 0
子页面加载：mounted
paramaChild 0
页面加载：mounted
parama 0
  • 页面更新

页面更新的情况分两类；

一类是父子组件不涉及传参，这种情况下，父页面参数更新不会触发子组件更新的生命周期，子组件的数据更新也不会触发父页面的生命周期。

第二类是父子组件涉及传参，不管是父传子还是子传父，父子生命周期相同，都为：父beforeUpdate ->子beforeUpdate ->子updated->父updated。

在以上父子相互传参案例下，我们点击父页面按钮：更新父数据；以及点击子组件按钮：更新子页面数据；控制台打印顺序都如下：

页面更新:beforeUpdate
子页面更新:beforeUpdate
子页面更新：updated
页面更新：updated
  • 页面销毁

页面销毁

点击”离开页面“按钮：控制台打印顺序如下：

页面销毁：beforeDestroy
子页面销毁：beforeDestroy
子页面销毁：destroyed
页面销毁：destroyed
2.3 keep-alive生命周期

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。被缓存的实例普通Vue实例相比，多了activated和deactivated两个生命周期。

  • activated：被 keep-alive 缓存的组件激活时调用。
  • deactivated：被 keep-alive 缓存的组件失活时调用。

光这两个生命周期来讲，就是组件激活和失活的时候调用，但直到这个是不够的，这两个生命周期与其他八个生命周期顺序是什么样子的呢，我们先说结论：（子组件被keep-alive包裹）

  • 页面加载：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->子activated（当子组件初次加载即可见时）->父mounted
  • 数据更新导致组件失活：父beforeUpdate ->子deactivated->父updated
  • 父页面销毁：父beforeDestroy->子deactivated（如果销毁前子组件是激活状态）->子beforeDestroy->子destroyed->父destroyed

我们结合案例来看实际情况；

2.3.1 案例

我们在案列中添加了一个组件来用于子组件的切换，并在子组件中添加activated和deactivated两个生命周期的监听函数，添加的代码如下：

父页面：

<template>
  <div>
    <title ref="myPage">生命周期</title>
    <div>父页面：</div>
    <div>参数：{{ parama }}</div>
    <div>子参数：{{ childData }}</div>
    <el-button @click="changeActiveCom">更换组件</el-button>
    <el-button @click="leavePage">离开页面</el-button>
    <keep-alive>
      <component :is="activeComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
import child from "./conponents/child";
import comA from "./conponents/comA";
Vue.use(Button);

export default {
  beforeCreate() {
    console.log("页面加载：beforeCreate");
    console.log("parama", this.parama);
  },
  created() {
    // await setTimeout({}, 1000);
    console.log("页面加载：created");
    console.log("parama", this.parama);
  },
  beforeMount() {
    console.log("页面加载：beforeMount");
    console.log("parama", this.parama);
  },
  mounted() {
    console.log("页面加载：mounted");
    console.log("parama", this.parama);
  },
  beforeUpdate() {
    console.log("页面更新:beforeUpdate");
    console.log("parama", this.parama);
  },
  updated() {
    console.log("页面更新：updated");
    console.log("parama", this.parama);
  },
  beforeDestroy() {
    console.log("页面销毁：beforeDestroy");
    console.log("parama", this.parama);
  },
  destroyed() {
    console.log("页面销毁：destroyed");
    console.log("parama", this.parama);
  },
  components: {
    child,
    comA
  },
  data() {
    return {
      parama: 0,
      childData: 0,
      activeComponent: "child"
    };
  },
  methods: {
    leavePage() {
      this.$router.push({ path: "/home" });
    },
    updateParama() {
      this.parama++;
    },
    getChildData(a) {
      this.childData = a;
    },
    changeActiveCom() {
      this.activeComponent = this.activeComponent == "comA" ? "child" : "comA";
    }
  }
};
</script>

子组件child：

  activated() {
    console.log("child组件激活：activated");
  },
  deactivated() {
    console.log("child组件失活：deactivated");
  },

页面效果：

在这里插入图片描述

点击**更换组件**按钮实现组件切换功能，用于触发activated和deactivated两个生命周期，

  • 页面加载

页面加载时打印结果如下：

页面加载：beforeCreate
页面加载：created
页面加载：beforeMount
子页面加载：beforeCreate
子页面加载：created
子页面加载：beforeMount
子页面加载：mounted
child组件激活：activated
页面加载：mounted
  • 页面更新

点击更换组件按钮其实就进行了data数据更新操作，如果组件进入不可见状态，此时控制台打印日志如下：

页面更新:beforeUpdate
child组件失活：deactivated
页面更新：updated

如果组件进入可见状态，控制台打印如下：

页面更新:beforeUpdate
child组件失活：activated
页面更新：updated
  • 页面销毁

点击离开页面按钮，父页面销毁，此时子组件页销毁，若是此时子组件处于激活状态，那么控制台打印如下：

页面销毁：beforeDestroy
child组件失活：deactivated
子页面销毁：beforeDestroy
子页面销毁：destroyed
页面销毁：destroyed

大家可以进行案例尝试；

2.4 其他

生命周期不是一成不变的，当生命周期执行异步操作时，生命周期的结束时间顺序就可能发生变化；如下我们在父组件created执行异步操作：

  async created() {
    await setTimeout({}, 1000);
    console.log("页面加载：created");
  },

此时控制台打印日志如下

页面加载：beforeCreate
页面加载：beforeMount
页面加载：mounted
页面加载：created

我们可以看到，created是最后执行完的；由此，要注意异步操作的生命周期变化。

若是我们在相应生命周期做了异步操作，并返回相应的值，在后续生命周期可能会出现无法渠道返回值的情况，这也是实际生产开发容易出问题的点。特别是生产情况客户手机网络较慢的情况下。

3 总结

掌握 Vue.js 的生命周期非常重要，因为它允许你在组件的不同阶段执行自定义的代码，从而实现对组件行为的精细控制和管理。但同时也有一些注意事项，以下也是一些注意事项：

  1. 避免在 render 函数中直接修改数据： 在 render 函数中修改数据可能会导致不可预料的结果，因为 render 函数是用来生成虚拟 DOM 的，应该是一个纯函数。如果需要在渲染过程中修改数据，应该使用 computed 属性或者 watch 监听器。
  2. 谨慎使用异步操作： 在生命周期钩子函数中进行异步操作时，一定要注意异步操作完成的时机和影响。尤其是在 created 钩子中，当组件实例已经创建但是 DOM 还未挂载时，执行异步操作可能会导致一些问题。最好的做法是在 mounted 钩子中执行异步操作。
  3. 避免频繁使用 beforeUpdate 和 updated： 虽然 beforeUpdate 和 updated 钩子提供了在组件更新时执行逻辑的机会，但频繁使用这些钩子可能会导致性能问题。应该仔细考虑哪些逻辑需要在组件更新时执行，以避免不必要的性能开销。
  4. 合理利用 activated 和 deactivated 钩子： 当使用 <keep-alive> 组件缓存组件时，activated 和 deactivated 钩子会被调用。在这些钩子中，你可以执行一些与组件缓存和恢复相关的逻辑，比如重置组件状态或重新加载数据。
  5. 在 beforeDestroy 进行清理： 在 beforeDestroy 钩子中，你可以执行一些清理工作，比如清除定时器、取消订阅、解绑事件等。这样可以确保在组件销毁前进行必要的资源释放，避免内存泄漏和其他问题。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/596440.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

快速入门！学习鸿蒙App开发的终极指南！

快速入门！学习鸿蒙App开发的终极指南！

鸿蒙&#xff08;HarmonyOS&#xff09;是华为推出的一款分布式操作系统&#xff0c;旨在为不同设备提供统一的操作体验。鸿蒙App开发可以让应用程序在多个设备上实现流畅运行。本文将介绍鸿蒙App开发的终极指南&#xff0c;帮助您快速入门。 开发环境搭建 鸿蒙App开发过程需要…
阅读更多...
VS Code 远程连接 SSH 服务器

VS Code 远程连接 SSH 服务器

文章目录 一、安装 Remote - SSH 扩展并连接远程主机二、免密连接远程主机1. 生成 SSH 密钥对2. 将公钥复制到远程服务器3. 配置 SSH 客服端4. 连接测试 随着技术的不断迭代更新&#xff0c;在 Linux 系统中使用 Vim、nano 等基于 Shell 终端的编辑器&#xff08;我曾经也是个 …
阅读更多...
VueComponent构造函数

VueComponent构造函数

//创建school组件——注册给谁 在谁的结构上写const school Vue.extend({name: school,//开发者工具的显示template: <div><h2>学校名称&#xff1a;{{schoolName}}</h2><h2>学校地址&#xff1a;{{adress}}</h2> </div>,//结构data() {…
阅读更多...
好用的win10电脑桌面便利贴,桌面便签小工具

好用的win10电脑桌面便利贴,桌面便签小工具

在日常办公中&#xff0c;我们经常需要记录重要事项、提醒任务或者临时想法。这时&#xff0c;一款好用的电脑桌面便签或便利贴小工具就显得尤为重要。它们能够帮助我们高效地管理信息&#xff0c;提升工作效率。 那么好用的win10电脑桌面便利贴是哪个呢&#xff1f;电脑桌面便…
阅读更多...
算法学习：二分查找

算法学习：二分查找

&#x1f525; 引言 在现代计算机科学与软件工程的实践中&#xff0c;高效数据检索是众多应用程序的核心需求之一。二分查找算法&#xff0c;作为解决有序序列查询问题的高效策略&#xff0c;凭借其对数时间复杂度的优越性能&#xff0c;占据着算法领域里举足轻重的地位。本篇内…
阅读更多...
It‘s possible that the file was already in use (by a text editor or antivirus)

It‘s possible that the file was already in use (by a text editor or antivirus)

方法一 删除用户下的.npmrc文件&#xff0c;即不改变全局安装的路径&#xff08;不够好&#xff0c;本质问题仍没有解决&#xff0c;全局还是会安装在C盘&#xff09; 每次都用管理员身份运行命令行&#xff08;不够方便&#xff0c;vscode 下的命令行默认也不是管理员身份运行…
阅读更多...
linux通过使用bash脚本同时运行多个命令

linux通过使用bash脚本同时运行多个命令

1、使用&&或||或;&#xff08;根据需要选择连接符号&#xff09;等来连接多条命令 && -> "与"&#xff0c;一条命令执行出错&#xff0c;则后面命令不执行 || -> "或"&#xff0c;一条命令执行成功&#x…
阅读更多...
python安装问题及解决办法（pip不是内部或外部命令也不是可运行）

python安装问题及解决办法（pip不是内部或外部命令也不是可运行）

pip是python的包管理工具&#xff0c;使python可在cmd&#xff08;命令行窗口&#xff0c;WinR后输入cmd&#xff09;中执行 针对 “pip不是内部或外部命令也不是可运行” 问题&#xff0c;需要在安装的时候将python添加到环境变量中 上图第三个选项必须勾选才能在cmd中使用pi…
阅读更多...
BigDecimal：踩坑

BigDecimal：踩坑

问题描述 两个BigDecimal相除, 抛了异常 原因分析&#xff1a; Java 中使用 BigDecimal 做除法运算的时候&#xff0c;值有可能是无限循环的小数&#xff0c;结果是无限循环的小数&#xff0c;就会抛出上面这个异常。 来看看源码&#xff1a; public BigDecimal divide(BigD…
阅读更多...
C++11，{}初始化，initializer_list，decltype，右值引用，类和对象的补充

C++11，{}初始化，initializer_list，decltype，右值引用，类和对象的补充

c98是C标准委员会成立第一年的C标准&#xff0c;C的第一次更新是C03&#xff0c;但由于C03基本上是对C98缺陷的修正&#xff0c;所以一般把C98与C03合并起来&#xff0c;叫做C98/03&#xff1b; 后来原本C委员会更新的速度预计是5年更新一次&#xff0c;但由于C标准委员会的进…
阅读更多...
SOLIDWORKS Electrical电气智能零部件的运用

SOLIDWORKS Electrical电气智能零部件的运用

电气2D向电气3D转型&#xff0c;3D模型无疑是重中之重&#xff0c;精准、正确的3D模型有利于电线长度、空间大小、耗材的计算。而线槽、导轨因为要根据实际情况裁剪&#xff0c;所以即使同一规格的线槽、导轨&#xff0c;在装配时也得根据实际情况&#xff0c;修改长度&#xf…
阅读更多...
AAA、RADIUS、TACACS、Diameter协议介绍

AAA、RADIUS、TACACS、Diameter协议介绍

准备软考高级时碰到的一个概念&#xff0c;于是搜集网络资源整理得出此文。 概述 AAA是Authentication、Authorization、Accounting的缩写简称&#xff0c;即认证、授权、记帐。Cisco开发的一个提供网络安全的系统。AAA协议决定哪些用户能够访问服务&#xff0c;以及用户能够…
阅读更多...
linux系统-PXE高效批量网络装机

linux系统-PXE高效批量网络装机

目录 一、PXE概述 PXE批量部署的优点 搭建PXE网络体系的前提条件 二、搭建PXE远程安装服务器 1.修改网络配置 2 .老样子关防火墙&#xff01;&#xff01;&#xff01;&#xff01; 3.确保挂载状态 和yum库 4. 安装TFTP服务 5.修改TFTP服务的配置文件 6.启动服务 7…
阅读更多...
概念解析 | 基础模型：AI时代的“形而上学“

概念解析 | 基础模型：AI时代的“形而上学“

注1：本文系"概念解析"系列之一，致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是：基础模型（Foundation Models） 概念解析 | 基础模型：AI时代的"形而上学" What Are Foundation Models? | NVIDIA Blogs 第一部分：通俗解释 基础模型（…
阅读更多...
echars设置渐变颜色的方法

echars设置渐变颜色的方法

在我们日常的开发中&#xff0c;难免会遇到有需求&#xff0c;需要使用echars设置渐变的图表&#xff0c;如果我们需要设置给图表设置渐变颜色的话&#xff0c;我们只需要在 series 配置项中 添加相应的属性配置项即可。 方式一&#xff1a;colorStops type&#xff1a;‘lin…
阅读更多...
this关键字

this关键字

this 文章目录 this引出Thisthis的作用this.属性内存分析 this.方法名this(&#xff09;构造方法 概念&#xff1a;this 关键字是 Java常用的关键字&#xff0c;可用于任何实例方法内指向当前对象&#xff0c;也可指向对其调用当前方法的对象&#xff0c;可以将this理解为一个指…
阅读更多...
被问了n遍的小程序地理位置权限开通方法

被问了n遍的小程序地理位置权限开通方法

小程序地理位置接口有什么功能&#xff1f; 在平时我们在开发小程序时&#xff0c;难免会需要用到用户的地理位置信息的功能&#xff0c;小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( getLocation )&#xff0c;但是在代码中却使用到了相关接口&#…
阅读更多...
【3dmax笔记】023：阵列工具（移动+一维+二维+三维）

【3dmax笔记】023：阵列工具（移动+一维+二维+三维）

文章目录 一、阵列工具二、案例演示 一、阵列工具 【阵列】命令将显示【阵列】对话框&#xff0c;使用该对话框可以基于当前选择创建对象阵列。 菜单栏&#xff1a;【工具】菜单 > 【阵列】 二、案例演示 首先&#xff0c;画一个物体&#xff0c;如茶壶&#xff0c;如下图…
阅读更多...
Ps 中 曲线和色阶的区别在哪里？

Ps 中 曲线和色阶的区别在哪里？

【官方解释】 在Photoshop中&#xff0c;曲线&#xff08;Curves&#xff09;和色阶&#xff08;Levels&#xff09;是两种调整图像色调和对比度的工具&#xff0c;它们有一些相似之处&#xff0c;但也有一些重要的区别。 调整方式: 曲线&#xff08;Curves&#xff09;&…
阅读更多...
04-19 周四 GitHub CI 方案设计

04-19 周四 GitHub CI 方案设计

04-19 周四 GitHub CI 方案设计 时间版本修改人描述2024年4月19日14:44:23V0.1宋全恒新建文档2024年4月19日17:22:57V1.0宋全恒完成部署拓扑结构的绘制和文档撰写 简介 需求 由于团队最近把代码托管在GitHub上&#xff0c;为解决推理、应用的自动化CI的需要&#xff0c;调研了…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站