Vue关键知识点
watch侦听器
Vue.js 中的侦听器(Watcher)是 Vue提供的一种响应式系统的核心机制之一。
监听数据的变化,并在数据发生变化时执行相应的回调函数。
目的:数据变化能够自动更新到视图中
原理:
Vue 的侦听器通过观察对象的属性,并在属性值发生变化时触发回调函数来实现。在 Vue 内部,侦听器通过使用 JavaScript 对象的 Object.defineProperty
方法来实现对数据的监听,从而在数据发生变化时能够及时地通知相关的观察者(Watcher),进而更新视图。
功能:
- 监听数据变化: 侦听器能够监听数据的变化,包括数据的添加、修改、删除等操作。
- 执行回调函数: 当数据发生变化时,侦听器会执行事先注册的回调函数,从而触发相应的操作。
用法:
在 Vue 组件中,你可以使用侦听器来监视数据的变化,并执行相应的操作。你可以在 watch
选项中定义侦听器,也可以直接使用 $watch
方法来创建侦听器。
通过 watch
选项:
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
export default {data() {return {count: 0};},watch: {count(newValue, oldValue) {console.log('Count changed from', oldValue, 'to', newValue);}},methods: {increment() {this.count++;}}
};
</script>
通过 $watch
方法:
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
export default {data() {return {count: 0};},mounted() {this.$watch('count', (newValue, oldValue) => {console.log('Count changed from', oldValue, 'to', newValue);});},methods: {increment() {this.count++;}}
};
</script>
优缺点:
优点:
- 响应式更新: 侦听器能够实现数据的响应式更新,当数据发生变化时,相关的视图会自动更新。
- 灵活性: 侦听器的使用非常灵活,你可以在任何地方监听任何数据的变化,并执行相应的操作。
缺点:
- 性能消耗: 对大量数据进行监听可能会导致性能下降,因为每个被监听的数据都会创建一个侦听器,消耗一定的内存和 CPU 资源。
- 复杂性: 当应用变得复杂时,过多的侦听器可能会导致代码难以维护和理解。
以下是一个简化的流程图来展示 Vue.js 中侦听器的底层原理:
+---------------------+
| 数据对象 |
| (Data Object) |
+----------+----------+|v
+----------+----------+
| Observer 监听器 |
| (Observer) |
+----------+----------+|v
+----------+----------+
| Watcher 侦听器 |
| (Watcher) |
+----------+----------+|v
+----------+----------+
| 更新视图 |
| (Update View) |
+---------------------+
在这个流程图中,有以下几个关键组件:
-
数据对象(Data Object): 这是 Vue.js 中的数据对象,可以是一个 Vue 实例的数据对象,也可以是 Vue 组件中的数据对象。数据对象中的数据发生变化时,需要通知到相关的侦听器。
-
Observer 监听器(Observer): Observer 监听器负责监听数据对象中数据的变化。它通过递归遍历数据对象中的所有属性,并对每个属性使用
Object.defineProperty
方法添加 getter 和 setter,从而实现对数据的监控。 -
Watcher 侦听器(Watcher): Watcher 侦听器是 Vue.js 中的侦听器组件,负责订阅数据对象中的某个属性,并在该属性的值发生变化时执行回调函数。每个 Watcher 侦听器都与一个表达式相关联,当表达式的值发生变化时,Watcher 侦听器会得到通知,并执行相应的回调函数。
-
更新视图(Update View): 更新视图是指当数据对象的某个属性发生变化时,需要更新对应的视图内容。这通常包括重新渲染组件或更新页面中的某个 DOM 元素。
具体流程如下:
-
当数据对象中的某个属性发生变化时,Observer 监听器会检测到变化,并通知相关的 Watcher 侦听器。
-
Watcher 侦听器接收到变化通知后,会执行事先注册的回调函数。这个回调函数可以是更新视图的操作,也可以是其他需要在数据变化时执行的操作。
-
更新视图操作会根据具体情况执行,比如重新渲染组件或更新页面中的某个 DOM 元素,以反映数据变化后的最新状态。
数据变化能够自动更新到视图中
在 Vue 3 中,watch
函数用于监听响应式数据的变化,并在数据发生变化时执行回调函数。下面详细说明 watch
函数的原理、参数及其含义,以及返回结果:
原理
watch
函数的原理是通过创建一个响应式的 watcher(观察者),来监听数据的变化。当被监听的数据发生变化时,watcher 将会执行注册的回调函数。
参数及其含义
watch
函数接受三个参数:
-
要监听的数据(可选): 这是一个可以是响应式数据对象、ref 对象、reactive 对象或计算属性等。当该数据发生变化时,触发监听器执行回调函数。
-
回调函数(必需): 这是当被监听的数据发生变化时需要执行的函数。回调函数接受两个参数:新值(
newValue
)和旧值(oldValue
),分别表示数据变化后的值和变化前的值。 -
选项对象(可选): 这是一个可选的选项对象,用于配置监听器的行为。常见的选项包括:
deep
:是否深度监听对象内部值的变化,默认为false
。immediate
:是否在初始化时立即执行回调函数,默认为false
。flush
:指定 watcher 的触发时机,默认为'pre'
,可选的值有'pre'
(在 DOM 更新之前触发)和'post'
(在 DOM 更新之后触发)。- 等等其他选项,可以根据具体需求进行配置。
返回结果
watch
函数的返回结果是一个取消监听的函数,可以通过调用该函数来停止对数据的监听。如果要停止监听多个数据,可以将返回的函数保存在变量中,然后在需要取消监听时调用它。
示例
下面是一个示例,演示了如何使用 watch
函数:
import { ref, watch } from 'vue';const count = ref(0);// 监听 count 的变化
const stopWatch = watch(count, (newValue, oldValue) => {console.log('Count changed from', oldValue, 'to', newValue);
}, {immediate: true,deep: true
});// 修改 count 的值
count.value = 1; // 输出: "Count changed from 0 to 1"// 停止监听 count 的变化
stopWatch();
在这个示例中,我们使用 watch
函数监听了 count
的变化,当 count
的值发生变化时,会执行回调函数并打印变化前后的值。同时,我们在选项中设置了 immediate: true
,表示在初始化时立即执行回调函数。最后,我们调用返回的函数 stopWatch
来停止对 count
的监听。
reactive, ref响应式
reactive
函数是 Vue 3 中用于创建响应式对象的函数之一。它的作用是将普通的 JavaScript
对象转换为响应式对象,使得对象的属性可以被 Vue 追踪,并在属性发生变化时触发相应的更新。
原理
reactive
函数的原理是通过Proxy 对象来实现的。它会包装传入的普通对象,创建一个代理对象,这个代理对象拦截了对原对象属性的访问、赋值、删除等操作,在这些操作发生时,会通知相关的依赖进行更新。
参数
reactive
函数接受一个普通的 JavaScript 对象作为参数,将其转换为响应式对象。
返回值
reactive
函数的返回值是一个代理对象,这个代理对象拦截了对原对象属性的访问、赋值、删除等操作。
示例
下面是一个使用 reactive
函数创建响应式对象的示例:
import { reactive } from 'vue';const obj = {count: 0
};// 使用 reactive 函数将普通对象转换为响应式对象
const reactiveObj = reactive(obj);// 修改响应式对象的属性
reactiveObj.count++; // 响应式地更新了 count 属性console.log(reactiveObj.count); // 输出: 1
在这个示例中,首先定义了一个普通的 JavaScript 对象 obj
,然后使用 reactive
函数将其转换为响应式对象 reactiveObj
。接着,我们通过修改 reactiveObj
的属性 count
,并在控制台输出结果,可以看到 count
的值被成功更新为 1,这说明 reactive
函数成功地创建了一个响应式对象,并实现了对属性的监听和更新。
ref
函数是 Vue 3 中用于创建响应式引用的函数之一。它的作用是将普通的 JavaScript 值转换为响应式对象,使得这个值可以被 Vue 追踪,并在值发生变化时触发相应的更新。下面是关于 ref
函数的详细说明:
原理
ref
函数的原理是通过一个封装了传入值的响应式对象来实现的。它返回的对象具有一个value
属性,这个value
属性存储着传入的值,并且这个对象上的value
属性是响应式的,当这个属性的值发生变化时,相关的依赖会被触发更新。
参数
ref
函数接受一个普通的 JavaScript 值作为参数,将其转换为响应式引用。
返回值
ref
函数的返回值是一个包含 value
属性的对象,这个 value
属性存储着传入的值,并且是响应式的。
示例
下面是一个使用 ref
函数创建响应式引用的示例:
import { ref } from 'vue';// 使用 ref 函数创建响应式引用
const count = ref(0);// 修改响应式引用的值
count.value++; // 响应式地更新了值console.log(count.value); // 输出: 1
在这个示例中,我们使用 ref
函数创建了一个响应式引用 count
,并初始化其值为 0。然后,我们通过修改 count.value
的值,触发了响应式更新,并在控制台输出结果,可以看到 count.value
的值被成功更新为 1,这说明 ref
函数成功地创建了一个响应式引用,并实现了对值的监听和更新。
对比
reactive
和 ref
是 Vue 3 中常用的两种创建响应式数据的方式,它们各自有着不同的优缺点,适用于不同的场景:
reactive
的优缺点:
优点:
- 适用于复杂对象:
reactive
可以将整个对象转换为响应式对象,适用于对复杂对象进行监听和更新。 - 自动深度响应式:
reactive
会递归地将对象的所有属性转换为响应式,因此在嵌套对象中也能实现深度响应式。 - 直观性: 在处理对象时,
reactive
更符合直觉,因为可以直接操作对象的属性。
缺点:
- 性能开销较大: 对于大型对象或嵌套层级较深的对象,
reactive
的性能开销较大,因为它需要递归地追踪所有属性的变化。 - 不适合基本类型:
reactive
更适用于对象类型,对于基本类型的数据并不是最佳选择。
ref
的优缺点:
优点:
- 性能优化:
ref
只会追踪基本类型数据或简单对象的变化,因此性能开销相对较小。 - 直接访问值: 使用
ref
创建的对象,直接访问值更加方便,不需要通过.value
来获取值。 - 更灵活: 可以在需要时将普通的 JavaScript 值转换为响应式值,非常灵活。
缺点:
- 不支持深度监听:
ref
不支持深度监听,只能追踪其value
属性的变化,对于嵌套对象的监听需要额外处理。 - 不适用于复杂对象: 对于复杂的对象结构,
ref
并不直观,也不方便进行监听和更新。
总结:
- 如果需要监听复杂对象或嵌套对象的变化,并且不在意性能开销,可以选择使用
reactive
。 - 如果需要更轻量级的响应式数据,并且关注性能优化,可以选择使用
ref
。 - 在实际开发中,根据具体的需求和场景来选择合适的响应式方式,有时也会同时使用
reactive
和ref
来达到最佳效果。
计算属性computed
计算属性声明成一个方法, 实际是这个方法的返回值
computed
函数是 Vue.js
中一个非常重要的概念,它用于声明计算属性。计算属性是基于响应式依赖进行缓存的,只有在依赖发生变化时才会重新计算。
原理:
-
依赖追踪: 当组件渲染时,Vue 会执行
computed
函数,并在执行过程中访问所依赖的响应式属性或其他计算属性。Vue 会在内部追踪这些依赖关系。 -
缓存计算结果: Vue 会将计算属性的结果缓存起来,只有当其依赖发生变化时才会重新计算。这样可以确保在多次访问同一个计算属性时,只进行一次计算,提高性能。
-
响应式更新: 如果计算属性依赖的响应式属性发生变化,Vue 会自动重新计算计算属性的值,并触发相应的更新操作,确保视图与数据保持同步。
参数及含义:
computed
函数接收一个对象作为参数,对象的每个键值对都表示一个计算属性的定义,其中:
- 键(key): 计算属性的名称。
- 值(value): 计算属性的定义,可以是一个函数或包含
get
和set
方法的对象。
如果值是一个函数,则该函数会被当作计算属性的 getter 方法。如果需要设置计算属性的值,可以通过定义 set
方法来实现。
返回结果:
计算属性的返回结果是根据其定义的 getter 函数或 get
方法计算得出的值。这个值会被缓存起来,并在其依赖发生变化时更新。计算属性的返回结果可以直接在模板中使用,就像普通的属性一样。
总的来说,computed
函数的原理是基于响应式依赖进行缓存的,参数包括计算属性的名称和定义,返回结果是根据定义计算得出的值。通过计算属性,我们可以方便地定义复杂的逻辑,并确保在需要时进行自动更新。
假设我们有一个 Vue 组件,其中包含一个计算属性来计算商品的总价,计算属性依赖于商品的价格和数量。下面是一个基本的示例代码:
<template><div><h2>商品信息</h2><p>商品名称:{{ productName }}</p><p>单价:{{ price }}</p><p>数量:<input type="number" v-model="quantity"></p><p>总价:{{ totalPrice }}</p></div>
</template><script>
export default {data() {return {productName: '手机',price: 1000, // 单价quantity: 1, // 数量};},computed: {// 计算商品总价totalPrice() {return this.price * this.quantity;},},
};
</script>
在上面的示例中,我们定义了一个 totalPrice
计算属性,它通过 price
和 quantity
计算出商品的总价。当 price
或 quantity
发生变化时,totalPrice
会自动重新计算,并更新到视图中。
这个示例展示了 computed
函数的使用方式:定义一个计算属性,然后通过 getter 方法来计算属性的值。在模板中,我们可以直接使用计算属性的名称来获取其值,而不需要手动调用计算方法。
这样,Vue 会在内部自动追踪依赖关系,并确保在依赖发生变化时,及时更新计算属性的值。这种方式能够简化代码,并提高性能。
Vite
简单的类比,Vite相当于Maven或者Vue Cli可以快速的生成一个项目脚手架,并引入部分基础依赖
Vite(法语意为 “快速的”,发音 /vit/,发音同
“veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
Vite 是一个基于 Rollup 和浏览器原生 ES 模块支持的快速开发服务器,用于构建现代 Web 应用。它提供了一组命令行工具来帮助你初始化、开发、构建和测试你的项目。以下是 Vite 的常用命令及其参数、含义和作用:
1. vite init
-
参数:
<app-name>
:要创建的项目名称。--template <template-name>
:指定项目模板,默认为vue
,可选的模板有vue
、vue-ts
、react
、react-ts
、preact
、lit-element
、svelte
、vanilla
。--force
:强制在非空目录中创建项目。
-
含义: 初始化一个新的 Vite 项目。
2. vite dev
-
参数:
- 无
-
含义: 启动开发服务器,用于开发模式下的实时预览和热模块替换。
3. vite build
-
参数:
--base <path>
:指定构建输出的基础路径,默认为/
。--outDir <dir>
:指定构建输出的目录,默认为dist
。--assetsDir <dir>
:指定构建输出的静态资源目录,默认为_assets
。--assetsInlineLimit <num>
:指定是否将小于指定大小的静态资源内联,默认为4096
字节。--sourcemap
:是否生成 source map,默认为false
。
-
含义: 打包生产环境的项目代码,生成优化过的静态资源文件。
4. vite serve
-
参数:
- 无
-
含义: 启动生产服务器,用于在本地预览生产环境构建的应用。
5. vite preview
-
参数:
- 无
-
含义: 在生产环境下预览应用。
6. vite inspect
-
参数:
- 无
-
含义: 查看 Vite 配置的内部信息。
7. vite optimize
-
参数:
- 无
-
含义: 优化项目的构建输出。
这些是 Vite 常用的命令及其参数、含义和作用。通过这些命令,你可以方便地进行项目初始化、开发、构建和测试。
Vite项目
Vite 项目通常具有以下目录结构:
my-vite-project/
├── node_modules/ # 依赖的 Node.js 模块
├── public/ # 公共静态资源
│ ├── favicon.ico # 网站图标
├── src/ # 项目源代码
│ ├── assets/ # 静态资源文件(图片、字体等)
│ ├── components/ # 组件文件
│ ├── App.vue # 根组件
│ └── main.js # 项目入口文件
|—— index.html # 入口html文件
├── .gitignore # Git 忽略文件配置
├── package.json # 项目配置文件
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明文档
下面是各部分的作用:
-
node_modules/
:存放项目依赖的 Node.js 模块,通常使用 npm 或者 Yarn 等包管理工具进行安装。 -
public/
:存放公共静态资源文件,如网站图标(favicon.ico
)。这里的内容会被直接复制到最终构建的输出目录中。 -
src/
:存放项目的源代码文件。assets/
:存放静态资源文件,如图片、字体等。components/
:存放 Vue 组件文件。App.vue
:根组件,是整个 Vue 应用的入口组件。main.js
:项目的入口文件,用于初始化 Vue 应用,并挂载根组件到 DOM 中。
-
.gitignore
:Git 忽略文件配置,指定哪些文件或目录不应纳入版本控制。 -
package.json
:项目配置文件,包含项目的元数据(如名称、版本号、作者等)以及项目依赖的 Node.js 模块列表。 -
vite.config.js
:Vite 的配置文件,用于配置构建、开发服务器等选项。 -
README.md
:项目说明文档,通常包含项目的简要介绍、使用方法、贡献指南等信息。
Vite 项目是如何运行起来的呢?
-
当执行
vite dev
命令时,Vite 会读取项目中的vite.config.js
文件,并根据配置启动开发服务器。 -
开发服务器会监听文件变化,当文件发生变化时,会重新构建相关的模块,并通过浏览器的热模块替换功能实时更新页面。
-
当执行
vite build
命令时,Vite 会读取项目中的vite.config.js
文件,并根据配置进行项目的打包构建。 -
构建完成后,Vite 会生成优化过的静态资源文件,并将其输出到指定的输出目录中,供部署到生产环境使用。
通过以上步骤,Vite 项目就可以成功运行起来,并且可以在开发和生产环境中高效地构建和运行。
运行流程
npm run dev之后,vite会依据main.js中的逻辑,执行一系列初始化操作,最终会将各种组件渲染到index.html页面上
自定义组件
在企业级项目中,不再以视图作为单元,而是组件
需要将操作,数据和视图都封装成一个组件,可以在项目的其他地方调用
全局注册组件
组件需要先注册才能够使用
通过全家注册,就能在任意位置使用组件了
要在 Vue.js 中全局注册组件,你可以在项目的入口文件(通常是main.js
)或者在一个单独的文件中注册组件,然后在入口文件中引入这个文件。
以下是在入口文件中全局注册组件的示例:
// main.jsimport Vue from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue'; // 引入要注册的组件Vue.component('my-component', MyComponent); // 全局注册组件,可以使用 <my-component> 标签new Vue({render: h => h(App),
}).$mount('#app');
在上面的例子中,我们先引入了要注册的组件 MyComponent.vue
,然后使用 Vue.component
方法将其全局注册为 my-component
组件。这样在整个应用中就可以直接使用 <my-component>
标签来引用这个组件了。
另外,如果你希望在单独的文件中注册组件,可以按照以下步骤进行:
-
创建一个新的文件,比如
globalComponents.js
。 -
在这个文件中注册组件并导出:
// globalComponents.jsimport Vue from 'vue'; import MyComponent from './components/MyComponent.vue';Vue.component('my-component', MyComponent);
-
在入口文件中引入这个文件即可:
// main.jsimport Vue from 'vue'; import App from './App.vue'; import './globalComponents'; // 引入全局组件注册文件new Vue({render: h => h(App), }).$mount('#app');
这样就可以在 Vue.js 中全局注册组件了。
props
将组件类比成方法,那么props就是传入方法的参数
在 Vue.js 中,props
是用于父组件向子组件传递数据的一种机制。它允许父组件通过属性的形式向子组件传递数据,子组件可以接收并在其内部使用这些数据。以下是关于props
的详细说明:
原理
当父组件向子组件传递数据时,可以通过在子组件的标签上使用属性的形式传递数据。子组件通过在自己的选项中定义 props
属性,来接收传递过来的数据。
作用
- 在父子组件之间传递数据。
- 实现组件的可复用性,使得组件可以接受不同的数据,从而达到灵活配置的目的。
使用方法
-
在子组件中通过
props
属性定义接收的数据:// ChildComponent.vue<script> export default {props: {message: String, // 接收一个名为 message 的 String 类型的 propcount: {type: Number, // 接收一个名为 count 的 Number 类型的 propdefault: 0, // 默认值为 0},items: { // 接收一个名为 items 的 Array 类型的 proptype: Array,required: true, // 必传 prop},},// 组件逻辑... } </script>
-
在父组件中通过子组件的标签属性传递数据:
<!-- ParentComponent.vue --><template><div><child-component :message="parentMessage" :count="parentCount" :items="parentItems" /></div> </template><script> import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {parentMessage: 'Hello from parent',parentCount: 10,parentItems: ['item1', 'item2', 'item3'],};}, }; </script>
代码示例
下面是一个简单的例子,演示了如何在父组件中向子组件传递数据:
<!-- ParentComponent.vue --><template><div><child-component :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {parentMessage: 'Hello from parent',};},
};
</script>
<!-- ChildComponent.vue --><template><div><p>{{ message }}</p></div>
</template><script>
export default {props: {message: String,},
};
</script>
在这个例子中,父组件 ParentComponent
中定义了一个 parentMessage
数据,并通过 child-component
标签的 message
属性向子组件传递了这个数据。子组件 ChildComponent
中通过 props
接收并使用了这个数据,最终渲染到页面上。
相关文章:
Vue关键知识点
watch侦听器 Vue.js 中的侦听器(Watcher)是 Vue提供的一种响应式系统的核心机制之一。 监听数据的变化,并在数据发生变化时执行相应的回调函数。 目的:数据变化能够自动更新到视图中 原理: Vue 的侦听器通过观察对象的属性&#…...
Prometheus+grafana环境搭建redis(docker+二进制两种方式安装)(四)
由于所有组件写一篇幅过长,所以每个组件分一篇方便查看,前三篇 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabbitmq(docker二进制两种方式安装)(二)-CSDN博客 Prometheusgrafana环境搭建m…...
宝塔面板安装nginx流媒体服务器(http-flv)
前文介绍了使用nginx搭建流媒体服务器,实现了hls切片方式播放,不过延迟较长。本文采用nginx搭建支持http-flv方式的流媒体服务器,用以测试期性能。 目录 一、服务器操作系统安装 二、在控制台安装宝塔面板...
LNMP环境:揭秘负载均衡与高可用性设计
lb1: 192.168.8.5 lb2: 192.168.8.6 web1:192.168.8.7 web2:192.168.8.8 php-fpm: 192.168.8.9 mysql: 192.168.8.10 nfs:192.168.8.11 分别插入镜像 8.5-8.8 分别安装nginx,并设置启动 8.9 安装php 8.10 安装mysql 先配置一台web服务器然后同步 设置网站根目录 cp -…...
深入理解Java异常处理机制(day20)
异常处理 异常处理是程序运行过程产生的异常情况进行恰当的处理技术 在计算机编程里面,异常的情况比所我们所想的异常情况还要多。 Java里面有两种异常处理方式; 1.利用trycatchfinaly语句处理异常,优点是分开了处理异常代码和程序正常代码…...
Docker实战教程 第1章 Linux快速入门
2-1 Linux介绍 为什么要学Linux 三个不得不学习 课程需要:Docker开发最好在Linux环境下。 开发需要:作为一个后端程序员,是必须要掌握Linux的,这是找工作的基础门槛。 运维需要:在服务器端,主流的大型服…...
java数据结构与算法刷题-----LeetCode172. 阶乘后的零
java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 数学:阶乘的10因子个数数学优化:思路转变为求5的倍数…...
掌握数据相关性新利器:基于R、Python的Copula变量相关性分析及AI大模型应用探索
在工程、水文和金融等各学科的研究中,总是会遇到很多变量,研究这些相互纠缠的变量间的相关关系是各学科的研究的重点。虽然皮尔逊相关、秩相关等相关系数提供了变量间相关关系的粗略结果,但这些系数都存在着无法克服的困难。例如,…...
Centos7环境下安装MySQL8详细教程
1、下载mysql安装包 下载哪个版本,首先需要确定一下系统的glibc版本,使用如下命令: rpm -qa | grep glibc 2、检查是否安装过mysql ps:因为以前用yum安装过,所以先用yum卸载。如果不是此方式或者没安装过则跳过…...
趣学前端 | 综合一波CSS选择器的用法
背景 最近睡前习惯翻会书,重温了《HTML5与CSS 3权威指南》。这本书,分上下两册,之前读完了上册,下册基本没翻过。为了对得起花过的每一分钱,决定拾起来近期读一读。 CSS 选择器 在CSS3中,提倡使用选择器…...
数据库 06-04 恢复
01 一.事务故障 二.系统 三.磁盘 02. 重点是稳定存储器 组成...
基于MPPT的风力机发电系统simulink建模与仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1风能与风力发电机模型 4.2风力机功率特性与最大功率点 4.3 MPPT 5.完整工程文件 1.课题概述 基于MPPT的风力机发电系统simulink建模与仿真。MPPT使用S函数编写实现。基于最大功率点跟踪(…...
GD32F30x IO 复用问题
1.PE9 复用PWM 引脚 需要使能 gpio_pin_remap_config(GPIO_TIMER0_FULL_REMAP,ENABLE);...
BPMNJS 在原生HTML中的引入与使用
BPMNJS 在HTML中的引入与使用 在网上看到的大多是基于vue使用BPMN的示例或者教程,竟然没有在HTML使用的示例,有也是很简单的介绍核心库的引入和使用,并没有涉及到扩展库。于是简单看了下,真的是一波三折,坎坎坷坷。不…...
HarmonyOS 应用开发之通过数据管理服务实现数据共享静默访问
场景介绍 典型跨应用访问数据的用户场景下,数据提供方会存在多次被拉起的情况。 为了降低数据提供方拉起次数,提高访问速度,OpenHarmony提供了一种不拉起数据提供方直接访问数据库的方式,即静默数据访问。 静默数据访问通过数据…...
ubuntu强密码支持
接到新需求,欧盟需要ubuntu使用强密码,网络上找到一个包可以增加ubuntu密码增强机制,以下是调试过程。 sudo apt-get install libpam-pwquality 然后,编辑位于/etc/pam.d/目录中的common-password文件: sudo vim /et…...
C语言中文分词 Friso的使用教程
Friso是使用C语言开发的一款高性能中文分词器,使用流行的mmseg算法实现。完全基于模块化设计和实现,可以很方便的植入到其他程序中,例如:MySQL,PHP等。同时支持对UTF-8/GBK编码的切分。 官方地址:https://…...
MySQL中drop、truncate和delete的区别
✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏:每天一个知识点 ✨特色专栏:…...
Deep Image Prior
自监督的开创性工作 从简单分布到复杂分布的映射,本质上是将重建限制到某一流形,在流形上通过观测图像的数据保真项作为监督。 称之为先验也是很准确,流形就是先验。 这个扰动也很关键,本质上一个平滑正则项。直观理解是各种扰动…...
leetcode148. 排序链表
方法1:插入方法进行改进 class Solution {public ListNode sortList(ListNode head) {/*想法:设置两个指针first,last分别指向当前有序子链表的头和尾节点;并遍历链表,当遍历到的节点值大于last的值时,就将该节点插入到有序子链表…...
【深度学习环境配置】一文弄懂cuda,cudnn,NVIDIA Driver version,cudatoolkit的关系
【深度学习环境配置】一文弄懂cuda,cuDNN,NVIDIA Driver version,cudatoolkit的关系 NVIDIA Driver version(NVIDIA驱动程序)CUDAcuDNNcudatoolkit深度学习环境配置顺序 今天突然发现配置的环境有些问题,意…...
C语言中的字符与字符串:魔法般的函数探险
前言 在C语言的世界里,字符和字符串是两个不可或缺的元素,它们像是魔法般的存在,让文字与代码交织出无限可能。而在这个世界里,有一批特殊的函数,它们如同探险家,引领我们深入字符与字符串的秘境࿰…...
【JAVASE】带你了解面向对象三大特性之一(继承)
✅作者简介:大家好,我是橘橙黄又青,一个想要与大家共同进步的男人😉😉 🍎个人主页:再无B~U~G-CSDN博客 1.继承 1.1 为什么需要继承 Java 中使用类对现实世界中实体来…...
Git 如何去使用
目录 1. Git暂存区的使用 1.1. 暂存区的作用 1.2. 暂存区覆盖工作区(注意:完全确认覆盖时使用) 1.3. 暂存区移除文件 1.4. 练习 2. Git回退版本 2.1. 概念 2.2. 查看提交历史 2.3. 回退命令 2.4. 注意 3. Git删除文件 3.1. 需求 …...
C语言 | Leetcode C语言题解之第12题整数转罗马数字
题目: 题解: const char* thousands[] {"", "M", "MM", "MMM"}; const char* hundreds[] {"", "C", "CC", "CCC", "CD", "D", "DC"…...
【软件工程】测试规格
1. 引言 1.1简介 本次的测试用例是基于核心代码基本开发完毕,在第一代系统基本正常运行后编写的,主要目的是为了后续开发与维护的便利性。 该文档主要受众为该系统后续开发人员,并且在阅读此文档前最后先阅读本系统的需求文档、概要设计文…...
Nginx中间件服务:负载均衡(调度算法)
文章目录 引言I 原理1.1 后端服务器在负载均衡调度中的状态1.2 调度算法II upstreamd的应用2.1 加权负载均衡的服务器列表2.2 AB测试中使用upstream切分流量2.3 基于URL的HASH2.4 IP_HASHsee also引言 作用 转发功能:按照一定的调度算法(轮询、权重)将客户端发来的请求转发…...
dm8数据迁移工具DTS
dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持: ◆ 主流大型数据库Oracle、SQLServer、MyS…...
【QT教程】QML与C++的交互
主页 软件开发 QT6 QML高级编程补天云火鸟自动化创作平台您能够创建大约3000 个短视频一天可以轻松创建多达 100 个视频 QML与C的交互 使用AI技术辅助生成 【QT免费公开课】您可以到这里观看大量的QT视频课程 【QT付费视频课程】QT QML C 高级扩展开发 目录 1 QML与C的交互…...
idea maven 打包 内存溢出 报 GC overhead limit exceeded -> [Help 1]
idea 使用maven打包 报GC overhead limit exceeded -> [Help 1] 解决方法: 打开settings -> 点开如同所示 将 vm Options 参数 设为 -Xmx8g...
泰安做网站/英语培训
什么是协程 对于进程、线程,都是有内核进行调度,有CPU时间片的概念,进行抢占式调度。协程,又称微线程,纤程。英文名Coroutine。协程的调用有点类似子程序,如程序A调用了子程序B,子程序B调用了子…...
后台模板链接前台网站/网站优化关键词排名
一、yum介绍将所有的rpm软件包放到指定服务器上,当进行yum在线安装时,可以自动解决依赖性问题。yum配置文件常位于/etc/yum.repo.d 目录下[rootaaa251 ~]# cd /etc/yum.repos.d/[rootaaa251 yum.repos.d]# ll总用量 32-rw-r--r--. 1 root root 1664 9月 …...
wordpress 推广 插件/杯子软文营销300字
java中日期时间类 1、Date类 java.util 包提供了 Date 类来封装当前的日期和时间。 Date 类提供两个构造函数来实例化 Date 对象。 第一个构造函数使用当前日期和时间来初始化对象。 Date() 第二个构造函数接受一个参数,该参数是从1970年1月1日起的…...
做网站都需要什么步骤/免费建网站软件下载
前言闲来无事,花几天功夫将之前项目里用到的一个数据访问层整理了出来。实现单个实体的增删改查,可执行存储过程,可输出返回参数,查询结果集可根据实际情况返回DataTable、DataSet和强类型,同时支持不同类型数据库。目…...
婚礼婚庆网站建设需求分析/百度店铺
错误代码:SELECT列表1055表达式#1是不是在GROUP BY子句中包含非聚合列这并不功能依赖于GROUP BY子句中的列; 这是不符合的SQL_MODE ONLY_FULL_GROUP_BY 我试图查询一个复杂的SQL查询与联接,团体等,并升级MySQL后组停止工作。 为了…...
wordpress title背景/竞价推广托管公司介绍
Clickhouse—实用工具obfuscator 其实前面我们已经介绍过Clickhouse的众多实用工具了,为什么我们还要单独介绍obfuscator 呢,其实原因很简单那就是前面的实用工具都太常见了,以至于我们在其他数据库或者其他数据组件都见到过,但是obfuscator 我们却很少见,这就是为什么要…...