vue3开发中易遗漏的常见知识点

news2024/9/25 16:53:40

文章目录

    • 组件样式的特性
      • Scoped CSS之局部样式的泄露
      • Scoped CSS之深度选择器
      • CSS Modules
      • 在CSS中使用v-bind
    • 非props属性继承
    • 组件通信
      • 父子组件的相互通信props/$emit
        • 父组件传递数据给子组件
        • 子组件传递数据给父组件
      • 非父子组件的相互通信
        • Provide/inject
        • 全局事件总线
    • 组件插槽
      • 作用域插槽
      • 独占默认插槽
    • 动态组件

组件样式的特性

Scoped CSS之局部样式的泄露

示例（vue3）：

父组件：

<template>
  <h4>App Title</h4>
  <hello-world></hello-world>
</template>
<script>
import HelloWorld from './HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>
<style scoped>
h4 {
  text-decoration: underline;
}
</style>

HelloWorld子组件：

<template>
  <h4>Hello World1</h4>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style scoped></style>

结果如图所示：

在这里插入图片描述

结论：子组件的根节点会同时受到父组件的作用域样式和子组件的作用域样式的影响。

为了避免这种局部样式泄露的问题，可以采用如下方式：

  • 1.尽量减少标签选择器的使用，多使用class选择器。
  • 2.在每个子组件的根元素中添加唯一的class选择器。
  • 3.在子组件中使用多个根元素，也可以在template中添加多个根元素，Vue.js 3已经支持这种方式

上面HelloWorld子组件调整下代码如下：

<template>
  <div class="hello-world">
    <h4>Hello World1</h4>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style scoped></style>

结果如图所示：

在这里插入图片描述

这样父组件h4的样式就不会影响子组件的h4标签样式。

Scoped CSS之深度选择器

有时候需要在父组件的局部样式中修改子组件的某个元素的样式，这时可以使用深度选择器:deep()这个伪类实现。

我们在HelloWorld.vue组件中添加一个class为msg的元素，示例代码如下：

<template>
  <div class="hello-world">
    <h4 class="msg">Hello World1</h4>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style scoped></style>

在父组件中添加如下样式：

<template>
  <h4>App Title</h4>
  <hello-world></hello-world>
</template>
<script>
import HelloWorld from './HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>
<style scoped>
h4 {
  text-decoration: underline;
}

/* 深度选择器：选中子组件class为msg的元素  */
:deep(.msg) {
  text-decoration: underline;
}
</style>

结果如图所示：

在这里插入图片描述

CSS Modules

当组件的<style>标签中带有module属性时，标签会被编译为CSS Modules，并将生成的CSS类作为$style对象的键暴露给组件。

<template>
  <div class="hello-world">
    <p :class="$style.red">This should be red</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>
<style module>
/* red CSS 类会作为$style对象的键，即$style.red */
.red {
  color: red;
}
</style>

CSS Modules 这种方式在vue3项目中用得比较少。

在CSS中使用v-bind

在vue.js 3.2版本之前，v-bind语法是一个实验性的功能，在vuejs 3.2版本之后，v-bind功能已经稳定。

示例如下：

<template>
  <div class="example">
    <h4 class="red">hello should be red</h4>
    <h4 class="green">hello should be green</h4>
    <h4 class="yellow">hello should be yellow</h4>
  </div>
</template>
<script>
export default {
  name: 'example',
  data () {
    return {
      color1: 'red',
      color2: 'green'
    }
  },
  computed: {
    color3 () {
      return 'yellow'
    }
  }
}
</script>
<style>
/* 动态绑定样式，也属于局部样式。与style标签是否绑定 scoped 属性没有关系 */
.red {
  color: v-bind(color1)
}

.green {
  color: v-bind(color2)
}

.yellow {
  color: v-bind(color3)
}
</style>

页面渲染结果如图：

在这里插入图片描述

DOM渲染截图：

在这里插入图片描述

实际上，他们的值会被编译成hash的CSS自定义property，CSS本身仍然是静态的。自定义property会通过内联样式的方式应用到组件的根元素上，如上截图所示，并且在源值变更时响应式更新。和前面的属性一样，它的CSS只会应用到当前组件的元素上。

