创建期间的生命周期函数:
运行期间的生命周期函数:
销毁期间的生命周期函数:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted父beforeUpdate->子beforeUpdate->子updated->父updated父beforeUpdate->父updated父beforeDestroy->子beforeDestroy->子destroyed->父destroyed总结:从外到内,再从内到外
<child-comp @child-event="handleChildEvent"></child-comp></div>
Vue.component('child-comp', {
template: '<div></div>',
data: function () {
return {
childMsg: 'Hello, I am Child'
};
},
methods: {},
mounted() {
this.$emit('child-event');
}
});
const app = new Vue({
el: '#app',
data: function () {
return {
parentData: 'parent Message'
};
},
beforeCreate: function () {
console.log('before created');
},
methods: {
handleChildEvent() {
console.log('child mounted');
}
}
});
在子组件中的 mounted 钩子函数中调用 this.$emit("child-event"); 向父组件发送 child-event 消息。 父组件 @child-event="handleChildEvent" 监听了此消息。
假如我们这里的子组件是外部的,是不可更改的。那我们父组件监听这个外部子组件中的生命周期钩子函数怎么办呢?
<div id="app">
<child-comp @hook:mounted="handleChildEvent"></child-comp>
</div>
Vue.component('child-comp', {
template: '<div></div>',
data: function () {
return {
childMsg: 'Hello, I am Child'
};
},
methods: {},
mounted() {
//this.$emit("child-event");
}
});
const app = new Vue({
el: '#app',
data: function () {
return {
parentData: 'parent Message'
};
},
beforeCreate: function () {
console.log('before created');
},
methods: {
handleChildEvent() {
console.log('child mounted');
}
}
});
把子组件中的 mounted 钩子函数中的 $emit 方法去掉, 在父组件中使用 @hook:mounted
<div id='app'>
<my-button @click='change'></my-button>
</div>
<script>
export default {
methods: {
change() {
alert(1)
}
}
}
</script>
答:不能,绑定的该click事件会被当做组件上的一个普通属性看待,如果想要使click事件生效,可以使用 @click.native='change' 的方式来实现。
因为组件中是 data:{} 的话,这个 {} 是个对象,引用类型。如果多处地方引用同一个组件的话,则共享同一个data对象,这是不合理的。所以需要每次使用组件时,return一个新的对象,这样就不会共享了。
props/$emit+v-on: 通过props将数据自上而下传递,而通过$emit和v-on来向上传递信息。$attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以进行跨级的组件通信this.$emit 的返回值就是 this ,即当前子组件 VueComponent 。
如果想要有返回值可以如下操作:
子组件
<template>
<input :value="name" @change="handleChange" />
</template>
<script>
export default {
props: ['name'],
methods: {
handleChange(e) {
const res = this.$emit("Echange", e.target.value, val => {
console.log(val);
});
console.log(res, res === this);
},
}
}
</script>
父组件
<template>
<Child :name='name' @Echange="handleEventChange" />
</template>
<script>
export default {
data() {
return {
name: '',
}
}
methods: {
handleEventChange(val, callback) {
this.name = val
callback("hello")
return 'hello'
}
}
}
</script>
this是undefined,在filter中拿不到vue实例。filter应该是个纯函数,不应该依赖外界或者对外界有所影响。如果需要用到this,可以用 computed 或者 method 代替。
因此:如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好
v-for 你使用过程中,有遇到什么问题或者关注点吗?v-if 和 v-for 放在同一个元素上,因为 v-for 优先级比 v-if 更高。例如要渲染 todo 列表中未完成的任务,给 li 标签同时写上 v-for 和 v-if 后会导致每次重新渲染都得遍历整个列表。优化方案是把需要遍历的 todoList 更换为在计算属性上遍历过滤。(Vue文档有详细说明)v-for 设置键绑定键值 key。理由见下。key的主要作用就是在更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。这样可以更高效的更新虚拟 DOM。
另外如果给列表组件设置了过渡效果,不添加key属性会导致过渡效果无法触发。因为不添加key会导致vue无法区分它们,导致只会替换节点内部属性而不会触发过渡效果。
更新DOM时会出现性能问题
例如我们在使用index作为key值时想要下面列表进行倒序排列:
<li key='0'>React</li>
<li key='1'>Vue</li>
<li key='2'>Angular</li>
<!-- 倒序后↓↓↓↓↓↓↓↓↓↓ -->
<li key='0'>Angular</li>
<li key='1'>Vue</li>
<li key='2'>React</li>
vue这个时候仅会调换第一和第三项的文本,li元素则不会调换顺序,因为vue发现key值也就是index没变化。而这会导致li里面的文本重新渲染,影响性能。
而如果采用 id 作为 key,则仅仅需要移动下DOM就OK了,并不需要重新渲染DOM:
<li key='react'>React</li>
<li key='vue'>Vue</li>
<li key='angular'>Angular</li>
<!-- 倒序后↓↓↓↓↓↓↓↓↓↓ -->
<li key='angular'>Angular</li>
<li key='vue'>Vue</li>
<li key='react'>React</li>
会发生一些状态bug
还是以上面例子为例,给每个li元素中加一个checkbox:
<li key='react'><input type='checkbox'>React</li>
<li key='vue'><input type='checkbox'>Vue</li>
<li key='angular'><input type='checkbox'>Angular</li>
如果采用 index 作为 key,选中状态会出现bug(左边列表采用index,右边采用id形式):

