Vue Vue3

1、创建VUE3工程

使用vue-cli创建：

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

使用vite创建：

官方文档：快速上手 | Vue.js

vite官网：Vite中文网

  • 什么是vite？—— 新一代前端构建工具。
  • 优势如下：
    • 开发环境中，无需打包操作，可快速的冷启动。
    • 轻量快速的热重载（HMR）。
    • 真正的按需编译，不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
2、常用 Composition API

官方文档: 组合式 API 常见问答 | Vue.js

a. setup 函数
  1. 理解：Vue3.0中一个新的配置项，值为一个函数。
  2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
  3. 组件中所用到的：数据、方法等等，均要配置在setup中。
  4. setup函数的两种返回值：
  • 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
  • 若返回一个渲染函数：则可以自定义渲染内容。（了解）
  1. 注意点：
  • 尽量不要与Vue2.x配置混用
    • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
    • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
    • 如果有重名, setup优先。
  • setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
<template><h1>一个人的信息</h1><h2>姓名：name</h2><h2>年龄：age</h2><button @click="sayHello">说话</button>
</template><script>//import h from 'vue'export default {name: 'App',// 此处只是测试setup(),不考虑响应式问题。setup() {// 数据let name = '张三'let age = 18// 方法function sayHello() {alert(`我叫${name},我${age}岁了，你好啊！`)}// 返回一个对象(常用)return {name,age,sayHello}// 返回一个渲染函数// return () => h('h1', '尚硅谷')}}
</script>

6.setup的两个注意点

  • setup执行的时机
    • 在beforeCreate之前执行一次，this是undefined。
  • setup的参数
    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context：上下文对象
      • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
      • slots: 收到的插槽内容, 相当于 this.$slots。
      • emit: 分发自定义事件的函数, 相当于 this.$emit。
b.ref 函数
  • 作用: 定义一个响应式的数据
  • 语法: const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    • JS中操作数据： xxx.value
    • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  • 备注：
    • 接收的数据可以是：基本类型、也可以是对象类型。
    • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
    • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h3>工作：{{job.type}}</h3><h3>薪水：{{job.salary}}</h3><button @click="changeInfo">修改人的信息</button>