非props属性继承

例如像id,name,class这样没有定义的props属性，在组件中没有通过props传递，但是这对应的属性也继承到了子组件的根元素上，示例代码：

父组件：

<template>
  <no-prop-attribute id="coder" class="why" name="codername"></no-prop-attribute>
</template>
<script>
import NoPropAttribute from './NoPropAttribute.vue';

export default {
  name: 'App',
  components: {
    NoPropAttribute
  }
};
</script>
<style scoped></style>

子组件：

<template>
  <div class="no-prop-attribute">
    该子组件没有定义任何的props属性
  </div>
</template>
<script>
export default {
  name: 'NoPropAttribute'
}
</script>

结果渲染如图所示：

在这里插入图片描述

如果不希望组件的根元素继承属性，那么在组件中设置inheritAttrs: false即可。

调整子组件代码：

<template>
  <div class="no-prop-attribute">
    该子组件没有定义任何的props属性
  </div>
</template>
<script>
export default {
  name: 'NoPropAttribute',
  inheritAttrs: false
}
</script>

渲染结果如图所示：

在这里插入图片描述

我们可以在子组件中通过$attr访问所有非props的属性，子组件示例代码如下：

<template>
  <div class="no-prop-attribute">
    该子组件没有定义任何的props属性
    <h4 :class="$attrs.class" :id="$attrs.id">{{ $attrs.name }}</h4>
  </div>
</template>
<script>
export default {
  name: 'NoPropAttribute',
  inheritAttrs: false
}
</script>

渲染结果如图所示：

在这里插入图片描述

组件通信

父子组件的相互通信props/$emit

父组件传递数据给子组件

略

子组件传递数据给父组件

自定义事件参数与自定义事件验证示例。

父组件：

<template>
  <div>
    <h4>当前计数：{{ counter }}</h4>
    <counter-operation @add="addOne" @sub="subOne" @addN="addNNum"></counter-operation>
  </div>
</template>

<script>
import CounterOperation from './CounterOperation.vue';
export default {
  components: {
    CounterOperation
  },
  data () {
    return {
      counter: 0
    }
  },
  methods: {
    addOne () {
      this.counter++;
    },
    subOne () {
      this.counter--;
    },
    addNNum (num, name, age) {
      console.log(name, age);
      this.counter += num;
    }
  }
}

</script>

子组件CounterOperation.vue：

<template>
  <div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <input type="text" v-model.number="num">
    <button @click="incrementN">+n</button>
  </div>
</template>

<script>
export default {
  // 1.数组写法
  // emits: ['add', 'sub', 'addN'],
  // 2.对象写法
  emits: {
    add: null,
    sub: null,
    addN: (num, name, age) => {
      if (num > 10) {
        // 如果num大于10，则验证通过
        return true;
      }
      // 如果num小于10，则返回false,控制台会出现参数验证不通过的警告，但是不影响程序的运行。
      return false;
    }
  },
  data () {
    return {
      num: 0
    }
  },
  methods: {
    increment () {
      this.$emit('add');
    },
    decrement () {
      this.$emit('sub');
    },
    incrementN () {
      this.$emit('addN', this.num, "why", 18);
    }
  }
}

</script>

非父子组件的相互通信

Provide/inject

如下示例，
新建三个vue文件，App.vue(根组件)、Home.vue(子组件)、HomeContent.vue(孙子组件)。

HomeContent.vue组件：

<!-- 孙子组件 -->
<template>
  <div class="home-content">
    home-content
    <p>{{ name }} - {{ age }} - {{ friends }}</p>
  </div>
</template>
<script>
export default {
  inject: ['name', 'age', 'friends']
}
</script>

Home.vue:

<!-- 子组件 -->
<template>
  <div class="home">
    home
    <home-content></home-content>
  </div>
</template>
<script>
import HomeContent from './HomeContent.vue'; // 子组件中导入孙子组件
export default {
  name: 'Home',
  components: {
    HomeContent
  }
}
</script>

App.vue:

<!-- 根组件 -->
<template>
  <div id="app">
    App
    <home></home>
    <button @click="addFriend">新增朋友</button>
  </div>