原因也是 index 没有变化被复用了,导致选中状态永远都是 index=0 的第一项。
阅读更多:
原理:Vue 采用 数据劫持 结合 发布者-订阅者 模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter 以及 getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。参考:
受 defineProperty 限制,Vue 无法检测对象属性的删除和添加。所以我们可以利用 Vue 提供的 Vue.set 来解决此问题。
例子:
有一个obj:{a:1},想要this.obj.b=233,不会触发视图更新
Vue.set(this.obj, 'b', 233) or this.$set(this.obj, 'b', 233)
因为 vue 在实例化过程中,深度遍历了 data 下所有属性, 把属性全转为 getter/setter 。这样才能监听属性变化。所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。
当你在对象上新加了一个属性 newProperty ,当前新加的这个属性并没有加入 vue 检测数据更新的机制(因为是在初始化之后添加的), vue.$set 是能让 vue 知道你添加了属性, 它会给你做处理。
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
<script>
window.onload = function () {
let obj = {};
window.obj = obj
Object.defineProperty(obj, "txt", {
get: function () {
return obj;
},
set: function (newValue) {
document.getElementById("txt").value = newValue;
document.getElementById("show").innerHTML = newValue;
}
})
document.addEventListener("keyup", function (e) {
obj.txt = e.target.value;
})
}
</script>
</body>
vue中的模板template无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的HTML语法,所有需要将template转化成一个JavaScript函数,这样浏览器就可以执行这一个函数并渲染出对应的HTML元素,就可以让视图跑起来了,这一个转化的过程,就成为模板编译。
模板编译又分三个阶段,解析parse,优化optimize,生成generate,最终生成可执行函数render。
来源:https://juejin.im/post/6870374238760894472
Vuex 是专为 Vue 应用程序开发的状态管理工具,相当于共享仓库,方便任何组件直接获取和修改。
全局作用域下定义的数据是静态的,只能通过手动修改,修改后数据变了,但使用这些数据的组件并不会重新渲染,也必须得手动渲染。而且全局作用域下定义太多变量还容易造成变量污染。
Vuex 只要 store 中的数据更新,就会立即渲染所有使用 store 数据的组件。Vuex 使用单向数据流,要想修改 store 数据需要经过 action 层,mutation 层,层次划分明确,便于管理。
在 Store 构造函数中通过 new Vue({}) 实现的。利用 Vue 来监听 state 下的数据变化,给状态添加 getter、setter。
Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法,其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true,然后才能修改 state,修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state,但是并没有修改_committing 标志位,所以只要 watch 一下 state,state change 时判断是否_committing 值为 true,即可判断修改的合法性。
vuex 仅仅是作为 vue 的一个插件而存在,不像 Redux,MobX 等库可以应用于所有框架,vuex 只能使用在 vue 上,很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统,
vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件。
是什么:Vue-Router 是 Vue 官方的路由管理器
作用:为了页面跳转
原理:监听锚点值改变,渲染指定页面
<div class="h">我是头部</div>
<div id="content" class="b"></div>
<div class="f">我是底部</div>
<script type="text/javascript">
//监视锚点值的改变
window.addEventListener('hashchange', function() {
var text = '';
switch (location.hash) {
case '#/music':
text = '各种音乐的数据';
break;
case '#/movie':
text = '各种电影的数据';
break;
}
document.getElementById('content').innerHTML = text;
})
</script>
查询字符串:
path方式:
// name配params:
this.$router.push({name: 'Goods', params: {goodsId:id}})
// path配query:
this.$router.push({path: '/goods', query: {goodsId:id}})
// 参数接收匹配:
this.goodsId = this.$route.query.goodsId
this.goodsId = this.$route.params.goodsId
全局守卫:beforeEach(用户登录以及权限判定)
router.beforeEach((to, from, next) => {
const isLogin = localStroage.token
// 个人中心需要登录
if (to.name === 'Member') {
isLogin ? next() : next('/login')
} else {
next()
}
})
组件内守卫:beforeRouteEnter(根据用户从何而来,修改当前组件标题)
// 详情页组件
beforeRouteEnter(to, from, next) {
let title = ''
title = from.name === 'news.list' ? '新闻详情' : '商品详情'
// 一定要调用 next ,否则无法从列表页跳转到详情页
next(vm => vm.title = title) // 通过 vm 访问组件实例
}
beforeEach 守卫。beforeRouteUpdate 守卫 (2.2+)。beforeEnter。beforeRouteEnter。beforeResolve 守卫 (2.5+)。afterEach 钩子。beforeRouteEnter 守卫中传给 next 的回调函数。// hash路由
class Route{
constructor(){
// 路由存储对象
this.routes = {}
// 当前hash
this.currentHash = ''
// 绑定this,避免监听时this指向改变
this.freshRoute = this.freshRoute.bind(this)
// 监听
window.addEventListener('load', this.freshRoute, false)
window.addEventListener('hashchange', this.freshRoute, false)
}
// 存储
storeRoute (path, cb) {
this.routes[path] = cb || function () {}
}
// 更新
freshRoute () {
this.currentHash = location.hash.slice(1) || '/'
this.routes[this.currentHash]()
}
}
base: process.env.BASE_URL 配置,你知道它引用了谁的路径么?const router = new Router({
mode: 'history',
base: process.env.BASE_URL, // <-
...
它会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的线上/开发环境的基础路径:
const path = require('path')
module.exports = {
// 旧版叫做baseURL
// 线上/开发环境的路径配置
publicPath: process.env.NODE_ENV === 'production' ? 'http://你的线上环境' : '/',
Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
nextTick的回调函数会等到同步任务执行完毕,DOM更新后才触发。
阅读更多:Vue.nextTick 的原理和用途
待续…
为了保证数据的单向流动,便于对数据进行追踪,避免数据混乱。官网有详细的信息 prop
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
设想一个场景,某个父组件下不只使用了一个子组件。而且都使用到了这份 prop 数据,那么一旦某个子组件更改了这个prop数据,会连带着其他子组件的prop数据也被更改。这会导致数据混乱,而且由于修改数据的源头不止一处,在出错后debug时难以定位错误原因。
所以我们需要将修改数据的源头统一为父组件,子组件想要改 prop 只能委托父组件帮它。从而保证数据修改源唯一
另外 props 传入的值如果对象的话,是可以直接在子组件里更改的,因为是同一个引用。
下面的代码就是实现Vue提示修改props的操作,在组件 initProps 方法的时候,会对props进行defineReactive操作,传入的第四个参数是自定义的set函数,该函数会在触发props的set方法时执行,当props修改了,就会运行这里传入的第四个参数,然后进行判断,如果不是root根组件,并且不是更新子组件,那么说明更新的是props,所以会警告
// src/core/instance/state.js 源码路径
function initProps (vm: Component, propsOptions: Object) {
const propsData = vm.$options.propsData || {}
const props = vm._props = {}
// cache prop keys so that future props updates can iterate using Array
// instead of dynamic object key enumeration.
const keys = vm.$options._propKeys = []
const isRoot = !vm.$parent
// root instance props should be converted
if (!isRoot) {
toggleObserving(false)
}
for (const key in propsOptions) {
keys.push(key)
const value = validateProp(key, propsOptions, propsData, vm)
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
const hyphenatedKey = hyphenate(key)
if (isReservedAttribute(hyphenatedKey) ||
config.isReservedAttr(hyphenatedKey)) {
warn(
`"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
vm
)
}
defineReactive(props, key, value, () => {
if (!isRoot && !isUpdatingChildComponent) {
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
} else {
defineReactive(props, key, value)
}
// static props are already proxied on the component's prototype
// during Vue.extend(). We only need to proxy props defined at
// instantiation here.
if (!(key in vm)) {
proxy(vm, `_props`, key)
}
}
toggleObserving(true)
}
// src/core/observer/index.js
/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
const dep = new Dep()
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify()
}
})
}
如果传入的props是基本数据类型,子组件修改父组件传的props会警告,并且修改不成功,如果传入的是引用数据类型,那么修改引用数据类型的某个属性值时,对应的props也会修改,并且vue不会报警告。
Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构,之所以需要虚拟DOM,是因为浏览器中操作DOM的代价比较昂贵,频繁操作DOM会产生性能问题。虚拟DOM的作用是在每一次响应式数据发生变化引起页面重渲染时,Vue对比更新前后的虚拟DOM,匹配找出尽可能少的需要更新的真实DOM,从而达到提升性能的目的。
来源:https://juejin.im/post/6870374238760894472
详细实现见虚拟DOM原理?
优点:
缺点:
链接:https://juejin.im/post/6857856269488193549
平时开发中,经常会用到这样一个语句:
import Vue from 'vue';
由于浏览器兼容性问题,通常这个语法是在 webpack 的构建流搭建的项目中执行的,那么这个语句到底做了什么呢?
其实在 nodejs 中,执行 import 就相当于执行了 require,而 require 被调用,其实会用到 require.resolve 这个函数来查找包的路径,而这个函数在 nodejs 中会有一个关于优先级的算法。先看一下 import Vue from 'vue' 这一句做了什么:
import Vue from 'vue' 解析为 const Vue = require('vue')。require 判断 vue 是否未 nodejs 核心包,如我们常用的:path,fs 等,是则直接导入,否则继续往下走。到了第五步,import Vue from 'vue' 就找到了 vue 所在的实际位置了,那么问题来了,node_modules 下的 vue 是一个文件夹,而引入的 Vue 是一个 javascript 对象,那它是怎么取到这个对象呢?
其实对于一个 npm 包,内部还有一个文件输出的规则,先看下 node_modules/vue 下的文件结构是怎么样的:
├── LICENSE
├── README.md
├── dist
├── package.json
├── src
└── types
是不是看起来很笼统,其实对于 npm 包,require 的规则是这样的:
Error: Cannot find module 'some-library'。那么看一下 vue 的 package.json 文件有这么一句:
{
...
"main": "dist/vue.runtime.common.js",
...
}
到这里就很清晰了:
import vue from 'vue';
// 最后转换为
const vue = require('./node_modules/vue/dist/vue.runtime.common.js');
而 vue.runtime.common.js 文件的最后一行是:module.exports = Vue;,就正好跟我们平时使用时的 new Vue({}) 是一致的,这就是 import vue from 'vue' 的过程了。
当然,这个是我们平时使用得最多的导入方式,还有其他一些导入规则,都可以在 nodejs 的文档 中找到。
文章来源:https://www.jianshu.com/p/fad3688cbd81
jQuery是使用选择器( )选取 D O M 对象,对其进行赋值、取值、事件绑定等操作,其实和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象,而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容: )选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容: )选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:(“label”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定,也就是MVVM。
M 数据改变 =>VM => 触发 View 更新
V 用户操作 => VM => M 数据同步更新
开发者只需要专注对数据的维护操作即可,而不需要自己操作 dom 。
对 token 完全不了解的同学可以查看我博客中转载的 这篇文章 。
不想看长篇大论的我这里简单描述下基于 token 身份验证的整个流程:
对于 Vue 项目来说,具体流程如下:
一般回答完毕后面试官还会追问一些细节,这里列举两个常问的:
你是如何利用 Axios 实现携带 token 以及 401 状态码判定的?
利用 Axios 的请求/响应拦截。使用 axios.interceptors.request.use 进行请求拦截,判断 localStorage 是否有 token ,有则在请求头里携带 token 。使用 axios.interceptors.response.use 进行响应拦截,判断 response.status 是否为 401 ,是则代表 token 失效,清空本地 token ,跳转登录页
你是如何监控路由跳转,并在没有 token 时跳转回登录页的?
使用 Vue Router 的全局路由守卫 router.beforeEach ,该方法接收三个参数:to、from 和 next ,如果用户访问的是不需要登录就能访问的页面(如 to.path === ‘/login’),则直接跳转。否则判断本地是否有 token ,有则调用 next() ,无则 next(‘/login’) 跳转回登录页
首页白屏的原因:
单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),所以当网速差的时候会产生一定程度的白屏
解决办法:
可直接监听数组类型的数据变化
监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升
可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行
直接实现对象属性的新增/删除
新增Composition API,更好的逻辑复用和代码组织
重构 Virtual DOM
代码结构调整,更便于Tree shaking,使得体积更小
使用 Typescript 替换 Flow
Vue2.0中,随着功能的增加,组件变得越来越复杂,越来越难维护,而难以维护的根本原因是Vue的API设计迫使开发者使用watch,computed,methods选项组织代码,而不是实际的业务逻辑。
另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用,虽然可以minxis完成逻辑复用,但是当mixin变多的时候,会使得难以找到对应的data、computed或者method来源于哪个mixin,使得类型推断难以进行。
所以Composition API的出现,主要是也是为了解决Option API带来的问题,第一个是代码组织问题,Compostion API可以让开发者根据业务逻辑组织自己的代码,让代码具备更好的可读性和可扩展性,也就是说当下一个开发者接触这一段不是他自己写的代码时,他可以更好的利用代码的组织反推出实际的业务逻辑,或者根据业务逻辑更好的理解代码。
第二个是实现代码的逻辑提取与复用,当然mixin也可以实现逻辑提取与复用,但是像前面所说的,多个mixin作用在同一个组件时,很难看出property是来源于哪个mixin,来源不清楚,另外,多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。
在客户端请求服务器的时候,服务器到数据库中获取到相关的数据,并且在服务器内部将Vue组件渲染成HTML,并且将数据、HTML一并返回给客户端,这个在服务器将数据和组件转化为HTML的过程,叫做服务端渲染SSR。
而当客户端拿到服务器渲染的HTML和数据之后,由于数据已经有了,客户端不需要再一次请求数据,而只需要将数据同步到组件或者Vuex内部即可。除了数据以外,HTML也结构已经有了,客户端在渲染组件的时候,也只需要将HTML的DOM节点映射到Virtual DOM即可,不需要重新创建DOM节点,这个将数据和HTML同步的过程,又叫做客户端激活。
使用SSR的好处:
华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU
目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类
所有题目均有五种语言实现。C实现目录、C++实现目录、Python实现目录、Java实现目录、JavaScript实现目录题目n行m列的矩阵,每个位置上有一个元素你可以上下左右行走,代价是前后两个位置元素值差的绝对值.另外,你最多可以使用一次传送阵(只能从一个数跳到另外一个相同的数)求从走上角走到右下角最少需要多少时间。输入描述:第一行两个整数n,m,分别代表矩阵的行和列。后面n行,每行m个整数,分别代表矩阵中的元素。输出描述:一个整数,表示最少需要多少时间。
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。 内容有: ①:Hub模型的方法介绍 ②:服务器端代码介绍 ③:前端vue3安装并调用后端方法 ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke() 去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on
目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库?1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动:2.1.2.3启动后控制台页面:2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式
昨晚看到IDEA官推宣布IntelliJIDEA2023.1正式发布了。简单看了一下,发现这次的新版本包含了许多改进,进一步优化了用户体验,提高了便捷性。至于是否升级最新版本完全是个人意愿,如果觉得新版本没有让自己感兴趣的改进,完全就不用升级,影响不大。软件的版本迭代非常正常,正确看待即可,不持续改进就会慢慢被淘汰!根据官方介绍:IntelliJIDEA2023.1针对新的用户界面进行了大量重构,这些改进都是基于收到的宝贵反馈而实现的。官方还实施了性能增强措施,使得Maven导入更快,并且在打开项目时IDE功能更早地可用。由于后台提交检查,新版本提供了简化的提交流程。IntelliJIDEA
?作者主页:静Yu?简介:CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家,前端知识交流社区创建者?社区地址:前端知识交流社区?博主的个人博客:静Yu的个人博客?博主的个人笔记本:前端面试题个人笔记本只记录前端领域的面试题目,项目总结,面试技巧等等。接下来会更新蓝桥杯官方系统基础练习的VIP试题,依然包括解题思路,源代码等等。问题描述:给定当前的时间,请用英文的读法将它读出来。时间用时h和分m表示,在英文的读法中,读一个时间的方法是: 如果m为0,则将时读出来,然后加上“o’clock”,如3:00读作“threeo’clock”。 如果m不为0,则将时读出来,然后将分读出来,如5
平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
目录1. 研究范围定义2. 流程中台市场分析3. 厂商评估:微宏科技4. 入选证书 1. 研究范围定义近年来,随着外部市场环境快速变化、客户需求愈发多样,企业逐渐意识到,自身业务需要更加敏捷、高效,具备根据市场需求快速迭代的能力。业务流程的自动化能够帮助企业实现业务的敏捷高效,因此受到越来越多企业的关注。企业的“自动化武器库”品类丰富,包括低/零代码平台、RPA、BPM、AI等。企业可以使用多项自动化工具,但结果往往是各项自动化工具处于各自的“自动化烟囱”之中,仅能实现碎片式自动化。例如,某企业的IT团队可能在使用低代码平台、财务团队可能在使用RPA、呼叫中心则可能在使用聊天机器人。自动