vue中的keep-alive详解与应用场景

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-keep-alive

目录

一、Keep-alive 是什么

二、使用场景

三、原理分析

四、案例实现

activated、deactivated钩子

五、缓存后如何获取数据

beforeRouteEnter

actived

一、Keep-alive 是什么

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive可以设置以下props属性：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存

  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

  • max - 数字。最多可以缓存多少组件实例

关于keep-alive的基本用法：

<keep-alive>
  <component :is="view"></component>
</keep-alive>

使用includes和exclude：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
​
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
​
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

  • 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated

  • 再次进入组件时：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

二、使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

使用<keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

三、原理分析

keep-alive是vue中内置的一个组件

export default {
  name: 'keep-alive',
  abstract: true,
​
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
​
  created () {
    this.cache = Object.create(null)
    this.keys = []
  },
​
  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
​
  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
​
  render() {
    /* 获取默认插槽中的第一个组件节点 */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 获取该组件节点的componentOptions */
    const componentOptions = vnode && vnode.componentOptions
​
    if (componentOptions) {
      /* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */
      const name = getComponentName(componentOptions)
​
      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
​
      const { cache, keys } = this
      /* 获取组件的key值 */
      const key = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
     /*  拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      }
        /* 如果没有命中缓存，则将其设置进缓存 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }
​
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

可以看到该组件没有template，而是用了render，在组件渲染的时候会自动执行render函数

this.cache是一个对象，用来存储需要缓存的组件，它将以如下形式存储：

this.cache = {
    'key1':'组件1',
    'key2':'组件2',
    // ...
}

在组件销毁的时候执行pruneCacheEntry函数

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* 判断当前没有处于被渲染状态的组件，将其销毁*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

在mounted钩子函数中观测 include 和 exclude 的变化，如下：

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

如果include 或exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行pruneCache函数，函数如下：

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可

关于keep-alive的最强大缓存功能是在render函数中实现

首先获取组件的key值：

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */

if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
    remove(keys, key)
    keys.push(key)
}

直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个

this.cache对象中没有该key值的情况，如下：

/* 如果没有命中缓存，则将其设置进缓存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中

此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉

四、案例实现

缓存包裹在其中的动态切换组件

<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。

任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。

完整案例：08_dynamic/52_keep-alive.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态组件</title>
</head>
<body>
  <div id="app">
    <ul>
      <li @click="currentTab='Home'">首页</li>
      <li @click="currentTab='Kind'">分类</li>
      <li @click="currentTab='Cart'">购物车</li>
      <li @click="currentTab='User'">我的</li>
    </ul>
    <!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 -->
    <!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 -->
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const Home = {
    template: `
      <div>
        首页  <input placeholder="首页"/>
      </div>
    `,
    created () { console.log('Home created') },
    mounted () { console.log('Home mounted') },
    unmounted () { console.log('Home unmounted') }
  }
  const Kind = {
    template: `
      <div>
        分类  <input placeholder="分类"/>
      </div>
    `,
    created () { console.log('Kind created') },
    mounted () { console.log('Kind mounted') },
    unmounted () { console.log('Kind unmounted') }
  }
  const Cart = {
    template: `
      <div>
        购物车  <input placeholder="购物车"/>
      </div>
    `,
    created () { console.log('Cart created') },
    mounted () { console.log('Cart mounted') },
    unmounted () { console.log('Cart unmounted') }
  }
  const User = {
    template: `
      <div>
        我的  <input placeholder="我的"/>
      </div>
    `,
    created () { console.log('User created') },
    mounted () { console.log('User mounted') },
    unmounted () { console.log('User unmounted') }
  }
​
  Vue.createApp({
    data () {
      return {
        currentTab: 'Home'
      }
    },
    components: {
      Home,
      Kind,
      Cart,
      User
    }
  }).mount('#app')
</script>
</html>

当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。

activated、deactivated钩子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态组件</title>
</head>
<body>
  <div id="app">
    <ul>
      <li @click="currentTab='Home'">首页</li>
      <li @click="currentTab='Kind'">分类</li>
      <li @click="currentTab='Cart'">购物车</li>
      <li @click="currentTab='User'">我的</li>
    </ul>
    <!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 -->
    <!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 -->
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const Home = {
    template: `
      <div>
        首页  <input placeholder="首页"/>
      </div>
    `,
    created () { console.log('Home created') },
    mounted () { console.log('Home mounted') },
    unmounted () { console.log('Home unmounted') },
    activated () { console.log('Home 显示')},
    deactivated () { console.log('Home 隐藏')}
  }
  const Kind = {
    template: `
      <div>
        分类  <input placeholder="分类"/>
      </div>
    `,
    created () { console.log('Kind created') },
    mounted () { console.log('Kind mounted') },
    unmounted () { console.log('Kind unmounted') },
    activated () { console.log('Kind 显示')},
    deactivated () { console.log('Kind 隐藏')}
  }
  const Cart = {
    template: `
      <div>
        购物车  <input placeholder="购物车"/>
      </div>
    `,
    created () { console.log('Cart created') },
    mounted () { console.log('Cart mounted') },
    unmounted () { console.log('Cart unmounted') },
    activated () { console.log('Cart 显示')},
    deactivated () { console.log('Cart 隐藏')}
  }
  const User = {
    template: `
      <div>
        我的  <input placeholder="我的"/>
      </div>
    `,
    created () { console.log('User created') },
    mounted () { console.log('User mounted') },
    unmounted () { console.log('User unmounted') },
    activated () { console.log('User 显示')},
    deactivated () { console.log('User 隐藏')}
  }
​
  Vue.createApp({
    data () {
      return {
        currentTab: 'Home'
      }
    },
    components: {
      Home,
      Kind,
      Cart,
      User
    }
  }).mount('#app')
</script>
</html>

要不不缓存，要缓存都缓存了，这样不好

使用 include / exclude可以设置哪些组件被缓存，使用 max可以设定最多缓存多少个

<!-- 用逗号分隔的字符串，中间不要家空格 -->
<KeepAlive include="a,b">
    <component :is="view"></component>
</KeepAlive>
​
<!-- 正则表达式 (使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
    <component :is="view"></component>
</KeepAlive>
​
<!-- 数组 (使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
    <component :is="view"></component>
</KeepAlive>

组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>动态组件</title>
</head>
<body>
 <div id="app">
    <ul>
      <li @click="currentTab='Home'">首页</li>
      <li @click="currentTab='Kind'">分类</li>
      <li @click="currentTab='Cart'">购物车</li>
      <li @click="currentTab='User'">我的</li>
    </ul>
 <!-- 动态组件默认切换时 执行的是组件的 销毁 和 重新创建 -->
    <!-- 可以使用 KeepAlive 保留组件的状态，避免组件的重新渲染 -->
    <!-- 字符串逗号分隔，千万不要加空格 -->
    <!-- <keep-alive include="home,user">
   <component :is="currentTab"></component>
    </keep-alive> -->
    <!-- 正则 -->
 <!-- <keep-alive :include="/home|user/">
      <component :is="currentTab"></component>
    </keep-alive> -->
 <!-- 数组 -->
    <keep-alive :include="['home', 'user']">
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
const Home = {
   name: 'home',
   template: `
     <div>
     首页  <input placeholder="首页"/>
     </div>
   `,
   created () { console.log('Home created') },
    mounted () { console.log('Home mounted') },
    unmounted () { console.log('Home unmounted') },
    activated () { console.log('Home 显示')},
    deactivated () { console.log('Home 隐藏')}
  }
  const Kind = {
    name: 'kind',
    template: `
      <div>
        分类  <input placeholder="分类"/>
      </div>
    `,
    created () { console.log('Kind created') },
    mounted () { console.log('Kind mounted') },
    unmounted () { console.log('Kind unmounted') },
    activated () { console.log('Kind 显示')},
    deactivated () { console.log('Kind 隐藏')}
  }
  const Cart = {
   name: 'cart',
   template: `
      <div>
        购物车  <input placeholder="购物车"/>
      </div>
    `,
    created () { console.log('Cart created') },
    mounted () { console.log('Cart mounted') },
    unmounted () { console.log('Cart unmounted') },
    activated () { console.log('Cart 显示')},
    deactivated () { console.log('Cart 隐藏')}
  }
  const User = {
    name: 'user',
    template: `
      <div>
        我的  <input placeholder="我的"/>
      </div>
    `,
    created () { console.log('User created') },
    mounted () { console.log('User mounted') },
   unmounted () { console.log('User unmounted') },
   activated () { console.log('User 显示')},
    deactivated () { console.log('User 隐藏')}
  }
​
  Vue.createApp({
    data () {
      return {
        currentTab: 'Home'
      }
    },
    components: {
      Home,
      Kind,
      Cart,
      User
    }
  }).mount('#app')
</script>
</html>

五、缓存后如何获取数据

解决方案可以有以下两种：

  • beforeRouteEnter

  • actived

beforeRouteEnter

每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived

在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用

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

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

相关文章

虹科干货 | 适用于基于FPGA的网络设备的IEEE 1588透明时钟架构

虹科干货 | 适用于基于FPGA的网络设备的IEEE 1588透明时钟架构

导读&#xff1a;在基于FPGA的网络设备中&#xff0c;精确的时间同步至关重要。IEEE 1588标准定义的精确时间协议&#xff08;PTP&#xff09;为网络中的设备提供了纳秒级的时间同步。本文将介绍虹科提供的适用于基于FPGA的网络设备的IEEE 1588透明时钟&#xff08;TC&#xff…
阅读更多...
flink源码分析之功能组件(三)-rpc组件

flink源码分析之功能组件(三)-rpc组件

简介 本系列是flink源码分析的第二个系列，上一个《flink源码分析之集群与资源》分析集群与资源，本系列分析功能组件，kubeclient，rpc，心跳，高可用，slotpool，rest，metrics，future。 本文解释rpc组件，rpc组件用于个核心组件，包括作业管理器，资源管理器和任务管理器之…
阅读更多...
uni-app 离线打包安卓Apk（小白上手）

uni-app 离线打包安卓Apk（小白上手）

场景&#xff1a; 在使用uni-app 开发apk时&#xff0c;使用云打包有次数限制。尤其对于测试阶段是无比难受的&#xff0c;通常是浪费打包次数进行打包或者通过usb 给测试机更新开发环境&#xff0c;但这都是无比漫长的过程 尤其有多个测试机真的是噩梦般的存在 下载离线打包示…
阅读更多...
基于mpvue实现的cnode社区demo（附精选源码32套，涵盖商城团购等）

基于mpvue实现的cnode社区demo（附精选源码32套，涵盖商城团购等）

社区类目没有开放给个人开发者&#xff0c;所以没能上线。 预览 项目配置文件&#xff0c;更改appid {"description": "项目配置文件","setting": {"urlCheck": true,"es6": false,"postcss": false,"minif…
阅读更多...
扫地机器人市场持续火爆，景联文科技数据采集标注方案助力扫地机器人智能化升级

扫地机器人市场持续火爆，景联文科技数据采集标注方案助力扫地机器人智能化升级

随着消费者对智能家居和清洁卫生的需求增加&#xff0c;扫地机器人市场规模不断扩大。市场竞争也日益激烈&#xff0c;各品牌都在努力提升产品性能和服务质量&#xff0c;以获取更大的市场份额。 IDC的统计数据显示&#xff0c;今年双十一前两周&#xff08;2023年10月23日至20…
阅读更多...
stream流和方法引用

stream流和方法引用

1.Stream流 1.1体验Stream流【理解】 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合&#xff0c;存储多个字符串元素把集合中所有以"张"开头的元素存储到一个新的集合把"张"开头的集合中的长度为3的元素存储到一个新的集合遍历上一步得到的集…
阅读更多...
jsoup登录日志平台后调企业微信机器人自动发送错误日志告警

jsoup登录日志平台后调企业微信机器人自动发送错误日志告警

一、需求&#xff1a;错误日志Top10告警发送 二、需求分解 jsoup实现登录&#xff0c;获取到cookie和token等用户鉴权信息获取接口相应的key值调用日志平台错误日志Top榜接口&#xff0c;查询到结果集调用企业微信机器人发送消息接口加上定时任务&#xff0c;可以实现定时发送…
阅读更多...
顺子日期（14）

顺子日期（14）

顺着日期 public class Main {public static void main(String[] args) {int res 0;//2022年int[] days new int[] {31,28,31,30,31,30,31,31,30,31,30,31};//31,28,31,30,31,30,31,31,30,31,30,31//一三五七八十腊//构造2022年每一天的日期yyyymmddStringBuffer date new…
阅读更多...
用python实现kindle文件转换pdf

用python实现kindle文件转换pdf

上一篇文章讲了下用工具转换相关的格式&#xff1a;https://blog.csdn.net/weixin_42019349/article/details/134654695 今天来分享一个python库实现上述功能&#xff0c;实现文件转换自由 ^_^ 主角就是pypandoc库 # 安装方式 pip install pypandoc# pypandoc主要有三个函数…
阅读更多...
ModuleNotFoundError: No module named ‘mdtex2html‘ module已经安装还是报错，怎么办？

ModuleNotFoundError: No module named ‘mdtex2html‘ module已经安装还是报错，怎么办？

用streamlit运行ChatGLM/basic_model/web_demo.py的时候&#xff0c;出现了module not found&#xff1a; ModuleNotFoundError: No module named mdtex2html Traceback: File "/home/haiyue/.local/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/script…
阅读更多...
机器学习的复习笔记3-回归的细谈

机器学习的复习笔记3-回归的细谈

一、回归的细分 机器学习中的回归问题是一种用于预测连续型输出变量的任务。回归问题的类型和特点如下&#xff1a; 线性回归&#xff08;Linear Regression&#xff09;&#xff1a;线性回归是回归问题中最简单的一种方法。它假设自变量与因变量之间存在线性关系&#xff0c…
阅读更多...
普通表计读数开发思路

普通表计读数开发思路

一、普通表计类型介绍&#x1f349; 常见的普通表计有SF6&#xff0c;压力表&#xff0c;油位表&#xff08;指针类&#xff09;等。 图1&#xff1a;( 压力表) 图2&#xff1a;&#xff08;油位表-指针类&#xff09; 图3&#xff1a;&#xff08;SF6表&#xff09; 图4:&a…
阅读更多...
巧妙之中见真章：深入解析常用的创建型设计模式

巧妙之中见真章：深入解析常用的创建型设计模式

设计模式之创建型设计模式详解 一、设计模式是什么&#xff1f;二、模板方法2.1、代码结构2.2、符合的设计原则2.3、如何扩展代码2.4、小结 三、观察者模式3.1、代码结构3.2、符合的设计原则3.3、如何扩展代码3.4、小结 四、策略模式4.1、代码结构4.2、符合的设计原则4.3、如何…
阅读更多...
K 最近邻算法

K 最近邻算法

K 最近邻算法 简单 KNN海伦约会手写数字识别KNN 算法的优缺点 K 最近邻&#xff08;K-NearestNeighbor&#xff0c;KNN&#xff09;算法&#xff0c;是 1967 年由 Cover T 和 Hart P 提出的一种用于分类与回归的方法。 基本原理&#xff1a;存在一个带标签的数据集&#xff08;…
阅读更多...
C语言第三十五弹---打印九九乘法表

C语言第三十五弹---打印九九乘法表

C语言打印九九乘法表 思路&#xff1a;观察每一行可以看出乘号右边的一行值都是相同的&#xff0c;而乘号左边不断变化&#xff0c;所以使用嵌套循环&#xff0c;控制好 乘号左右值变化的条件即可。 #include <stdio.h>int main() {for (int i 1; i < 9; i){for (in…
阅读更多...
【微服务】java 规则引擎使用详解

【微服务】java 规则引擎使用详解

目录 一、什么是规则引擎 1.1 规则引擎概述 1.2 规则引擎执行过程 二、为什么要使用规则引擎 2.1 使用规则引擎的好处 2.1.1 易于维护和更新 2.1.2 增强应用程序的准确性和效率 2.1.3 加快应用程序的开发和部署 2.1.4 支持可视化和可管理性 2.2 规则引擎使用场景 三、…
阅读更多...
开源四轴协作机械臂ultraArm激光雕刻技术案例！

开源四轴协作机械臂ultraArm激光雕刻技术案例！

注意安全事项 开始之前&#xff0c;请确保您已采取适当的安全措施&#xff0c;例如用于激光操作的防护眼镜、灭火器和通风良好的区域。 引言 随着科技的不断进步&#xff0c;激光雕刻技术已经成为当今制造行业中不可或缺的一部分。它以其高精度、高效率和广泛的材料适应性&…
阅读更多...
JAVA的一些便捷性方法（Object）

JAVA的一些便捷性方法（Object）

在IDEA中&#xff0c;如何查看JDK的源码&#xff1f; CTRL B; 常用方法&#xff1a; 1.equals&#xff08;&#xff09; booleanequals(Object obj) 指示其他某个对象是否与此对象“相等”。 与 的比较&#xff1a; &#xff0c;即可判断基本类型&#xff0c;也…
阅读更多...
从0开始学习JavaScript--JavaScript对象封装

从0开始学习JavaScript--JavaScript对象封装

JavaScript中的对象封装是一种重要的编程概念&#xff0c;它允许将数据和方法组织成一个独立的单元&#xff0c;实现了数据的保护和抽象。本文将深入探讨JavaScript对象封装的原理、实践和最佳实践。 封装的基础概念 封装是面向对象编程的基础概念之一&#xff0c;它强调将数…
阅读更多...
笔记十七、认识React的路由插件react-router-dom和基本使用

笔记十七、认识React的路由插件react-router-dom和基本使用

react-router 分类 web使用 react-router-dom native使用 react-router-native anywhere&#xff08;使用麻烦&#xff09; react-router 安装 yarn add react-router-dom main.jsx import React from "react"; import ReactDOM from "react-dom/client"…
阅读更多...
最新文章

Copyright @ 2022~2023