</template>
<script>
import Home from './Home.vue';
export default {
  name: 'App',
  components: {
    Home
  },
  provide () {
    return {
      name: 'why',
      age: 20,
      friends: this.friends
    }
  },
  data () {
    return {
      friends: ["jerry", "tom"]
    }
  },
  methods: {
    addFriend () {
      this.friends.push("jack");
      console.log(this.friends);
    }
  }
}
</script>

运行结果：

在这里插入图片描述

当我们点击“新增朋友”,视图效果：

在这里插入图片描述

从图上可以知道提供的friends属性是响应式的数据。

如果我们在孙子组件中获取friends的长度，孙子组件跟根组件代码。

孙子组件HomeContent.vue：

<!-- 孙子组件 -->
<template>
  <div class="home-content">
    home-content
    <p>{{ name }} - {{ age }} - {{ friends }} - {{ friendLength }}</p>
  </div>
</template>
<script>
export default {
  inject: ['name', 'age', 'friends', "friendLength"]
}
</script>

根组件App.vue:

<!-- 根组件 -->
<template>
  <div id="app">
    App
    <home></home>
    <button @click="addFriend">新增朋友</button>
  </div>
</template>
<script>
import Home from './Home.vue';
export default {
  name: 'App',
  components: {
    Home
  },
  provide () {
    return {
      name: 'why',
      age: 20,
      friends: this.friends,
      friendLength: this.friends.length
    }
  },
  data () {
    return {
      friends: ["jerry", "tom"]
    }
  },
  methods: {
    addFriend () {
      this.friends.push("jack");
      console.log(this.friends);
    }
  }
}
</script>

初始渲染结果如图：

在这里插入图片描述

当我们点击了“新增朋友”，渲染结果如图：

在这里插入图片描述

从图上可以知道，当我们修改了friends后，孙子组件中注入的friendLength属性并未随之改变。这是因为修改了friends之后，之前在provide中映入的this.friends.length属性本身并不是响应式数据。

如果想要响应式数据，我们使用vuejs 3提供的computed API,修改App.vue组件，让friendLength属性接收一个计算属性，代码如下调整：

<!-- 根组件 -->
<template>
  <div id="app">
    App
    <home></home>
    <button @click="addFriend">新增朋友</button>
  </div>
</template>
<script>
import { computed } from 'vue';
import Home from './Home.vue';
export default {
  name: 'App',
  components: {
    Home
  },
  provide () {
    return {
      name: 'why',
      age: 20,
      friends: this.friends,
      friendLength: computed(() => this.friends.length)
    }
  },
  data () {
    return {
      friends: ["jerry", "tom"]
    }
  },
  methods: {
    addFriend () {
      this.friends.push("jack");
      console.log(this.friends);
    }
  }
}
</script>

最终效果如图，当我们点击了“新增朋友”，对应的长度也变化了：

在这里插入图片描述

全局事件总线

事件总线（mitt）是对发布/订阅模式的一种实现，它是一种集中式事件处理机制，允许 vue.js 3 应用程序中的不同组件之间相互通信，无需相互依赖，就可以达到解耦的目的。

在vue.js 3中，可以使用事件总线作为组件之间传递数据的桥梁。所有组件都可以共用同一个事件中心，从而向其他任意组件发送或者接收事件，实现上下同步通知。

Vue.js 3中移除了实例中的on、off、$once方法。如果需要继续使用全局事件总线，则官方推荐第三方库来实现，如mitt或tiny-emitter。

这儿以mitt为例。

首先，安装mitt,执行如下命令：

npm i mitt -S

其次，可以封装一个工具eventbus.js，用于同一导出emitter对象，代码如下所示：

import mitt from 'mitt';

// 1.创建emitter对象
const emitter = mitt();

// 2.也可以创建多个emitter对象
const emitter2 = mitt();

export default emitter;

emitter对象常用的API如下：

  • 1.发送（或触发）事件的API
// 参数1：事件名称（string|symbol类型）
// 参数2：发送事件时传递的数据（any类型，推荐对象）
emitter.emit('why',{name: 'why',age: 18});
  • 2.监听事件的API。注意：监听的事件名需要和触发的事件名一致