</template><script>import {ref} from 'vue'export default {name: 'App',setup() {// 数据let name = ref('张三')let age = ref(18)let job = ref({type: '前端工程师',salary: '20k'})function changeInfo() {// name.value = '李四'// age.value = 49job.value.type = '后端工程师'job.value.salary = '60k'console.log(job.value)}// 返回一个对象(常用)return {name,age,job,changeInfo}}}
</script>
c. reactive 函数
  • 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
  • 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
  • reactive定义的响应式数据是“深层次的”。
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
<template><h1>一个人的信息</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h3>工作：{{person.job.type}}</h3><h3>薪水：{{person.job.salary}}</h3><h4>测试数据c: {{person.job.a.b.c}}</h4><h4>测试数据hobby：{{person.hobby[0]}}</h4><button @click="changeInfo">修改人的信息</button>
</template><script>import {reactive} from 'vue'export default {name: 'App',setup() {// 数据let person = reactive({name: '张三',age: 18,job:{type: '前端工程师',salary: '20k',a: {b: {c: 666}}},hobby:['抽烟', '喝酒', '烫头'],})//方法function changeInfo() {person.name.value = '李四'person.age.value = 49person.job.type = '后端工程师'person.job.salary = '60k'person.job.a.b.c = 999person.hobby[0] = '学习'}// 返回一个对象(常用)return {person,changeInfo}}}
</script>
d. reactive对比ref
  • 从定义数据角度对比：
    • ref用来定义：基本类型数据。
    • reactive用来定义：对象（或数组）类型数据。
    • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
  • 从原理角度对比：
    • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
    • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
  • 从使用角度对比：
    • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
    • reactive定义的数据：操作数据与读取数据：均不需要.value。

---------------------------------------------------------

3、Vue3.0中的响应式原理
a. vue2.x的响应式
  • 实现原理：
    • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
Object.defineProperty(data, 'count', {get () {}, set () {}
})
  • 存在问题：
    • 新增属性、删除属性, 界面不会更新。
    • 直接通过下标修改数组, 界面不会自动更新。
b. Vue3.0的响应式
  • 模拟Vue3.0 响应式
<script type="text/javascript">const person = {name: '张三',age: 14}// 模拟Vue3中实现响应式const p = new Proxy(person, {// 有人读取某个属性时，调用get(target, propName) {console.log(`有人读取了p身上的${propName}属性`)return target[propName]},// 有人修改或增加某个属性时，调用set(target, propName, value) {console.log(`有人修改了p身上的${propName}属性，我要去更新页面了！`)target[propName] = value},// 有人删除某个属性时，调用deleteProperty(target, propName) {console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`)return delete target[propName]}})</script>
  • 实现原理:
    • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
    • 通过Reflect（反射）: 对源对象的属性进行操作。
    • MDN文档中描述的Proxy与Reflect：
      • Proxy：Proxy - JavaScript | MDN
      • Reflect：Reflect - JavaScript | MDN
new Proxy(data, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})proxy.name = 'tom'

-----------------------------------------------

4、计算属性与监视
a. computed函数

与Vue2.x中computed配置功能一致

import {computed} from 'vue'setup(){...//计算属性——简写let fullName = computed(()=>{return person.firstName + '-' + person.lastName})//计算属性——完整let fullName = computed({get(){return person.firstName + '-' + person.lastName},set(value){const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})
}
b. watch函数
  • 与Vue2.x中watch配置功能一致
  • 两个小“坑”：
    • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
    • 监视reactive定义的响应式数据中某个属性时：deep配置有效。
//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)
},{immediate:true})//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{console.log('sum或msg变化了',newValue,oldValue)
}) /* 情况三：监视reactive定义的响应式数据若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) //情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
c. watchEffect函数
  • watch的套路是：既要指明监视的属性，也要指明监视的回调。
  • watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
  • watchEffect有点像computed：
    • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{const x1 = sum.valueconst x2 = person.ageconsole.log('watchEffect配置的回调执行了')
})
5、生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted

Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

  • beforeCreate===>setup()
  • created===>setup()
  • beforeMount ===>onBeforeMount
  • mounted===>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated===>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted=>onUnmounted
6、自定义hook函数
  • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
  • 类似于vue2.x中的mixin。
  • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

src/hooks/usePoint.js

import { reactive, onMounted, onUnmounted } from "vue"export default function() {// 实现鼠标打点的数据let point = reactive({x:0,y:0})// 实现鼠标打点的方法function savePoint(event) {point.x = event.pageXpoint.y = event.pageY}// 实现鼠标打点的钩子onMounted(()=>{window.addEventListener('click', savePoint)})onUnmounted(() => {window.removeEventListener('click', savePoint)})return point
}

使用：

<script>import {ref} from 'vue'import usePoint from '../hooks/usePoint'export default {name: 'MyDemo',setup() {let sum = ref(0)let point = usePoint()return {sum,point}}}
</script>
7、toRef
  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
  • 语法：const name = toRef(person,'name')
  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
  • 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)
<template><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪资：{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">修改年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>import {reactive, toRefs} from 'vue'export default {setup() {let person = reactive({name: '张三',age: 18,job: {j1: {salary: 2000}}})return {// name: toRef(person, 'name'),// age: toRef(person, 'age'),// salary:toRef(person.job.j1, 'salary'),...toRefs(person)}}}
</script>
8、其它 Composition API
a. shallowReactive 与 shallowRef
  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
  • shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
  • 什么时候使用?
    • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
<template><h4>当前的x.y值是：{{x.y}}</h4><button @click="x={y:888}">点我替换x</button><button @click="x.y++">点我x.y++</button><hr><h4>{{person}}</h4><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪资：{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button></template><script>import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'export default {name: 'Demo',setup(){//数据// let person = shallowReactive({ //只考虑第一层数据的响应式let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})let x = shallowRef({y:0})console.log('******',x)//返回一个对象（常用）return {x,person,...toRefs(person)}}}
</script>
b. readonly 与 shallowReadonly
  • readonly: 让一个响应式数据变为只读的（深只读）。
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）。
  • 应用场景: 不希望数据被修改时。
<template><h4>当前求和为：{{sum}}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪资：{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'export default {name: 'Demo',setup(){//数据let sum = ref(0)let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})person = readonly(person)// person = shallowReadonly(person)// sum = readonly(sum)// sum = shallowReadonly(sum)//返回一个对象（常用）return {sum,...toRefs(person)}}}
</script>
c. toRaw 与 markRaw
  • toRaw：
    • 作用：将一个由reactive生成的响应式对象转为普通对象。
    • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
  • markRaw：
    • 作用：标记一个对象，使其永远不会再成为响应式对象。
    • 应用场景:
      1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
<template><h4>当前求和为：{{sum}}</h4><button @click="sum++">点我++</button><hr><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪资：{{job.j1.salary}}K</h2><h3 v-show="person.car">座驾信息：{{person.car}}</h3><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button><button @click="showRawPerson">输出最原始的person</button><button @click="addCar">给人添加一台车</button><button @click="person.car.name+='!'">换车名</button><button @click="changePrice">换价格</button>
</template><script>import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'export default {name: 'Demo',setup(){//数据let sum = ref(0)let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})function showRawPerson(){const p = toRaw(person)p.age++console.log(p)}function addCar(){let car = {name:'奔驰',price:40}person.car = markRaw(car)}function changePrice(){person.car.price++console.log(person.car.price)}//返回一个对象（常用）return {sum,person,...toRefs(person),showRawPerson,addCar,changePrice}}}
</script>
d. customRef***
  • 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。
  • 实现防抖效果：
<template><input type="text" v-model="keyword"><h3>{{keyword}}</h3></template><script>import {ref,customRef} from 'vue'export default {name:'Demo',setup(){// let keyword = ref('hello') //使用Vue准备好的内置ref//自定义一个myReffunction myRef(value,delay){let timer//通过customRef去实现自定义return customRef((track,trigger)=>{return{get(){track() //告诉Vue这个value值是需要被“追踪”的return value},set(newValue){clearTimeout(timer)timer = setTimeout(()=>{value = newValuetrigger() //告诉Vue去更新界面},delay)}}})}let keyword = myRef('hello',500) //使用程序员自定义的refreturn {keyword}}}
</script>
e、provide 与 inject

  • 作用：实现祖与后代组件间通信
  • 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据
  • 祖组件中：
setup(){......let car = reactive({name:'奔驰',price:'40万'})provide('car',car)......
}
  • 后代组件中：
setup(props,context){......const car = inject('car')return {car}......
}
f. 响应式数据的判断
  • isRef: 检查一个值是否为一个 ref 对象
  • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
9、Composition API 的优势

Options API 存在的问题：使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

Composition API 的优势：我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

10、新的组件
a. Fragment
  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用
b.Teleport
  • 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
<teleport to="移动位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><button @click="isShow = false">关闭弹窗</button></div></div>
</teleport>
c. Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

异步引入组件:

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default 与 fallback:

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加载中.....</h3></template></Suspense></div>
</template>
11、全局API的转移
  • Vue 2.x 有许多全局 API 和配置。例如：注册全局组件、注册全局指令等：
//注册全局组件
Vue.component('MyButton', {data: () => ({count: 0}),template: '<button @click="count++">Clicked {{ count }} times.</button>'
})//注册全局指令
Vue.directive('focus', {inserted: el => el.focus()
}
  • Vue3.0中对这些API做出了调整：将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（Vue）

3.x 实例 API (app)

Vue.config.xxxx

app.config.xxxx

Vue.config.productionTip

移除

Vue.component

app.component

Vue.directive

app.directive

Vue.mixin

app.mixin

Vue.use

app.use

Vue.prototype

app.config.globalProperties

12、其他改变
  • data选项应始终被声明为一个函数。
  • 过度类名的更改：
    • Vue2.x写法
.v-enter,
.v-leave-to {opacity: 0;
}
.v-leave,
.v-enter-to {opacity: 1;
}
    • Vue3.x写法
.v-enter-from,
.v-leave-to {opacity: 0;
}.v-leave-from,
.v-enter-to {opacity: 1;
}
  • 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes
  • 移除v-on.native修饰符
    • 父组件中绑定事件
<my-componentv-on:close="handleComponentEvent"v-on:click="handleNativeClickEvent"
/>
    • 子组件中声明自定义事件
<script>export default {emits: ['close']}
</script>
  • 移除过滤器（filter）过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

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

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

相关文章

07、vue : 无法加载文件 C:\Users\JH\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

07、vue : 无法加载文件 C:\Users\JH\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。

目录 问题解决&#xff1a; 问题 vue : 无法加载文件 C:\Users\JH\AppData\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。 在使用 VSCode 时&#xff0c;创建 Vue 项目报的错 创建不了 Vue 项目 解决&#xff1a; 因为在此系统上禁止运行该脚本&#xff0…
阅读更多...
从行车记录仪恢复已删除/丢失视频的方法

从行车记录仪恢复已删除/丢失视频的方法

“我的车里有行车记录仪。几天前&#xff0c;当我下班回家时&#xff0c;一辆卡车不知从哪里冒出来撞向了我。我们的两辆车都损坏了&#xff0c;但幸运的是&#xff0c;没有人受伤。我曾与卡车司机就修理我的汽车进行过会面&#xff0c;但他说我有错。我需要查看我的行车记录仪…
阅读更多...
【每日一题】移除链表元素（C语言）

【每日一题】移除链表元素（C语言）

移除链表元素&#xff0c;链接奉上 目录 思路&#xff1a;代码实现&#xff1a;链表题目小技巧&#xff1a; 思路&#xff1a; 在正常情况&#xff1a; 下我们移除链表元素时&#xff0c;需要该位置的前结点与后节点&#xff0c; 在特别情况时&#xff1a; 例如 我们发现&…
阅读更多...
基于金枪鱼群算法的无人机航迹规划-附代码

基于金枪鱼群算法的无人机航迹规划-附代码

基于金枪鱼群算法的无人机航迹规划 文章目录 基于金枪鱼群算法的无人机航迹规划1.金枪鱼群搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用金枪鱼群算法来优化无人机航迹规划。 …
阅读更多...
vue项目npm install报错解决

vue项目npm install报错解决

一、报错信息 node-sass4.14.1 postinstall: node scripts/build.js 二、解决方式 &#xff08;1&#xff09;删除未成功安装的 node_modules 文件&#xff1b; &#xff08;2&#xff09;为 node-sass 单独设置镜像源&#xff1b; npm config set sass_binary_sitehttps:/…
阅读更多...
项目级asp.net框架的LIMS实验室管理系统源码

项目级asp.net框架的LIMS实验室管理系统源码

LIMS可用于管理完整的实验程序&#xff0c;从样品登记到检验、校核、审核到最终批准报告&#xff0c;建立在过程质量控制的基础上&#xff0c;对检测流程进行有效全面的管理&#xff0c;对影响质量的人、机、料、法、环因素加以控制&#xff0c;同时为质量改进提供数据依据。进…
阅读更多...
Cassandra介绍（一）

Cassandra介绍（一）

1.1. 概念 Apache Cassandra 是高度可扩展的&#xff0c;高性能的分布式 NoSQL 数据库。 Cassandra 旨在处理许 多商品服务器上的大量数据&#xff0c;提供高可用性而无需担心单点故障。 Cassandra 具有能够处理大量数据的分布式架构。 数据放置在具有多个复制因子的不同机器…
阅读更多...
Luminar Neo Mac/Windows中文版：引领AI图像编辑的革命性时代

Luminar Neo Mac/Windows中文版：引领AI图像编辑的革命性时代

Luminar Neo运用先进的AI技术&#xff0c;能够自动化地完成许多繁琐的编辑任务&#xff0c;如色彩校正、噪点消除、人脸识别等。这不仅大大提高了工作效率&#xff0c;同时也降低了对专业知识和技能的要求。无论你是专业摄影师&#xff0c;还是摄影爱好者&#xff0c;甚至是一个…
阅读更多...
产品实习笔记——会员体系 积分体系

产品实习笔记——会员体系 积分体系

文章目录 引入会员体系1. 业务逻辑产品化2. 产品逻辑可视化2.1 成长值&#xff1a;会员等级的判断机制2.1.1 成长值的获得2.1.1 成长值的消耗 2.2 会员等级区间划分2.3 成长值风控体系2.4 会员权益2.4.1 普通会员权益2.4.2 阶梯式会员权益 积分体系有赞商城&#xff08;会员体系…
阅读更多...
数据可视化：折线图

数据可视化：折线图

1.初看效果 &#xff08;1&#xff09;效果一 &#xff08;2&#xff09;数据来源 2.JSON数据格式 其实JSON数据在JAVA后期的学习过程中我已经是很了解了&#xff0c;基本上后端服务器和前端交互数据大多是采用JSON字符串的形式 &#xff08;1&#xff09;JSON的作用 &#…
阅读更多...
设计模式第一课-单例模式(懒汉模式和饿汉模式)

设计模式第一课-单例模式(懒汉模式和饿汉模式)

单例模式 个人理解&#xff1a;单例模式实际就是通过类加载的方式获取到一个对象&#xff0c;并且保证这个对象在使用中只有一个&#xff0c;不允许再次被创建 一、懒汉模式 1、懒汉模式的基础写法 代码解释&#xff1a; &#xff08;1&#xff09;、编写LazySingleton类的…
阅读更多...
k8s、调度约束

k8s、调度约束

Kubernetes 是通过 List-Watch **** 的机制进行每个组件的协作&#xff0c;保持数据同步的&#xff0c;每个组件之间的设计实现了解耦 用户是通过 kubectl 根据配置文件&#xff0c;向 APIServer 发送命令&#xff0c;在 Node 节点上面建立 Pod 和 Container。 APIS…
阅读更多...
基于STC15单片机温度光照蓝牙传输-proteus仿真-源程序

基于STC15单片机温度光照蓝牙传输-proteus仿真-源程序

一、系统方案 本设计采用STC15单片机作为主控器&#xff0c;液晶1602显示&#xff0c;DS18B20采集温度&#xff0c;光敏电阻采集光照、按键设置温度上下限&#xff0c;测量温度小于下限&#xff0c;启动加热&#xff0c;测量温度大于上限&#xff0c;启动降温。 二、硬件设计 …
阅读更多...
开发知识点-PHP从小白到拍簧片

开发知识点-PHP从小白到拍簧片

从小白到拍簧片 位异或运算&#xff08;^ &#xff09;引用符号(&)strlen() 函数base64_encode预定义 $_POST 变量session_start($array);操作符php 命令set_time_limit(7200)isset()PHP 命名空间(namespace)new 实例化类extends 继承 一个类使用另一个类方法error_reporti…
阅读更多...
清华软院2024届推免拟录取名单

清华软院2024届推免拟录取名单

名单 直博生 硕士生 分析 清华软院2024届共录取推免硕士生68人&#xff0c;其中 专硕085405软件工程 59人&#xff0c;学硕083500软件工程9人&#xff1b;推免直博生 15人 和贵系相比难度要低很多哦&#xff01; 欢迎关注我的公众号 “程序员小风学长”&#xff0c;会定期进…
阅读更多...
一、Hadoop初始化配置(final+ubuntu保姆级教程)

一、Hadoop初始化配置(final+ubuntu保姆级教程)

1、配置虚拟机 三台虚拟机&#xff0c;分别为node1、node2、node3&#xff0c;内存分别为4G、2G、2G&#xff0c;现存最好为&#xff08;>40G&#xff09;&#xff0c;如下&#xff1a; 2、修改主机名 分别打开三台虚拟机&#xff0c;root用户输入一下命令&#xff1a; no…
阅读更多...
Android 13.0 启动app时设置密码锁

Android 13.0 启动app时设置密码锁

1.前言 在13.0的系统产品开发中，对于限制某些app的启动的功能中，在项目中的需求是在点击app启动的时候，根据包名设置密码锁，当输入正确的密码的时候来启动这个app，否则 就不能启动这个app,达到限制使用app的目的，这就需要在app启动的时候，检测app的包名，然后在app启动…
阅读更多...
随笔--解决ubuntu虚拟环境的依赖问题

随笔--解决ubuntu虚拟环境的依赖问题

文章目录 问题一&#xff1a;在conda虚拟环境中报错ImportError: libcupti.so.11.7:cannot open shared object file: No such file or directory解决步骤问题二&#xff1a; RuntimeError: CUDA error: CUBLAS_STATUS_INVALID_VALUE when calling cublasSgemmStridedBatched( …
阅读更多...
使用R语言构建HTTP爬虫：IP管理与策略

使用R语言构建HTTP爬虫：IP管理与策略

目录 摘要 一、HTTP爬虫与IP管理概述 二、使用R语言进行IP管理 三、爬虫的伦理与合规性 四、注意事项 结论 摘要 本文深入探讨了使用R语言构建HTTP爬虫时如何有效管理IP地址。由于网络爬虫高频、大量的请求可能导致IP被封禁&#xff0c;因此合理的IP管理策略显得尤为重要…
阅读更多...
2023-11-06 LeetCode每日一题（最大单词长度乘积）

2023-11-06 LeetCode每日一题（最大单词长度乘积）

2023-11-06每日一题 一、题目编号 318. 最大单词长度乘积二、题目链接 点击跳转到题目位置 三、题目描述 给你一个字符串数组 words &#xff0c;找出并返回 length(words[i]) * length(words[j]) 的最大值&#xff0c;并且这两个单词不含有公共字母。如果不存在这样的两个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023