![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小秧@
专注于webgl, webgpu,three.js, cesium.js等web3d的前端开发工程师
展开
-
Vite打包 - 打包体积可视化面板
其次在 vite.config.js中配置,和使用这个插件。最后运行打包命令,之后在浏览器就显示对应的可视化面板。首先我们下载对应的插件。原创 2022-10-18 23:21:11 · 968 阅读 · 2 评论 -
Vite基础配置之 - 分包
比如说,我使用了 loadsh.js 的东西,那么我们在打包的时候,就会把 loadsh 相关资源也会打包进来,这个是没有问题的,此时是将 loadsh 的东西 与 我们自己写的相关代码合成一个文件,记住是一个文件。而且,这个文件的名字,每一次都会发生变化的(源代码发生变化),所以当用户去访问我们的页面时,请求的资源文件内容有 : 第三方资源包代码 + 自己的业务代码,而真正需要跟新的只有 自己的业务代码,所以我们进行分包,在vite.config.js中的。还是举个例子,来回忆一下吧,什么呢?原创 2022-10-18 23:06:07 · 4425 阅读 · 1 评论 -
《Vue设计与实现》第四章 第6节 计算属性
主要是书上已经讲的很清楚了,我就不再说了。effect函数中computed 函数中原创 2022-06-05 16:53:54 · 174 阅读 · 1 评论 -
《Vue设计与实现》第四章 第五节 调度执行(二)
我们要在上一章的基础上,实现一个功能。输出由输出可知,字段obj.foo的值一定会从1自增到3,2只是它的过渡状态。如果我们只关心最终的结果而不关心过程,那么执行三次打印操作是多余的,我们期望的打印是:解决办法`代码effect中...原创 2022-06-05 15:45:23 · 138 阅读 · 0 评论 -
《Vue设计与实现》第四章 第五节 调度执行
我们如果能实现,决定副作用函数执行的时机,次数及方式。我们可以为effect函数设计一个选项参数options,允许用户指定调度器。effect函数定义时原创 2022-06-05 02:29:41 · 394 阅读 · 0 评论 -
《Vue设计与实现》第四章 第四节避免无限递归循环
上面的代码,会导致无限的递归循环。因为在这个语句中,既会读取obj.foo的值,又会设置obj.foo的值,而这就是导致问题的根本原因。如何解决如果trigger触发执行的副作用函数与当前正在执行的副作用函数相同,则不触发执行。...原创 2022-06-05 02:06:11 · 285 阅读 · 0 评论 -
《Vue设计与实现》第四章 第三节 嵌套的effect
嵌套的effect代码从上面这段代码的执行来看effect函数的定义结果时这样的结论如何解决这个问题4. 我们需要一个副作用函数栈 effectStack。5. 在副作用函数执行时,将当前的副作用函数压入栈中。6. 待副作用函数执行完毕之后将其从栈中弹出,并始终让activeEffect指向栈顶的副作用函数这样就完美的解决了这个effect嵌套的问题。...原创 2022-06-05 00:56:48 · 233 阅读 · 0 评论 -
《vue设计与实现》第四章 分支切换与 cleanup
在上一章节中,我们实现的响应式系统还存在一个问题那就是在三元运算符中一开始 obj.ok 的初始值为 true, 回导致副作用函数执行时,会有obj.ok, obj.name 两个属性的读取操作。但是当我们将 obj.ok 的值修改为 false时,会重新触发副作用函数因为obj.ok的值为 false,所以是不会有读取 obj.name操作的。意思就是,往后接下来 obj.name修改了,是不会也不需要触发副作用函数的执行,但是按照上一章的代码实现,是不同实现这个功能的。总结该如何解决呢?原创 2022-06-04 22:10:55 · 472 阅读 · 1 评论 -
《Vue设计与实现》第四章 设计一个响应设系统
我们创建了一个 WeakMap(),将来我们会往里面添加一系列数据。但是往里面添加数据,要符合一定的数据结构。好,现在让我们来编写代码在fn()函数执行时,因为有 obj.name 读取操作,就会触发 get() 拦截器。然后会根据,obj , name初始化一系列的数据结构。并且会将 fn 函数添加到 name 对应的 new Set()桶中。第二次修改在第二次修改中,会触发 set () 函数,导致 name 对应的 new Set()桶中的函数全部执行。最终的效果就是....原创 2022-06-04 18:38:13 · 227 阅读 · 0 评论 -
Vite的优化配置
1. Vite的优化配置目录base别名打包压缩代码生产环境下清空console.log打包出的文件整理创建一个 Vite 构建的 Vue-TS 项目npm create vite@latest my-vue-app -- --template vue2. base这个是给每个资源,设置一个跟路径,这个是在生产环境下才会由效果的。这个可以解决在项目部署时,有些资源访问不到的问题。我们看到,这个 img 的路径是 /src/assets/logo.png 的。这个会有一个问题,原创 2022-05-04 15:05:44 · 4012 阅读 · 2 评论 -
Cesium中添加entitie模型,实现贴地。
1.Cesium中添加entitie模型,实现贴地。2. 添加模型const createModel = (url) => { const entity = viewer.entities.add({ name: '这是一个模型', position: Cesium.Cartesian3.fromDegrees({ -123.0744619, 44.0503706, 100 }), model: { uri: url, minimumPixelSize: 128,原创 2022-03-20 01:50:09 · 4890 阅读 · 1 评论 -
Vue3.x的expose是什么?
1.Vue3.x的expose是什么?一个将暴露在公共组件实例上的 property 列表默认情况下,通过 refs、refs、refs、parent 或 $root 访问到的公共实例与模板使用的组件内部实例是一样的。expose 选项将限制公共实例可以访问的 property。好上面是vue官方的解释,现在我举个例子。父组件<template> <div>我是一个父组件</div> <!--HelloWorldVue 是一个子组件或者一个公共组件原创 2022-02-16 23:44:37 · 2453 阅读 · 7 评论 -
vue3.x的自定义指令动态指令参数
1.vue3.x的自定义指令参数import { createApp } from 'vue';import App from './App.vue';app.directive('time', { created() { console.log('created生命周期函数') }, beforeMount:(el) => { // console.log(binding, '什么') el.style.color = '原创 2022-02-12 01:49:35 · 4064 阅读 · 6 评论 -
Vue3.x的自定义指令
Vue3.x的自定义指令以input获取焦点为例定义全局自定义指令import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.directive('focus', { mounted(el) { el.focus() }})app.mount('#app')使用全局自定义指令<input v-focus /> 注册局部自定原创 2022-02-11 10:27:36 · 578 阅读 · 0 评论 -
vue3.x过滤器
1.vue3.x过滤器vue3.x是不再支持过滤器了,已经将器移除了。取而代之的是:计算属性,方法vue过滤器2.计算属性<template> <button @click="changzhangs">修改张三</button> <div>{{changeName}}</div></template><script>export default { data(){ return {原创 2022-01-31 15:28:01 · 1642 阅读 · 0 评论 -
vue3.x全局自定义指令Cannot read properties of undefined (reading ‘deep‘)
1.vue3.x全局自定义指令Cannot read properties of undefined (reading ‘deep’)最近在学习vue3.x的全局自定义指令时,根据官方文档去学习还是出现了问题。就是vue3.x的全局自定义指令,所以记录下来避免踩坑。import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.mount('#app')app.directive(原创 2022-01-31 13:29:07 · 2516 阅读 · 0 评论 -
vue-router的原理,手写vue-router
1.vue-router的原理,手写vue-router要知道vue-router的原理,首先还是要看vue-router是怎么使用的但是大多数使用过Vue的都知道,vue-router是怎么使用的,所以直接总结会有两个全局的组件 router-link 及 router-view,这两个全局组件其二router-link会有一个to属性,是必传的属性会监听哈希值的变化,根据不同的哈希值,渲染对应的组件只要在main.js中挂载了router这个属性,其他的组件,都会有这个属原创 2021-03-21 00:42:28 · 161 阅读 · 0 评论