// 这里监听全局的why事件
// 参数1：事件名称
// 参数2：监听事件的回调函数，data是触发事件时传递过来的参数
emitter.on('why', (data) => {
  console.log("why:", data);
});
  • 3.如果在某些情况下需要取消事件，那么可以使用下面的API
    • 3.1 取消emitter中所有的监听
      emitter.all.clear();
    • 3.2 取消某一个事件，但需要先定义一个函数
      function onFoo() {}
  emitter.on('foo', onFoo)   // listen
  emitter.off('foo', onFoo)  // unlisten

使用示例

实现如下图所示的跨组件的通信。

在这里插入图片描述

我们分别新建App.vue、Home.vue、HomeContent.vue和About.vue组件以及utils/eventbus.js文件。

utils/eventbus.js文件，用于封装事件总线工具，代码如下：

import mitt from 'mitt';

// 创建emitter对象
const emitter = mitt();

export default emitter;

About.vue组件，负责发送全局事件，代码如下：

<!-- About.vue 子组件 -->
<template>
  <div class="about">
    About
    <button @click="btnClick">单击按钮 触发事件</button>
  </div>
</template>
<script>
import emitter from './utils/eventbus';
export default {
  name: 'About',
  methods: {
    btnClick () {
      console.log('1. About页面的：单击按钮-》触发全局why事件');
      emitter.emit('why', { name: 'why', age: 20 });

      console.log('2. About页面的：单击按钮-》触发全局kobe事件');
      emitter.emit('kobe', { name: 'kobe', age: 20 });
    }
  }
}
</script>

HomeContent.vue组件，负责监听全局的事件，代码如下：

<!-- HomeContent.vue 孙子组件 -->
<template>
  <div class="home-content">
    homeContent
  </div>
</template>
<script>
import emitter from './utils/eventbus';
export default {
  created () {
    // 监听全局的why事件
    emitter.on('why', (data) => {
      console.log('why:', data);
    });

    // 监听全局的kobe事件
    emitter.on('kobe', (data) => {
      console.log('kobe:', data);
    });

    // 监听all事件
    emitter.on('*', (type, data) => {
      console.log('* listener:', type, data);
    });
  }
}
</script>

Home.vue组件，负责导入HomeContent.vue组件，代码如下：

<!-- Home.vue 子组件 -->
<template>
  <div class="home">
    home
    <home-content></home-content>
  </div>
</template>
<script>
import HomeContent from './HomeContent.vue'; // 子组件中导入孙子组件
export default {
  name: 'Home',
  components: {
    HomeContent
  }
}
</script>

App.vue组件，负责导入、注册和使用Home.vue、About.vue组件，代码如下：

<!-- App.vue 根组件 -->
<template>
  <div id="app">
    App
    <home />
    <about />
  </div>
</template>
<script>
import Home from './Home.vue';
import About from './About.vue';
export default {
  name: 'App',
  components: {
    Home,
    About
  }
}
</script>

组件插槽

作用域插槽

示例代码,ShowNames.vue子组件，示例代码如下：

<template>
  <div class="show-names">
    <template v-for="(item, index) in names" :key="item">
      <slot :item="item" :index="index"></slot>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    names: {
      type: Array,
      default: () => []
    }
  }
}
</script>

父组件App.vue，示例代码如下：

<!-- App.vue 根组件 -->
<template>
  <div id="app">
    <show-names :names="names">
      <template v-slot:default="slotProps">
        <span>{{ slotProps.item }} {{ slotProps.index }} - </span>
      </template>
    </show-names>
  </div>
</template>
<script>
import ShowNames from './ShowNames.vue';
export default {
  name: 'App',
  components: {
    ShowNames
  },
  data () {
    return {
      names: ['why', 'kobe', 'jeck', 'tom']
    }
  }
}
</script>

展示效果：

在这里插入图片描述

独占默认插槽

对于默认插槽（即name=“default”）,在使用时可以将v-slot:default="slotProps"简写为v-slot="slotProps"
我们把上面父组件App.vue代码调整下修改下，如下所示：

<!-- App.vue 根组件 -->
<template>
  <div id="app">
    <show-names :names="names">
      <template v-slot="slotProps">
        <span>{{ slotProps.item }} {{ slotProps.index }} - </span>
      </template>
    </show-names>
  </div>
