随笔分类 - vue
摘要:抽空看了下vue源码,记录下new Vue()的过程。 在package.json中运行命令添加sourcemap,打包后在源码案例目录下创建新的html文件,运行后可以在控制台断点调试 测试代码 <script src="../../dist/vue.js"></script> <div id="
阅读全文
摘要:这段时间一直在学习three,vue3 和TS 一直有了解但做项目都没有使用,趁着有时间,想着自己做个小demo检测所学成果。 安装three,@types/three,我使用vue创建项目,TS版本和three 不兼容,然后又下载的最新版本。 然后封装一个类,初始化场景,相机,控制器,渲染器,后期
阅读全文
摘要:上篇主要对数组格式数据进行响应式处理,vue 有set 和del 方法可以对数组和对象进行修改和删除。代码如下: 数组类型的数据修改和删除时候,只需要调用splice方法就可以,在上一篇数组响应是在get方法中属性为数组格式时进行依赖的注入,现在在每个属性都注入,这样调用set方法时候,才能在_ob
阅读全文
摘要:由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,而amfe-flexible是lib-flexible的升级版,所以现在我就只使用amfe-flexible了。 vw 作为布局单位,从底层根本上解决了不同尺寸屏幕的适配问题,因为每个屏幕的百分比是固
阅读全文
摘要:继上文,监听data后,data中的每个属性都有响应式效果,那么下面这种情况会触发响应式吗? import { observe } from "./reactive"; import { Watcher } from "./watcher"; const data = { arr: ["a"], }
阅读全文
摘要:上篇优化了重复的监听,但当data数据为下图一个嵌套数据时,深层嵌套的属性没有响应效果。 import { observe } from "./observer"; import { Watcher } from "./watcher"; const data = { test: "aa", tes
阅读全文
摘要:上次简单的模拟了数据响应式,当我们第一次修改值依赖函数会执行一次,再修改一次值依赖函数会执行两次,这需要做下去重,去掉重复绑定的依赖。采用的方法是给每个dev实例添加一个唯一标识id,通过Set去重。 代码如下:dep实例添加一个移除方法,和id属性 let uid = 0; export defa
阅读全文
摘要:工作中大部分项目使用vue2做,但一直局限于使用,终于有闲暇时间可以学习下源码,网上优秀的源码分析很多,此文章只是记录个人所学,有问题欢迎大家指出,欢迎讨论,互相学习。 下面是我对vue2响应式数据的简单模拟,还需要亿点点补充。 vue2响应式数据原理主要通过 Object.defineProper
阅读全文
摘要:项目开发中封装了许多图表组件,每次新增组件或者组件迭代都要复制前后端的文件,为了避免重复操作,使用一键命令创建组件模板文件。 效果如下: 在前端根目录创建Markfile 文件,里面是我们自定义的命令: addcom: node build/addCom.js $(filter-out $@,$(M
阅读全文