【vue3学习P5-P10】vue3语法；vue响应式实现

news2024/11/29 8:54:08

0、vue2和vue3对比

框架版本API方式双向绑定原理domFragmentsTree-Shaking
vue2选项式API（Options API）基于Object.defineProperty（监听）实现，不能双向绑定对象类型的数据【通过Object.defineProperty里面的set和get做对象劫持，在处理数组等对象类型数据时，则是重写原型方法（push、pop等方法可以被监听）】每次更新diff，都是全量对比<template>标签里面只能有一个根节点<div>标签import语法引用组件：import xxx from xxx
vue3组合式API（Composition API）基于Proxy（劫持）实现，能够双向绑定对象类型的数据只对比有标记的，对标记部分进行更新（大大减少静态内容的对比消耗，动态内容是{{}}双向绑定的内容）<template>标签里面支持多个根节点<div>标签（实现原理：通过虚拟节点实现）import语法引用组件时，将全局API分块，不使用的功能不会出现在基础包中，减少打包体积：import {aaa} from xxx
0.1 vue3新特性：
  • 重写双向数据绑定
  • VDOM性能瓶颈
  • Fragments：增加了Suspense teleport和多v-model用法
  • Tree-Shaking的支持：在保持代码运行结果不变的情况下，去除无用的代码
  • 组合式API（Composition API）
  • setup语法糖
0.2 vue3的三种书写风格
  • Options API
  • setup
  • setup 语法糖
// 第一种书写风格：Options API
<template>
</template>

<script>
export default{
	data() {
		return{
			// 数据
		}
	},
	methods: {}
}
</script>

<style>
</style>

// 第二种书写风格setup
<template>
	<div>
		{{a}}
	</div>
</template>

<script>
setup() {
	const a = 1

	// 变量需要手动return才能在dom中使用
	return{
		a
	}
}
</script>

<style>
</style>

// 第三种书写风格setup语法糖（后+lang选择使用是js语言）
<template>
	<div>
		{{a}}
	</div>
</template>

<script setup lang="ts">
const a:number = 1
</script>

<style>
</style>

1、vue语法

vue语法：

  • 插值语法：{{}}
  • 指令语法：v-
1.1 插值语法
<template>
	<div>
		<p>{{data}}</p>
	</div>
</template>

<script setup lang="ts">
const data = {
	name: '张三',
	age: 30,
	like: '吃饭'
}
</script>

<style scoped>
</style>
1.2 vue指令

v-开头的都是vue内置指令
v-text 用来显示文本
v-html 用来展示富文本（支持标签，如<span>xxx</span>，不支持组件，如<组件名>xxx</组件名>）
v-if 用来控制元素的显示隐藏（切换真假DOM，false时注释掉dom节点）
v-else-if 表示 v-if 的v-else-if 可以链式调用
v-else v-if条件收尾语句
v-show 用来控制元素的显示隐藏（false时将节点设置不可见，display:none block Css切换，性能比v-if高）
v-on 简写@ 用来给元素添加/绑定事件（v-on:click语法糖简写@click）
v-bind 简写:用来绑定元素的属性Attr（v-bind:id语法糖简写:id）
v-model 双向绑定
v-for 用来遍历元素
v-on 修饰符 冒泡案例
v-once 性能优化只渲染一次
v-memo 性能优化会有缓存

1.2.1 点击事件：动态事件类型切换
// 动态事件切换
<template>
	// 静态事件
	<button @click="clickBtn">按钮点击</button>
	// 动态事件（动态事件切换）
	<button @[event]="clickBtn">按钮点击</button>
	
</template>

<script>
// const event = "click" // @[event]等于@click
const event = "doubleClick" // @[event]等于@doubleClick
const clickBtn = ()=>{
	console.log("点击按钮了……")
}
</script>
1.2.2 点击事件：阻止点击冒泡

点击冒泡：当父级节点和子级节点都有点击事件时，点击子级节点也会触发父级节点的点击事件

// 动态事件切换
<template>
	<div @click="parentClick">
		<button @[event].stop="clickBtn">按钮点击</button>
	</div>
</template>

