那么问题来了,当类的泛型相关时,如何在两个泛型类之间创建类似子类型的关系呢?例如如何让Box 和Box变得与Box有关呢?...为了搞懂这个问题,我们先来了解一下同一类型的对象是如何实现子类型化的吧。...因此当我们在传递参数时,ArrayList类型的是可以给List或者Collection传递的。 只要不改变类型参数,类型之间的子类型关系就会保留。...搞懂了子类型化的问题,我们回到“如何在两个泛型类之间创建类似子类型的关系“的问题。...泛型类或者接口并不会仅仅因为它们的类型之间有关系而变得相关,如果要达到相关,我们可以使用通配符来创建泛型类或接口之间的关系。
它们的滥用可能会导致性能问题和代码可读性 # useMemo 当函数组件中状态变化时,会重新自上而下渲染当前组件、以及子组件。如何隔离状态,避免不必要的渲染 ?...使用场景: 传递回调函数给子组件:当我们将一个函数作为 prop 传递给子组件,并且该函数的依赖项在父组件重新渲染时可能发生变化时,可以使用 useCallback 缓存该函数,以确保子组件只在依赖项变化时才重渲染...useCallBack 的本质工作不是在依赖不变的情况下阻止函数创建,而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。...useCallback返 回一个稳定的回调函数 依赖数据未改变时、再次运行函数,其实是执行上次函数的数据据引用。 在依赖项发生变化时才会重新创建该函数。...它对于传递给子组件的回调函数非常有用,确保子组件在父组件重新渲染时不会重新渲染。 useMemo 用于缓存计算结果 并且只有当依赖项发生变化时才会重新计算。
当访问该属性时,会根据页面的可见性状态返回四个可能的值: visible:该页面是可见的,或者准确地说,它没有被最小化,也不在另一个标签页。...visibilitychange:这是一个由document对象提供的事件,当页面的visibilityState发生变化时被触发。...然后当页面显示或隐藏时,我们可以访问document.visibilityState属性的值。...,当最小化窗口或者切换到另一个标签页时,查看页面可见性状态。...为了看效果,我们将编写一个函数不间断地从quotable.io[3] API获取随机引用,并当页面隐藏时暂停该行为。首先,我们将在/index.html创建一个新的div标签来存储引用。
下面是一些常见的应用场景: 3.1 动态内容加载 当页面中的内容是通过异步加载或动态生成时,可以使用MutationObserver来监测内容的变化,并在变化发生后进行相应的处理,如更新页面布局、添加事件监听器等...例如,在无限滚动加载的场景中,当新的内容被加载到页面时,可以使用MutationObserver来自动监听内容的变化,并在变化发生后动态添加相应的元素或事件。...响应式布局 当页面布局需要根据DOM变化自适应调整时,可以使用MutationObserver来监测相关元素的变化,并根据变化动态地调整页面布局。...例如,在响应式网页设计中,当窗口大小发生变化或元素被添加或移除时,可以使用MutationObserver来监听相关元素的变化,并根据变化重新计算和调整页面布局,以适应不同的设备和屏幕尺寸。...当目标元素的子元素发生添加或移除操作时,MutationObserver的回调函数将被调用,并传递一个mutations参数,该参数包含了所有发生的变化。
上述选择了相关组件后,回车,当出现下面情况时,项目就创建完毕了: ? 5. 使用 HBuildx 来打开我们的项目即可进行开发编码。...: 记录依赖包的版本号 如何安装新的依赖 如果后续需要添加新的依赖,就需要在项目的根目录下执行 npm install pluginName --save命令来进行安装,下面以 vuex 为例: 首先在项目的根目录下执行...注册之后,就可以在页面中使用了。 启动项目 经过上面一系列的步骤,现在项目已经可以运行起来了,在项目的根目录下面执行npm run serve 命令,当出现下面提示时即可运行成功: ?...method: 'get', // `method` 是创建请求时使用的方法,默认为get baseURL: '/api/', // 这里的baseURL会自动加在请求的url前面 ansformRequest...如何使用 在页面中获取状态的值: ? 在页面中设置状态的值: ?
依赖收集:当读取数据时,Dep 订阅中心会记录所有依赖于该数据的 Watcher。 触发更新:当数据发生变化时,通知 Dep 订阅中心,然后 Dep 通知所有 Watcher 进行更新。...双端对比:在对比子节点时,从新旧节点的两端开始对比,减少不必要的遍历。 列表优化:对于列表节点,Vue 会尽可能复用已有节点,减少 DOM 创建和销毁的次数。...hash 模式背后的原理是onhashchange事件,当 URL 的片段标识符(即 hash 部分)发生变化时,会触发该事件。...当创建一个函数时,该函数的 prototype 属性会自动获得一个 constructor 属性,指向函数自身。 通过原型,可以实现属性和方法的继承。...小程序的 UI 渲染是通过虚拟 DOM 来完成的,当数据发生变化时,会生成新的虚拟 DOM,并与旧的虚拟 DOM 进行比较,然后进行必要的 DOM 更新。
创建一个欢迎 cookie 利用用户在提示框中输入的数据创建一个 JavaScript Cookie,当该用户再次访问该页面时,根据 cookie 中的信息发出欢迎信息。...cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。...有关cookie的例子: 名字 cookie 当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。...密码 cookie 当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。...当他们再次访问网站时,密码就会从 cookie 中取回。 日期 cookie 当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。
方法二:基于History新API(history.pushState()+popState事件) HTML5中history对象上新的API,同样能实现前端的路由。...这两个API的相同之处是都会操作浏览器的历史记录,而不会引起页面的刷新。不同之处在于,pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录。...使用路由时出现问题如何解决 路由的匹配规则是按照书写的顺序执行的,第一条匹配成功则不去匹配下一条,利用这一特性,可以在所有匹配路由的下面拦截匹配所有路由: //创建路由对象并配置路由规则 let router...state 对象中,当页面的 url 再变回到这个 url 时,可以通过 event.state 取到这个 state 对象,从而可以对页面状态进行还原,如页面滚动条的位置、阅读进度、组件的开关等。...但实际用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢?
MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口,一旦监测到节点发生变化,就会通知回调函数执行相应的逻辑。...如果你的网站是自己用例如 Vue 这样的框架编写的,那你自然会想到在 onMounted 生命周期里加载脚本,但在这个场景下页面真正渲染完成是在一个黑盒当中,那么我要如何才能获知这个本“不存在”的 DOM...当 MutationObserver 绑定到一个节点上时,它会创建一个观察器实例,该实例会监听其绑定的节点及其子节点的变化,并在发生变化时触发一个回调函数。...这个 API 的使用非常简单,我们以上面的场景为例,只需要监听文档树的根节点,然后在其子节点每次发生变化时进行 dqS 就可以了,代码如下:// 选择一个要监听的节点const targetNode =...该原则提倡当需要添加新的功能时,不应修改已有的代码,而是应该通过扩展已有的代码来实现新的功能。当已存在的代码成为黑盒时,有效地监听 DOM 变化并做出相应的扩展逻辑,可以更优雅地完成需求。
(具体参考用 JSON 深拷贝的缺点)如果 B 组件后退或者下一页跳转并不是前组件,那么 flag 判断会失效,导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage,会造成很奇怪的现象...当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。...指向了自己定义的数组原型方法,这样当调用数组api 时,可以通知依赖更新,如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。...,因此创建时先有父组件再有子组件;子组件首次创建时会添加mounted钩子到队列,等到patch结束再执行它们,可见子组件的mounted钩子是先进入到队列中的,因此等到patch结束执行这些钩子时也先执行...这是因为在Vue实例创建时,obj.b并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局 api $set():addObjB () ( this.
生命周期钩子 生命周期的顺序,见下图: ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。...首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。...当observable或promise返回data时,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...当没有配置base标签时,加载应用会失败。 23....Dirty check是比较新的数据跟老的数据的差别,如果看到有改变, 就用新的数据更新现有的视图。 31. DOM和BOM的区别是什么? Dom是document object model。
使用router对象的params.id 8. 2.0和3.0的区别 双向绑定: V2:使用Object.defineProperty V3:使用ES6的新特性proxy来劫持数据,当数据改变时发出通知...keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。...区分Real DOM和Virtual(虚拟) DOM 真实DOM 虚拟DOM 更新慢 更新快 可以直接更新HTML 无法直接更新HTML 消耗内存更多 较少的内存消耗 元素更新,创建新的DOM 元素更新...当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor(): 在 React 组件挂载之前,会调用它的构造函数。...当组件的 props 或 state 发生变化时会触发更新。
[云+社区] 实现方法 材料准备 首先你需要有一个解析在腾讯云上的域名(我确实只有一个),如下图所示: [DNSPod] 然后点击右上角的头像,进入API密钥页面,如下图所示: [点击API密钥] 在腾讯云...API密钥界面找到APPID对应的ID和Key即可,如下图所示: [创建DNSPod步骤] 保存好你的密钥,以备后用!...第三个接口是第一个接口和第二个接口的组合:先获取已有的解析列表,然后查找是否有相应的子域名存在解析记录,如果存在则对该子域名的记录值进行修改,如果不存在则增加一条新记录。...,记录需要修改的记录ID,后调用ModifyDynamicDNS接口;如果需要新建一个记录,并动态更新创建得到记录值时,可以先使用CreateRecord接口,记录创建好的记录ID,直接在ModifyDynamicDNS...然后,在获得IP地址后与先前的IP地址进行对比,判断IP是否发生变化,如果发生变化则将变动通过API提交。IP检查每隔一段时间运行一次,保证IP检测全方位无死角!
方法二:基于History新API(history.pushState()+popState事件) HTML5中history对象上新的API,同样能实现前端的路由。...有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。...,当依赖改变时,便会重新计算一个新值。...Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?...但实际用vue开发时,对于响应式数组,使用push、splice、pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢?
3.简述Vue的响应式原理 当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty poroupoti 将它们转为 getter/setter并且在内部追踪相关依赖...4.Vue.js特点 简洁:页面由HTML模板+Json数据+Vue实例组成 数据驱动:自动计算属性和追踪依赖的模板表达式 组件化:用可复用、解耦的组件来构造页面 轻量:代码量小,不依赖其他库 快速:精确有效批量...对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object...watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。...就好在div写一个表达式name,data里写入num和lastname,firstname,在watch里当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值,而计算属性
,当数据发生变化时,会调用 set 方法。...虚拟 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时,Vue 对比更新前后的虚拟 DOM,匹配找出尽可能少的需要更新的真实 DOM,从而达到提升性能的目的。...如何获取页面的hash变化 监听 $route 对象 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){...$store.state, JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage...update:当元素更新时,这个钩子会被触发(此时元素的后代元素还没有触发更新)。 componentUpdated:当整个组件(包括子组件)完成更新后,这个钩子触发。
在github上创建新分支 在企业级的开发里,每一个新功能或新模块的开发都是在一个新的分支上进行 开发完成后再合并到master主分支上 在github上创建仓库: Create a new repository...3.2 首页父子组件数据传递 由于home组件获取json数据后,应该向子组件传递数据,这就涉及到父组件向子组件传值的问题 父组件通过属性向子组件传值,子组件props接受数据 methods: {...json 此时,我们的vue中多出来一个生命周期函数钩子:activated 4.4 选择城市后返回页面 页面需要被修改 我们之前写的代码是固定的,虽然选择的城市发生变化,但是我们的我们的home页面中的内容并没有变化...传参的方式,使得每一个城市对应自己的json文件,就可以了 axios.get('/api/index.json?...observer: 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
我们在渲染页面的时候 会对新的虚拟dom和旧的虚拟dom进行对比 只渲染不同的地方,而不再是像之前只要发生变化,全部的真实dom都要重新渲染,所以提高了渲染的效率。...diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ,新的虚拟dom和旧的虚拟dom进行对比,这个对比的过程就是diff算法,会找到不同地方,只去渲染不同的地方,总的来说就是减少DOM...中的数据时自动调用 get 方法,当修改 data 中的数据时,自动调用 set 方法,检测到数据的变化,会通知观察者 Wacher,观察者 Wacher自动触发重新render 当前组件(子组件不会重新渲染...前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子 4.当执行指令对应钩子函数时,调用对应指令定义的方法 选项对象和常用api 什么是过滤器?...*/ 组件模块部分(插槽,单页面,通信) vue 组件父子,子父,兄弟通信 父传递子如何传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 (2)在子组件中通过props来接受数据
的api,当对控件进行拖拽时,我们可以对控件区域属性进行拷贝(默认属性)....至于画布区域、配置区域、图层区域的联动,主要是监听控件区域vuedraggable的onEnd事件来跟其他模块进行联动,比如创建一个新的图层,大致流程实现如下? ❞ ?...但是当父组件的传值是数组或者对象时,子组件中不仅能够直接修改,还不会报错,在子组件中改变这个对象或数组本身将会影响到父组件的状态。...原因是:父组件传递给子组件的,实际上只是一个引用地址,当子组件修改这个对象时,是真的修改了在堆空间中保存的数值,当然父组件中的值也会发生变化,但是引用地址没有进行修改 1.2 数据源配置模块 ❝通常我们数据管理是用来配置控件诸如图表的数据...:啊乐同学:图层右击出现的那个操作面板是如何实现的? ❞ 答:可以通过监听vue的@contextmenu.prevent事件,是h5的新特征,不过兼容性比较差