小帅的公司最近在开发一套销售系统。 老板想把上个月，这个月和下个月预计的销售数据分别在PC，平板电脑，手机端显示，以便多维度激励销售人员拼搏努力 image.png 小帅心想，这有何难？...观察者模式(Observer Pattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。 观察者可以动态的添加和删除，不会影响主题类。...,上个月销售金额：90.0万,这个月销售金额：100.0万,下个月预计销售金额：105.0万 手机上显示报表,上个月销售金额：90.0万,这个月销售金额：100.0万,下个月预计销售金额：105.0万...观察者的新增和减少，完全不会影响到主题，对主题来说无感知，实现了解耦。...不同的应用场景和需求下，这个模式也有截然不同的实现方式，有同步阻塞的实现方式，也有异步非阻塞的实现方式； 有进程内的实现方式，也有跨进程的实现方式。。。
本文字数：747 字 9图 阅读完需：约 4 分钟 点击上方“青年码农”关注 回复“源码”可获取各种资料 FullCalendar 是一个支持 React、Vue、Angular 和原生 JavaScript...此教程是基于Vue2，FullCalendar 同时也支持 Vue3，文档在https://fullcalendar.io/docs/vue 官方指南提示不会深入介绍Vue的使用，需要自己根据示例和可运行的项目参考...三 使用 新建一个Vue组件或者在原有组件上导入，这里我就用一个新的组件（HelloWord.vue）作为示例，方便查看。...导入了核心组件和一些扩展组件，在 components 中注册组件 最后使用 FullCalendar 运行项目，日历大概就是这个样子。 options 属性就是控制日历的关键。...这里面列举了部分属性和事件，需要更详细的api请看官方文档：https://fullcalendar.io/docs 四 参考资料 官方：https://fullcalendar.io/ 文档：https
，现在很多框架也都帮我们完成了这部分操作，我们不用再去子元素、父元素，只负责数据逻辑即可，如Vue，但是如果我们在某些条件下，依然需要操作Dom时，怎么办呢？...Vue提供了ref、$ref。本次，我们就详细讲讲这两个属性。 1.ref ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。...ref="children"> import children from 'components/children.vue...$refs 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。...$refs.age $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问
先放出我个人基于 Electron 做出的效果 (到目前为止)： 下面开始第一天的构思和想法。 寻找方向 首先，我已经好长时间没折腾代码了，又对新技术充满了好奇。...但也不是毫不目标的找，至少需要满足以下条件： 1.基于 Electron + Vue； 2.Vue 至少是 3，而不是 2 了； 3.使用 TypeScript； 4.使用 Vite，至少逼格比 Webpack...日历从结构和布局上来说，都是比较复杂的，而且我看了一圈很多关于 Vue 的组件框架，基本都提供了 Calendar 组件，但本身的功能不多，未来的扩展性似乎不足。...基于此，我又开始了全网搜索了，最后还是找到了几乎都会参考和使用的 FullCalendar[4]。...小结 有了 timestamp 作为参考，也有了 vite-electron-builder 脚手架，再以 FullCalendar 为主要核心构建自己的日历，基本可以开始我的折腾和自学之旅。
我们知道v-model可以用于input等标签，当做语法糖进行绑值 对于我们自定义的组件，其实也可以使用 官方文档 例如此处我们可以让input改变值时，父组件绑定的值一并改变 ...script> 父组件 当 触发一个 change 事件并附带一个新的值的时候...，这个 lovingVue 的 property 将会被更新 我们还可以使用model给这这个v-model绑定的prop和事件取别名： <input type="checkbox...Boolean, default:()=> false } } } 此处用v-bind:value一样<em>的</em>效果
不支持异步，当computed内有异步操作时无效，无法监听数据的变化 3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的...在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。...不支持缓存，数据变，直接会触发相应的操作； 2.watch支持异步； 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 4....当一个属性发生变化时，需要执行对应的操作；一对多； ? 监听的对象也可以写成字符串的形式 ? 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。...这是和computed最大的区别，请勿滥用。嗯，就酱~
比如回车事件是: @keyup.enter.native="" 比如按下事件 @keydown.native="" 当下面不管用的时候加个 .native @keydown（键盘按下时触发），@keypress...(键盘按住时触发)，@keyup(键盘弹起) 获取按键的键码 e.keyCode @keyup.13 按回车键 @keyup.enter 回车 @keyup.up 上键 @keyup.down 下键 @
1. vue cli 入口文件 ---- public/index.html 类似PHP框架的 public/index.php 2....全局脚本文件 main.js 项目入口 ---- import 和 require 是JS模块化编程使用 require/exports 是CommonJS/AMD中为了解决模块化语法而引入的 import...Vue from 'vue' // 以 ./ 开头代表引入的是组件，./ 代表的是 src 目录 import App from '..../App.vue' 3. export ---- 可以将 export default { name: 'App', components: { HelloWorld } } 理解为以下方法的第二个参数...Vue.component('', {})
前面讲了关于vue组件间数据传递，如果没有看过，关注公众号，有历史推荐，讲的比较详细，有代码，新手也能看懂，今天说一说attrs和listener。...疫情之前，在家关了这么久，也没怎么更新，最近在看大佬的项目，学习下新的思路。之前项目上，父子组件传递数据，都是用props去接收和this.emit触发父组件方法。...这次我们用attrs和 $attrs 官方解释：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。...通俗易懂的说就是用$attrs可以获取父组件传递过来的所有属性，不包含class，style和props中接收的。...来接收来自父组件的信息 在子组件中调用孙子组件，绑定$attrs，孙子组件就可以直接接收父组件的内容 多层传递省时省力 $listener 官方解释：包含了父作用域中的 (不含 .native 修饰器的
Vue项目开发中，有这么两个属性比较容易混淆，如果不特别注意，用法比较相似，这两个属性就是computed和watch，其实这两个还是有很大差别，下面就讲讲这两个属性的用法及不同 先说说为什么比较像，我们看下面代码...通过代码和gif可以看到当我输入框在变的情况下，b和c数据始终保持一致，这种效果项目中可能会用到。所以说很多人容易混淆，分不清用法。接下来就说说他们的用法和不同。...computed里的数据有get和set方法，但是我们常用的是get方法，一般很少用set方法。...这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。...watch监听不支持缓存，数据发生变化，会直接触发相应的操作，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；具体内容请参考另外一篇文章 Vue中watch的详细用法。
Vue 3的响应性系统 在Vue 3中，响应性系统是构建动态Web应用程序的关键部分。Vue使用响应性系统来跟踪依赖关系，使数据更改能够自动更新视图。...这使得Vue应用程序在数据变化时能够高效地更新DOM。Vue 3引入了新的Proxy对象来替代Vue 2中的Object.defineProperty。...Proxy对象允许更细粒度的拦截和控制属性的访问和修改。这使得Vue的响应性系统更加灵活和高效。然而，有时候过于灵活也可能导致问题。...使用toRaw toRaw是Vue 3中的一个全局函数，它接受一个reactive或ref对象，并返回该对象的原始不代理版本。...总结 toRaw和markRaw是Vue 3中引入的新API，用于更精细地控制对象的代理和响应性。它们提供了在需要时绕过代理或禁用响应性的能力，有助于提高性能和更好地与第三方库进行集成。
bug收集：专门解决与收集bug的网站 最近，在写在项目中很多的地方，用到了async和await。...发现了和理解的有些不一样， 下面有几道网上看到的题，大家可以做做，看看和你想的是否一样 async function test() { console.log(0) await console.log...} test(); x = 1; 输出：3 原因是：await 2这次被放在了x表达式的前面，所以x的取值操作是异步执行的，也就是说x = 1会先被执行，然后才是test函数中x的取值操作，由于test...函数中的x形成了闭包，所以x = (await 2) + x相当于x = (await 2) + 1，所以最终输出：3 结论： 上面代码的关键是：test函数中x的取值操作与x = 1这行代码执行顺序先后的问题...，所以我们可以得出一个结论：await会阻塞其所在表达式中后续表达式的执行。
在 vue 中，一个虚拟节点模型如下： { el: div // 对真实的节点的引用 tag: 'DIV', // 节点的标签 sel: 'div#v.classA' // 节点的选择器...上面第 3 步进行子节点比较 updateChildren 采用的是 头尾交叉对比，大致就是 oldCh 和 newCh 各有两个头尾的变量 StartIdx 和 EndIdx，它们的 2 个变量相互比较...如果 4 种比较都没匹配，如果设置了 key，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较...交叉对比源码参考 Vue/patch.js。 key 的作用 这里终于点题了，React/Vue 中 key 的作用是什么呢？...参考文章： 解析 vue2.0 的 diff 算法 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
reactive的特点1、仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。...返回的是一个原始对象的 Proxy，它和原始对象是不相等的。...import {reactive} from 'vue'let o = {name: 'zs', info: {age: 1}}let obj = reactive(o)setInterval...这里的属性值应该是一个基本类型，object 类型的话不会失去响应式import {reactive} from 'vue'let o = {name: 'zs', info...3、ref 在模板中的解包
$router push() 跳转到一个路由，并压入历史堆栈 $route params 取子路由的参数 区别 $route为当前router跳转对象里面可以获取name、path、query、params...等 $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 参考 vue2.0 $router和$route的区别
没用过react开发项目，但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候，vue会警告。但是这个key的作用是什么。...vue官方文档： 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。...在这个过程，diff算法应该是判断新旧树是否相同，相同就复用，不相同就删除旧的创建新的。带key的当然是每次新增都找不到可复用节点，要删除和创建，对性能影响更大。...而不带key时节点的就地复用，省去了删除和创建的开销，只需要修改内容，所以刻意默认行为以获取性能上的提升。 两个图也应该很明显的表现出不带key会带来一些隐藏的副作用，比如上图的状态错位。...其实在我看来，带key和不带key虽然有性能上的争议，但是对于用户来说基本没什么区别，为了消除一些异常，建议还是带上key。
$router.push({path:'register',query:{plan:'123'}}) push方法其实和是等同的。...注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。 2、go 页面路由跳转 前进或者后退this....二、route对象route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。...$route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 3....$route.hash当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。 5. $route.fullPath 完成解析后的 URL，包含查询参数和hash的完整路径。 6.
观察者模式，指的是定义一种对象间的一对多的关系，当一个对象的状态发生变化的时候，所有依赖于它的对象都将得到通知并更新自己。...现在要说的分歧在这里： “推” 的方式是指，Subject 维护一份观察者的列表，每当有更新发生，Subject 会把更新消息主动推送到各个 Observer 去。...“拉” 的好处包括： 1、如果观察者众多，Subject 来维护订阅者的列表，可能困难，或者臃肿，把订阅关系解脱到 Observer 去完成。...—————————————————————————————————————- 2012-2-27 补充： 事实上 “推” 和 “拉” 可以比较的内容太多了，比如： 客户端通常是不稳定的，服务端是稳定的，...，至于是否需要获取和什么时候客户端来获取这些数据，完全由客户端自行确定。
/views/Bpp.vue" export default { name: "App", data() { return { msg1: "歌谣爱你呀1",.../Cpp.vue" export default { name: "B", props: ['msg1'], data() { return {}...(class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部 组件，一般用在子组件的子元素上 运行结果 定义$listeners 包含了父作用域中的 (...不含 .native 修饰器的) v-on 事件监听器。.../src/views/HelloGeyao.vue" export default { data(){ return{ msg:"geyao", } },
第一反应是将当前的日期的月份进行加减1,这样是不行的，因为如果今天是31号，那么碰到下个月只有30的时候，这样就会碰到点击下月，直接切换了两个月。更别说2月这个月份天数不固定的月份。.../** * 以传入参数作为基准获取下个月的第一天日期 * @param {*} firstDayOfCurrentMonth */ export const getFirstDayOfNextMonth...） 因为对于日历组件本身来说，header和body是属于同一个父组件的同级组件，数据传递可以依赖于父组件进行传递，这里我使用的是观察者模式实现。...subject，因为ObserverList的存在是为了将subject和内部维护的observers分离开来，清晰明了的作用。...subject，因为ObserverList的存在是为了将subject和内部维护的observers分离开来，清晰明了的作用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