<script>
const parentClick = ()=>{
	console.log("点击了父级")
}
// const event = "click" // @[event]等于@click
const event = "doubleClick" // @[event]等于@doubleClick
const clickBtn = ()=>{
	console.log("点击按钮了……")
}
</script>

在这里插入图片描述

属性作用
@[event].stop阻止点击冒泡（触发父级节点的点击事件），但是：对单击事件有效，对双击事件无效
@[event].prevent阻止提交表单
@[event].once只触发一次，后面再点击多少次都不会触发
@[event].capture
@[event].middle
@[event].left
@[event].right
@[event].passive
@[event].self
1.2.3 v-bind 绑定元素属性

绑定id、class、style……

<template>
	<div :id="id">
		<p :style="style">段落段落段落</p>
		<button :class="['a', 'b']" @click.middle="clickBtn()">子1按钮</button>
		<button :class="['a']" @[event].passive="clickBtn()">子2按钮</button>
	</div>
</template>

<script setup>
// 事件
const event = "click" // @[event]等于@click
const clickBtn = ()=>{
	console.log("点击按钮了……")
}

// 属性
const id = "myid"
const style = {
	color: 'green',
	border: '1px solid green'
}
</script>

<style scoped>
#myid{
	background-color: #ccc;
}
.a{
	background-color: blue;
}
.b{
	color: red;
}
</style>
1.2.4 v-model 绑定表单元素（ref，响应式，双向绑定）

响应式的数据：双向绑定（通过ref和reactive）
v-model can only be used on <input>, <textarea> and <select> elements.

<template>
	<div>
		<input v-model="data" type="text"/>
		<p>{{data}}</p>
	</div>
</template>

<script setup>
import {ref} from 'vue'

// 双向绑定（通过ref和reactive）
const data = ref('测试内容')
</script>

<style scoped>
</style>

在这里插入图片描述
在这里插入图片描述

1.2.5 v-once 单次渲染【基本数据类型】（待完善）

v-once：仅渲染元素和组件一次，并跳过之后的更新
在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过染。这可以用来优化更新时的性能。

<template>
	<div>
		<!-- 基本数据类型 -->
		<input v-model="msg" type="text"/>
		<!-- 对照组 -->
		<p>对照组 {{msg}}</p>
		<hr />
		<!-- v-once 实验组 -->
		<!-- 单个元素 -->
		<p v-once>This will never change:{{msg}}</p>
		<!-- 带有子元素的元素 -->
		<div v-once>
			<h1>comment</h1>
			<p>{{msg}}</p>
		</div>
		
		<!-- 待完善 -->
		<!-- 组件 -->
		<!-- <A v-once :comment="msg" /> -->
		<!-- v-for指令 -->
		<ul><li v-for="i in list" v-once>{{i}}</li></ul>
	</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
// import A from 'A.vue' // 报错
// import B from 'B.vue'

const msg = ref('测试内容')
const list:string[] = ['春', '夏', '秋', '东']
</script>

<style scoped>
</style>

在这里插入图片描述
在这里插入图片描述

1.2.6 v-memo 单次渲染【数组】（待完善）
<template>
	<div>
		<!-- v-memo 处理对象数据类型 -->
		<!-- v-for指令 -->
		<p v-for="(item, index) in list">对照组 {{index}}--{{item}}</p>
		<hr />
		<p v-for="(item, index) in list" v-memo="index == 2">v-memo组 {{index}}--{{item}}</p>
		<!-- 组件 -->
		<!-- <A v-once :comment="msg" /> -->
	</div>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'
// import A from 'A.vue'
// import B from 'B.vue'

const msg = ref('测试内容')
let list = ref(['春', '夏', '秋', '冬'])

// 模拟异步更新
// 定时刷新数据函数-----------还没有写出来，报错
const timer = ref(0)
const index = ref(0)
let count = 1
let list = computed({
	get() {
		
	},
	set(newVal) {
		console.log("count: ", count++)
		list = ['赵', '钱', '孙', '李']
		console.log(list)
	}
})
// setTimeout(changeData, 3000)
// setTimeout(changeData, 3000)
// setTimeout(changeData, 3000)
// setInterval(changeData, 3000)


</script>