</template>

最终渲染结果跟上面是一样的。

在只有默认插槽时，组件的标签可以被当做插槽的模板（template）使用，这样就可以将v-slot直接用在组件上，即省略template元素,修改App.vue组件，将v-slot="slotProps"写到组件上，代码如下：

<!-- App.vue 根组件 -->
<template>
  <div id="app">
    <show-names :names="names" v-slot="slotProps">
      <span>{{ slotProps.item }} {{ slotProps.index }} - </span>
    </show-names>
  </div>
</template>

但是如果组件同时具备默认插槽和具名插槽，那么必须按照template的语法来编写。

动态组件

动态组件的实现与传参

实现原理就是通过内置的动态组件实现，即使用<component>组件，并通过其特殊属性is动态渲染不同的组件,这里的is属性用于指定组件的名称。

新建App.vue(父组件)、page/Home.vue(子组件)、page/About.vue(子组件)、page/Category.vue(子组件).

App.vue示例代码：

<template>
  <div>
    <button v-for="item in tabs" :key="item" @click="itemClick(item)" :class="{ active: item === currentTab }">
      {{ item }}
    </button>
    <component :is="currentTab" name="coder" :age="20" @pageClick="pageClick"></component>
  </div>
</template>
<script>
import Home from "./page/Home.vue";
import About from "./page/About.vue";
import Category from "./page/Category.vue";

export default {
  components: {
    Home,
    About,
    Category
  },
  data () {
    return {
      tabs: ['home', 'about', 'category'],
      currentTab: 'home'
    }
  },
  methods: {
    itemClick (item) {
      this.currentTab = item
    },
    pageClick (value) {
      console.log(value);
    }
  }
}

</script>
<style scoped>
.active {
  color: red;
}
</style>

page/Home.vue:

<template>
  <div @click="divClick">Home组件: {{ name }} - {{ age }}</div>
</template>
<script>
export default {
  name: 'home',
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  },
  emits: ['pageClick'], // 该组件触发了pageClick事件
  methods: {
    divClick () {
      this.$emit('pageClick', 'Home组件触发了单击')
    }
  }
}
</script>

page/About.vue:

<template>
  <div @click="divClick">About组件: {{ name }} - {{ age }}</div>
</template>
<script>
export default {
  name: 'about',
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  },
  emits: ['pageClick'], // 该组件触发了pageClick事件
  methods: {
    divClick () {
      this.$emit('pageClick', 'About组件触发了单击')
    }
  }
}
</script>

page/Category.vue:

<template>
  <div @click="divClick">Category组件: {{ name }} - {{ age }}</div>
</template>
<script>
export default {
  name: 'category',
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  },
  emits: ['pageClick'], // 该组件触发了pageClick事件
  methods: {
    divClick () {
      this.$emit('pageClick', 'Category组件触发了单击')
    }
  }
}
</script>

实现效果：

在这里插入图片描述

如上面示例home组件的名称为字符串home,当currentTab为home字符串时，显示<home>组件。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用Python与OpenCV的实践：实时面部对称性分析

用Python与OpenCV的实践：实时面部对称性分析

目录 思路分析 整体代码 效果展示 总结 在当今计算机视觉领域&#xff0c;人脸识别和分析技术得到了广泛应用。无论是安全验证、社交媒体应用&#xff0c;还是美学研究&#xff0c;人脸特征的提取和分析都是关键技术之一。在这篇博客中&#xff0c;我们将深入探讨一个有趣的…
阅读更多...
Arco HomeMenu - 无入侵式的个性化菜单配置插件

Arco HomeMenu - 无入侵式的个性化菜单配置插件

关于 Arco HomeMenu Arco HomeMenu 插件是一款对 odoo 菜单功能的增强工具&#xff0c;它的主要功能是允许用户个性化菜单收藏。主要通过分类文件夹及布局功能实现。 Arco HomeMenu 插件主要用于优化用户在 odoo 系统中的操作体验。通过插件功能&#xff0c;用户可以根据自己的…
阅读更多...
innovus：如何报告SI

innovus：如何报告SI

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 报告SI首先要设置si aware，报
阅读更多...
79、Python之鸭子类型：没有听过鸭子类型？关键在于认知的转变

