royluck

前端开发代码规范[https://gitee.com/royluck/nuxt-lovery/blob/master/_%E5%89%8D%E7%AB%AF%E5%BC%80...

royluck

最近测试将Blazor部署到Docker镜像，并使用Nginx进行集成，部署看上去没有问题，可在浏览器控制台发现如下问题：Error: Failed to start the...

royluck

- 转换数据 - 双向绑定 Props或者Vuex - 日期合并拆分

royluck

抓住数据的小尾巴 - JS浮点数陷阱及解法[https://zhuanlan.zhihu.com/p/30703042]

royluck

@羋渡 好久写的代码，index 应该是需要处理的对象所在的index

Vue项目解决苹果手机拍照上传图片翻转问题

在项目中，这里用到了input type="file"方式上传图片 在项目测试中发现，使用苹果手机点击input标签直接调用相机功能上传照片（从相册选择图片上传则正常），却发...

royluck

5980 7 1

royluck ·

1. 计算属性初始化时创建计算watcher并保存至实例的_computedWatchers中，由于lazy为true，get函数没有执行，所以value为undefined
2. 模板解析到对应的计算属性时，创建渲染watcher对象，由于lazy为false，所以会在构造器中执行get函数
3. 在get函数中，先将当前渲染watcher对象入栈（pushTarget），然后执行计算属性对应的getter函数
4. 此时的getter函数即为计算属性初始化时创建的getter（computedGetter），然后取出第一步中放入_computedWatchers数组中的watcher，判断到dirty为true，执行其evaluate方法
5. 在evaluate方法内调用到get函数，此时再将当前的计算watcher入栈（pushTarget），然后执行getter函数（此getter函数为创建计算watcher对象时传入的getter，即用户定义的计算属性对应的get函数），getter函数执行的过程即为依赖收集的过程，一个或多个dep会保存到该watcher对象的newDeps数组中（watcher和dep会互相持有对方的引用）。完成后将计算watcher出栈（popTarget），所以此时的Dep.target变回渲染watcher。然后执行cleanupDeps函数，将newDeps的数据移动到deps中，最后将dirty置为false
6. 继续向下执行，执行计算watcher的depend函数，这里设计的很巧妙，depend函数内部会遍历上一步得到的deps数组，然后对其依次执行dep.depend函数，而dep对象内部则会将Dep.target(渲染watcher)添加到当前dep对象中，相当于是帮助渲染watcher收集了依赖。然后渲染watcher出栈，执行cleanupDeps函数，此时Dep.target为undefined
7. 最后会返回计算watcher对象的value属性，这个值即为computed属性对应的缓存，在dirty为false时会直接返回该值
8. 举个例子，假如现在定义一个计算属性fullname(){return this.firstname + this.lastname}，当this.firstname有更新时，会执行该属性对应的dep对象的notify方法，即遍历subs数组内的watcher执行其update方法，经过前面的分析，subs数组内的watcher对象至少有两个，即计算watcher和渲染watcher。所以计算watcher会将dirty置为true，然后渲染watcher会再次执行到evaluate函数刷新计算属性的值，并更新视图
9. 如果没有在模板中使用，直接在JS代码中使用，虽然第一次使用时会进行value求值，但后续的使用就会直接使用value缓存，如果完全没使用到计算属性，那么它的值就一直是undefined，这就是它相比methods优秀的地方

逮虾专业户 评论自关于computed源码

royluck

使用JS获取当前页面的URL(网址信息)[https://blog.csdn.net/u013288800/article/details/82787641]

royluck

JavaScript 中的树数据结构[https://stackfull.dev/tree-data-structure-in-javascript] 前端开发-- 二叉树的...