<style scoped>
</style>
1.2.7 v-for 遍历
<template>
	<div>
		<input v-for="(item, index) in data" type="text" value="item"/>
		<p :key="index" v-for="(item, index) in data">{{index}}--{{item}}</p>
	</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const data:string[] = ['春', '夏', '秋', '东']
</script>

<style scoped>
</style>

在这里插入图片描述
从生成的dom结构来看，使用v-for的标签效果是：循环生成多个完整标签内容（标签+样式+数据），而不仅仅是生成“一个完整标签+多条数据”

2、虚拟dom和diff算法

虚拟DOM就是通过JS来生成一个AST节点树（抽象语法树）

vue3的diff算法：分为三类

  • 无key（三步）
    在这里插入图片描述
  • 有key（五步）
  • 在这里插入图片描述
  • 前序+尾序
  • 乱序（最长递增子序列）
  • 在这里插入图片描述
    在这里插入图片描述

3、Ref 全家桶

  • ref：深层次响应式
  • shallowRef：浅层次响应式
  • isRef：判断是否是ref对象，返回值true或false
  • triggerRef：强制视图更新
  • customRef：自定义ref
3.1 响应式：ref 、shallowRef、triggerRef 或 reactive

（1）非响应式：修改data之后，页面数据不更新

<template>
	<div>
		<p>{{data}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
let data = {name: "张三"}
const clickBtn = ()=>{
	data.name = "李四"
	console.log(data)
}
</script>

在这里插入图片描述
（2）响应式（利用ref双向绑定）：修改data之后，页面数据也更新

<template>
	<div>
		<p>{{data}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'	
let data = ref({name: "张三"}) // 使用ref
const clickBtn = ()=>{
	data.value.name = "李四" // 通过value更新
	console.log(data)
}
</script>

编辑器报错，但能用（不知道HBuilderX为什么报错，B站老师的vscode就没有报错）
在这里插入图片描述
在这里插入图片描述
（3）响应式：shallowRef

<template>
	<div>
		<p>{{data1}}</p>
		<p>{{data2}}</p>
		<button @click="clickBtn1()">修改（Ref）</button>
		<button @click="clickBtn2()">修改（shallowRef）</button>
	</div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

let data1 = ref({name: "张三"})
let data2 = ref({name: "张三三"})
const clickBtn1 = ()=>{
	data1.value.name = "李四" // value.name = 
	console.log(data1)
}
const clickBtn2 = ()=>{
	data2.value = {name: "李四四"} // value = 
	console.log(data2)
}
</script>
3.2 ref、shallowRef、triggerRef

ref、shallowRef 不能同时使用（在一个事件中），shallowRef 会被影响，即使写成xxx.value.name=xxx也会被改变，造成页面（视图）的更新
在这里插入图片描述
triggerRef 强制更新，shallowRef 会被影响，由于 ref 底层调用了 triggerRef，所以 ref、shallowRef 同时使用时 shallowRef 会被影响
在这里插入图片描述

3.3 customRef（自定义ref）
<template>
	<div>
		<p>customRef: {{obj}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {customRef} from 'vue'

function MyRef(value){
	let timer = null
	return customRef((track,trigger)=>{
		return{
			get(){
				track()
				return value
			},
			set(newValue){
				// 不防抖，每次点击clickBtn都会触发（然而实际上只更新一次，因为clickBtn中修改每次都是同一个值，并不是变化的）
				// console.log("触发了")
				// value = newValue
				// trigger()
				// 防抖
				clearTimeout(timer)
				timer = setTimeout(()=>{
					console.log("触发了")
					value = newValue
					timer = null
					trigger()
				}, 3000)
			}
		}
	})
}

const obj = MyRef("王五")

const clickBtn = ()=>{
	obj.value = "修改了"
	console.log(obj)
}
</script>

在这里插入图片描述

3.5 reactive【绑定表单场景中使用较多（？）】

ref、reactive 区别：

  • ref 支持所有数据类型，reactive 支持引用类型数据Array、Object、Map、Set）
  • ref 取值、赋值都需要加上.value，reactive 不用

基础版例子

<template>
	<div>
		<p>reactive: {{form}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

type M = {
	name: string,
	age: number
}
let form = reactive<M>({
	name: "张三",
	age: 30
})

const clickBtn = ()=>{
	form.name = "李四"
	form.age = 31
	console.log(form)
}
</script>

在这里插入图片描述
reactive 绑定数组，响应式更新视图

<template>
	<div>
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
		<button @click="clickBtn()">添加</button>
	</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

// let list = [] // 非响应式，不会更新视图
let list = reactive([]) // 响应式，动态更新视图
// let list = reactive<string []>([]) // 添加泛型（字符串数组类型）

const clickBtn = ()=>{
	list.push("item")
	console.log(list)
}
</script>

在这里插入图片描述
异步请求场景模拟，不破坏响应式的数据更新方式示例。解决方案：数组+push+解构

<template>
	<div>
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
		<button @click="clickBtn()">添加</button>
	</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

// let list = [] // 非响应式，不会更新视图
let list = reactive([]) // 响应式，动态更新视图
// let list = reactive<string []>([]) // 添加泛型（字符串数组类型）

// 模拟异步请求，更新数据
const clickBtn = ()=>{
	setTimeout(()=>{
		const res = ['one', 'two', 'three'] // 模拟后端返回数据
		// list = res // 这样赋值，list数据能更新，但是页面视图不会更新
		// 因为reactive是Proxy代理的对象，直接赋值会覆盖代理对象，破坏响应式方案
		// 解决方案
		list.push(...res) // 数组解构
		console.log(list)
	}, 300)
}
</script>

在这里插入图片描述
解决方案二：对象+数组作为对象的一个属性+直接修改对象的数组属性

<template>
	<div>
		<ul>
			<li v-for="item in list.arr">{{item}}</li>
		</ul>
		<button @click="clickBtn()">添加</button>
	</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'

// 对象+
let list = reactive<{arr:string[]}>({
	arr: []
}) // 响应式，动态更新视图

// 模拟异步请求，更新数据
const clickBtn = ()=>{
	setTimeout(()=>{
		const res = ['one', 'two', 'three'] // 模拟后端返回数据
		// list = res // 这样赋值，list数据能更新，但是页面视图不会更新
		// 因为reactive是Proxy代理的对象，直接赋值会覆盖代理对象，破坏响应式方案
		// 解决方案
		list.arr = res
		console.log(list)
	}, 300)
}
</script>

在这里插入图片描述

3.6 readonly

把 reactive 的值变成只读
但是 readonly 会受原始变量更新的影响

<script setup lang="ts">
import {reactive} from 'vue'

let obj = reactive({name: '张三'})
let obj_read = readonly(obj)
// 不能修改只读属性的值
obj_read.name = '李四' // 编译报错：obj_read 是只读属性
// 能修改原始变量的值
obj.name = '李四'
// 这里，打印 obj、obj_read，发现都会变成'李四'（readonly 会受原始变量更新的影响）
</script>

在这里插入图片描述

3.7 shallowReactive
<template>
	<div>
		<p>{{obj}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {reactive, shallowReactive} from 'vue'

let obj:any = shallowReactive({
	foo: { // 外层
		bar: { // 二层
			name: '张三' // 三层
		}
	}
})
const clickBtn = ()=>{
	console.log("点击了")
	// 修改外层【正确修改】
	obj.foo = {
		barChange: '李四'
	}
	// 【错误修改】
	// 修改二层
	// obj.foo.bar = {
	// 	nameChange: '赵六' // 非响应式
	// }
	// obj.foo.bar.value = {
	// 	nameChange: '赵六' // 追加元素
	// }
	// 修改最内层（三层）
	// obj.foo.bar.name = '李四' // 非响应式，页面视图不更新
	// 修改obj
	// obj = { // 非响应式，页面视图不更新
	// 	fooChange: '王五'
	// }
	// obj.value = { // 响应式；相当于追加一个元素：value:{fooChange: '王五'}
	// 	fooChange: '王五'
	// }
	// console.log(obj)
}
</script>

<style scoped>
</style>

修改外层【正确修改】：
在这里插入图片描述
修改二层、三层都是非响应式：
在这里插入图片描述

修改obj：
在这里插入图片描述

3.8 shallowRef、shallowReactive

相同：shallowReactive 也是浅层次响应式，与 shallowRef 会被 ref 影响相同，shallowReactive 也会被 reactive 影响
区别：
shallowRef 实现响应式需要通过.value修改数据，shallowReactive 不需要

// shallowRef
let data = ref({name: "张三"})
const clickBtn1 = ()=>{
	data.value.name = "李四" // 方式一 value.name = 
	data.value = {name: "李四四"} // 方式二 value = 
	console.log(data)
}

// shallowReactive
let obj:any = shallowReactive({
	foo: { // 外层
		bar: { // 二层
			name: '张三' // 三层
		}
	}
})
const clickBtn1 = ()=>{
	obj.foo = {
		barChange: '李四'
	}
}

4、to 全家桶

  • toRef：将普通数据转成ref对象（响应式），然后响应式修改对象的值（转成ref对象，修改值需要加.value）。只能修改响应式对象的值。非响应式对象的data会改变，但是视图不会改变。接收参数：toRef(对象名, 对象属性)
  • toRefs：批量将数据转成ref对象（响应式），然后响应式修改对象的值
  • toRaw：与toRef相反，将ref对象转成普通对象/普通类型数据，脱离Proxy代理（Proxy实现双向绑定/响应式，脱离Proxy即非响应式）。只想修改数据、不想更新视图的时候可以用toRaw
// toRef 实现响应式修改数据的值
// 转成ref对象
const like = toRef(person, 'like') // 接收参数：toRef(对象名, 对象属性)
// 响应式修改
like.value = '运动' // like是一个ref对象，所以修改值需要加.value


// toRefs
const person = reactive({
	name: '张三',
	age: 30,
	like: '吃饭'
})
// 接收参数：对象名；返回值：对象内的所有属性名
const {name, age, like} = toRefs(person) // 解构取值
// 响应式修改
name.value = '李四'
age.value = 31
like.value = '运动'

完整例子
toRef 的例子

<template>
	<div>
		<p>{{person}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {reactive, toRef} from 'vue'

const person = reactive({ // 实现对象类型数据的响应式，可以直接使用reactive（reactive实现对象类型数据的响应式，ref实现所有类型数据的响应式）
	name: '张三',
	age: 30,
	like: '吃饭'
})
const clickBtn = ()=>{
	const like = toRef(person, 'like') // 接收参数：toRef(对象名, 对象属性)
	like.value = '运动' // like是一个ref对象，所以修改值需要加.value
	console.log('like:',like)
	console.log('person:',person)
}
</script>

在这里插入图片描述
toRefs 的例子

<template>
	<div>
		<p>{{person}}</p>
		<button @click="clickBtn()">修改</button>
	</div>
</template>

<script setup lang="ts">
import {reactive, toRef, toRefs} from 'vue'

const person = reactive({
	name: '张三',
	age: 30,
	like: '吃饭'
})
// toRefs实现原理：批量转成ref对象
// const toRefs = <T extends object>(object:T)=>{
// 	const map:any = {}
// 	for(let key in object){
// 		map[key] = toRef(object, key) // 将对象object中的属性key转成ref对象
// 	}
// 	return map // 将object内所有属性转成ref并返回
// }

const clickBtn = ()=>{
	const {name, age, like} = toRefs(person) // 接收参数：对象名；返回值：对象内的所有属性名
	name.value = '李四'
	age.value = 31
	like.value = '运动'
	console.log('person:',person)
}
</script>

<style scoped>
</style>

在这里插入图片描述

【补充】ts泛型

<script setup lang="ts">
import {ref} from 'vue'	
import type {Ref} from 'vue' // 添加泛型（方式2）

type Data = {
	name: string
}
let data1 = ref<Data>({name: "张三"}) // 添加泛型（方式1）
let data2:Ref<Data> = ref({name: "张三"}) // 添加泛型（方式2）当类型比较复杂的时候推荐使用
</script>

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

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

相关文章

【Java基础_02】Java变量

【Java基础_02】Java变量

【Java基础_02】Java变量、运算符、程序控制结构 文章目录 1 变量1.1 程序中“”号的使用1.2 数据类型1.3 整数类型1.3.1 整数类型的分类1.3.2 整型的使用细节 1.4 浮点类型1.4.1 浮点型的分类1.4.2 浮点类型使用细节 1.5 字符类型1.5.1 字符类型使用细节1.5.2 字符类型本质1.5…
阅读更多...
Mysql学习记录补充

Mysql学习记录补充

索引 在无索引情况下&#xff0c;就需要从第一行开始扫描&#xff0c;一直扫描到最后一行&#xff0c;我们称之为 全表扫描&#xff0c;性能很低。 如果我们针对于这张表建立了索引&#xff0c;假设索引结构就是二叉树&#xff0c;那么也就意味着&#xff0c;会对age这个字段…
阅读更多...
【FX110网】日交所发布1月交易数据：衍生品交易额达历年1月最高！

【FX110网】日交所发布1月交易数据：衍生品交易额达历年1月最高！

日本交易所集团&#xff08;日交所&#xff0c;JPX&#xff09;发布了其2024年1月的交易数据概览。数据显示&#xff0c;该交易所当月衍生品交易额创新历年来的1月交易数据最高纪录。2024年1月共有19个交易日。 2024年1月交易概览现货股票市场 2024年1月&#xff0c;该交易所主…
阅读更多...
ArrayList在添加元素时报错java.lang.ArrayIndexOutOfBoundException

ArrayList在添加元素时报错java.lang.ArrayIndexOutOfBoundException

一、添加单个元素数组越界分析 add源码如下 public boolean add(E e) {ensureCapacityInternal(size 1); // Increments modCount!!elementData[size] e;return true; } size字段的定义 The size of the ArrayList (the number of elements it contains). ArrayList的大…
阅读更多...
三层交换组网实验（华为）

三层交换组网实验（华为）

思科设备参考&#xff1a;三层交换组网实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 三层交换技术的出现&#xff0c;解决子网必须依赖路由器进行管理的问题&#xff0c;解决传统路由器低速、复杂所造成的网络瓶颈问题。一个具有三层交换功能的设备可简单理解为…
阅读更多...
Unity引擎学习笔记之【角色按键器操作】

Unity引擎学习笔记之【角色按键器操作】

角色按键Character Controls 一、脚本操作 设置脚本 设置基本键盘操作 //水平轴float horizontal Input.GetAxis("Horizontal");//垂直轴float vertical Input.GetAxis("Vertical");//创建方向向量Vector3 dir new Vector3(horizontal,0,vertical);/…
阅读更多...
《Python 网络爬虫简易速速上手小册》第5章：Python 数据存储与管理（2024 最新版）

《Python 网络爬虫简易速速上手小册》第5章：Python 数据存储与管理（2024 最新版）

文章目录 5.1 选择数据存储方案5.1.1 重点基础知识讲解5.1.2 重点案例&#xff1a;使用 SQLite 存储博客文章数据5.1.3 拓展案例 1&#xff1a;使用 MongoDB 存储社交媒体动态5.1.4 拓展案例 2&#xff1a;使用 Elasticsearch 存储和检索日志数据 5.2 数据清洗与预处理5.2.1 重…
阅读更多...
鱼和熊掌如何兼得？一文解析RDS数据库存储架构升级

鱼和熊掌如何兼得？一文解析RDS数据库存储架构升级

在2023年云栖大会上&#xff0c;阿里云数据库产品事业部负责人李飞飞在主题演讲中提到&#xff0c;瑶池数据库推出“DB存储”一体化能力&#xff0c;结合人工智能、机器学习、存储等方法和创新能力&#xff0c;实现Buffer Pool Extension能力和智能冷温热数据分层能力。在大会的…
阅读更多...
Linux 高并发服务器

Linux 高并发服务器

多进程并发服务器 使用多进程并发服务器时要考虑以下几点&#xff1a; 父进程最大文件描述个数(父进程中需要close关闭accept返回的新文件描述符)系统内创建进程个数(与内存大小相关)进程创建过多是否降低整体服务性能(进程调度) server /* server.c */ #include <stdio…
阅读更多...
【刷题题解】最长回文子序列

【刷题题解】最长回文子序列

给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列 这道题&#xff0c;一眼动态规划&#xff0c;但是即使动起来也规划…
阅读更多...
TrinityCore安装记录

TrinityCore安装记录

TrinityCore模拟魔兽世界&#xff08;World of Warcraft&#xff09;的开源项目&#xff0c;并且该项目代码广泛的优化、改善和清理代码。 前期按照官方手册按部就班的安装即可。 注意几点&#xff1a; 1 需要配置Ubuntu22.04版本的服务器或者Debian11 服务器。2 需要使用gi…
阅读更多...
python_ACM模式《剑指offer刷题》链表4

python_ACM模式《剑指offer刷题》链表4

题目&#xff1a; 面试tips&#xff1a; 询问是否需要判断环&#xff0c;可微调下方代码。 思路&#xff1a; 思路一&#xff1a; 判断环是否存在&#xff1a;设定一快一慢指针&#xff0c;均从头节点出发&#xff0c;快指针一次走两步&#xff0c;慢指针一次走一步。若无环…
阅读更多...
docker安装-centos

docker安装-centos

Docker CE 支持 64 位版本 CentOS 7&#xff0c;并且要求内核版本不低于 3.10 卸载旧版本Docker sudo yum remove docker \ docker-common \ docker-selinux \ docker-engine使用yum安装 yum 更新到最新版本: sudo yum update执行以下命令安装依赖包&#xff1a; sudo yum…
阅读更多...
[设计模式Java实现附plantuml源码~结构型]处理多维度变化——桥接模式

[设计模式Java实现附plantuml源码~结构型]处理多维度变化——桥接模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…
阅读更多...
SpringBoot第二天

SpringBoot第二天

Bean管理 Bean扫描 在Spring中&#xff0c;Bean的扫描有两种写法 第一种是在xml配置文件中用标签扫描 <context:component-scan basepackage"com.cacb"/> 第二种是是注解扫描 ComponentScan(basePackages"com.cacb") 而在SpringBoot中&#xf…
阅读更多...
张维迎《博弈与社会》威胁与承诺（4）宪政与民主

张维迎《博弈与社会》威胁与承诺（4）宪政与民主

有限政府 动态博弈理论对我们理解民主与法治具有重要的意义。 自人类进入文明时代以来&#xff0c;政府就是社会博弈重要的参与人。任何社会要有效运行&#xff0c;都需要赋予政府一些自由裁量权。但如果政府的自由裁量权太大&#xff0c;政府官员为所欲为&#xff0c;不仅老百…
阅读更多...
Jetson AGX Orin安装Anaconda，Cuda，Cudnn，pytorch，Tensorrt，ROS

Jetson AGX Orin安装Anaconda，Cuda，Cudnn，pytorch，Tensorrt，ROS

Anaconda&#xff1a;https://repo.anaconda.com/archive/ Cuda&#xff1a;https://forums.developer.nvidia.com/t/pytorch-for-jetson/72048 1&#xff1a;安装Anaconda3 下载&#xff1a;Anaconda3-2021.11-Linux-aarch64.sh chmod x Anaconda3-2021.11-Linux-aarch64.s…
阅读更多...
瑞_23种设计模式_工厂模式

瑞_23种设计模式_工厂模式

文章目录 1 什么是工厂模式案例案例代码 2 简单工厂模式&#xff08;Simple Factory&#xff09;2.1 简单工厂模式的结构2.2 案例改进——简单工厂模式2.3 案例改进代码实现2.4 简单工厂模式优缺点2.5 拓展——静态工厂 3 工厂方法模式&#xff08;Factory Method&#xff09;★…
阅读更多...
OJ_整数奇偶排序

OJ_整数奇偶排序

题干 c实现 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<algorithm> using namespace std;//compare函数不交换返回true bool compare(int a, int b) {//1.a奇数&#xff0c;b偶数&#xff0c;不交换//2.a奇数&#xff0c;b奇数&#xff0c;a比b…
阅读更多...
openGauss学习笔记-213 openGauss 性能调优-总体调优思路

openGauss学习笔记-213 openGauss 性能调优-总体调优思路

文章目录 openGauss学习笔记-213 openGauss 性能调优-总体调优思路213.1 调优思路概述213.2 调优流程 openGauss学习笔记-213 openGauss 性能调优-总体调优思路 213.1 调优思路概述 openGauss的总体性能调优思路为性能瓶颈点分析、关键参数调整以及SQL调优。在调优过程中&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023