79、Python之鸭子类型：没有听过鸭子类型？关键在于认知的转变

引言 不同于Java等静态类型的语言&#xff0c;Python基于动态类型系统的设计理念&#xff0c;使得Python在很多应用场景中&#xff0c;显得更急灵活、高效。而在动态类型系统中&#xff0c;有一个很重要的概念&#xff0c;就是“鸭子类型”。鸭子类型的背后&#xff0c;代表的…
阅读更多...
一地通过率高达46.43%！为什么都说软考难？

一地通过率高达46.43%！为什么都说软考难？

从2023年上半年到2024年上半年&#xff0c;近三次考试&#xff0c;几个考区的软考通过率基本不超过13%。 然而根据近日陕西省科技资源统筹中心公布的数据&#xff0c;从1987年到2024年&#xff0c;陕西软考的总拿证率竟然高达46.43%。软考真的有大家认为的那么难吗&#xff1f;…
阅读更多...
Unity场景内画车道线（根据五阶曲线系数）

Unity场景内画车道线（根据五阶曲线系数）

之前做过使用Dreamteck Splines插件构建车道线之前需求是给定车道线的点位&#xff0c;根据点位来进行构建。 由于AI识别出来的点位不线性&#xff0c;画出来的车道线经常是歪七扭八&#xff0c;所以使用五阶曲线系数进行构建。 使用在线图形计算器进行测试构建&#xff0c;公式…
阅读更多...
DATEDIF 函数用不了？DATEDIF函数怎么用我来告诉你

DATEDIF 函数用不了？DATEDIF函数怎么用我来告诉你

大家好&#xff0c;这里是效率办公指南&#xff01; &#x1f4c5; 在处理与时间相关的数据时&#xff0c;DATEDIF函数是Excel中一个非常有用的工具。DATEDIF函数可以计算两个日期之间的差异&#xff0c;无论是天数、月数还是年数。这在处理年龄计算、工龄统计或任何需要日期差…
阅读更多...
大健康管理系统|健康综合咨询问诊平台设计与实现(源码+数据库+文档)

大健康管理系统|健康综合咨询问诊平台设计与实现(源码+数据库+文档)

大健康管理系统目录 目录 健康综合咨询问诊平台设计与实现 一、前言 二、系统功能设计 三、系统实现 5.1用户信息管理 5.2 医生信息管理 5.3科室信息管理 5.1新闻信息管理 四、数据库设计 1、实体ER图 2、具体的表设计如下所示&#xff1a; 五、核心代码 六、论文…
阅读更多...
docker笔记_数据卷、挂载

docker笔记_数据卷、挂载

docker数据存储 概述数据卷&#xff08;Volumes&#xff09;特点操作 绑定挂载&#xff08;Bind Mounts&#xff09;内存挂载&#xff08;tmpfs&#xff09;总结 概述 镜像构建过程中&#xff0c;所产生的layer都是只读层&#xff0c;只有在创建容器时才会生成一个可写的容器层…
阅读更多...
鸿蒙OpenHarmony【小型系统基础内核(虚拟内存管理)】子系统开发

鸿蒙OpenHarmony【小型系统基础内核(虚拟内存管理)】子系统开发

虚拟内存管理 基本概念 虚拟内存管理是计算机系统管理内存的一种技术。每个进程都有连续的虚拟地址空间&#xff0c;虚拟地址空间的大小由CPU的位数决定&#xff0c;32位的硬件平台可以提供的最大的寻址空间为0-4GiB。整个4GiB空间分成两部分&#xff0c;LiteOS-A内核占据3Gi…
阅读更多...
Go weak包前瞻：弱指针为内存管理带来新选择

Go weak包前瞻：弱指针为内存管理带来新选择

在介绍Go 1.23引入的unique包的《Go unique包&#xff1a;突破字符串局限的通用值Interning技术实现》一文中&#xff0c;我们知道了unique包底层是基于internal/weak包实现的&#xff0c;internal/weak是一个弱指针功能的Go实现。所谓弱指针(Weak Pointer&#xff0c;也称为弱…
阅读更多...
算法分享——《滑动窗口》

算法分享——《滑动窗口》

&#x1f68d;《长度最小的子数组》 &#x1f6b2;题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度**。**如果不存在符…
阅读更多...
Linux进程状态与进程优先级

Linux进程状态与进程优先级

目录 Linux进程状态与进程优先级 前置知识 并行与并发 时间片 进程状态 基本介绍 等待状态的本质 swap分区 Linux进程状态 Linux进程状态分类 运行状态&#xff08;Running&#xff09;与等待状态&#xff08;Sleeping&#xff09; 硬盘等待状态&#xff08;Disk S…
阅读更多...
计算机视觉必备模型YOLO系列模型的知识点，提供YOLOv1-v8模型结构与代码实例

计算机视觉必备模型YOLO系列模型的知识点，提供YOLOv1-v8模型结构与代码实例

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉必备模型YOLO系列模型的知识点&#xff0c;提供YOLOv1-v8模型结构与代码实例。本文全面介绍了计算机视觉领域中必备的YOLO系列模型&#xff0c;详细梳理了YOLOv1至YOLOv8模型的结构及其演变过程。文章内容…
阅读更多...
Node.js 学习 path模块、fs模块、npm软件包管理器、导出、导入

Node.js 学习 path模块、fs模块、npm软件包管理器、导出、导入

目录 1.Node.js入门 1.1 什么是 Node.js 1.2 fs模块-读写文件 1.3 path模块-路径处理 1.4 案例-压缩前端html 1.5 认识URL中的端口号 1.6 http模块-创建Web服务 1.7 案例-浏览时钟 2.Node.js 模块化 2.1 模块化简介 2.1.1 什么是模块化&#xff1f; 2.1.2 CommonJS…
阅读更多...
【软件建设方案】设备管理系统建设方案（Doc原件参考）

【软件建设方案】设备管理系统建设方案（Doc原件参考）

1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 3.系统功能设计 3.1.功能清单列表 3.2.设备信息数据库 3.3.设备维护计划管理子系统 3.4.设备维护管理子系统 3.5.备件物资管理子系统 3.6.…
阅读更多...
1区IEEE-Trans发文暴涨3倍，CCF-B类，刚跌出了TOP榜！这是不是官方提前发出警告？

1区IEEE-Trans发文暴涨3倍，CCF-B类，刚跌出了TOP榜！这是不是官方提前发出警告？

【SciencePub学术】今天给大家推荐的是1本地球科学领域的SCI—《IEEE TRANSACTIONS ON GEOSCIENCE AND REMOTE SENSING》&#xff0c;IEEE-Trans系列&#xff0c;并且是CCF-B类期刊&#xff01;此系列的期刊在业界的权威性还是不容置疑的。 优点VS缺点 ✦ IEEE-Trans系列 ✦ C…
阅读更多...
普通本科生也能成为AI高手：人工智能学习指南

普通本科生也能成为AI高手：人工智能学习指南

在人工智能&#xff08;AI&#xff09;日益普及的今天&#xff0c;许多人都渴望掌握这项技术&#xff0c;但常有人疑惑&#xff1a;没有顶尖学府的背景&#xff0c;我也能学习人工智能吗&#xff1f; 答案是肯定的&#xff01; 人工智能是一个充满机遇与挑战的领域&#xff0c…
阅读更多...
渗透测试工具 sqlmap 基础教程

渗透测试工具 sqlmap 基础教程

一、引言 在网络安全领域&#xff0c;渗透测试是一项至关重要的工作&#xff0c;它可以帮助我们发现系统中的安全漏洞&#xff0c;从而采取相应的措施进行修复。而 sqlmap 作为一款强大的开源渗透测试工具&#xff0c;专门用于检测和利用 SQL 注入漏洞。本文将为大家详细介绍 …
阅读更多...
HTTP 1.0 2.0 3.0详解

HTTP 1.0 2.0 3.0详解

HTTP HTTP全称超文本传输协议&#xff0c;是一种属于应用层的通信协议。它允许将超文本标记语言文档&#xff08;HTML&#xff09;从Web服务器传输到客户端的浏览器。 HTTP报文结构 请求报文结构 请求方法&#xff1a; GET&#xff1a;一般用来请求已被URI识别的资源&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023