##### 翻看文档实在没找到异步组件加载成功后的回调,获取ref写个setTimeout延迟个一两秒可以,万一网速慢就GG,所以还是得明确的知道这个组件什么时候下载引入成功的。 目前的思路是把defineAsyncComponent包装一层,获取import后的promise就行。 ```js import { defineAsyncComponent,defineComponent } from "vue"; /**   * 创建一个异步组件  * 方便之后能知道该组件是否下载完成  */ function createAsyncComponent(fn){     //注意使用的时候 promise需要返回原本的res     let component_ = undefined;     function componentFn(){         if(component_) return component_;         const component = fn();         component_ = component;         return component;     }     const component = defineAsyncComponent(componentFn);     return {         component:component,         componentFn:componentFn,     }; } const asyncComponent = createAsyncComponent(()=>{ return import("@/views/research/asyncComponent"); }); export default defineComponent({     name: 'Component',     components: {          asyncComponent:asyncComponent.component,     }, setup() { asyncComponent.componentFn().finally(()=>{ console.log("组件已经引入!(不代表已经渲染)"); }); }, }); ``` 如果在使用组件前提前调用且是 .then() 调用的话,需要原封不动的把组件模块数据返回出去,像这样: ```js componentFn().then((res)=>{ console.log("组件已经引入!(不代表已经渲染)"); return res; }); ```
1月前
10348
vue
### 使用到的插件 `Prettier` , `vetur` 具体JSON ``` { "workbench.iconTheme": "material-icon-theme", "vsicons.dontShowNewVersionMessage": true, "editor.suggestSelection": "first", //配置未使用变量变灰 "editor.showUnused": true, // 重新设定tabsize "editor.tabSize": 4, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", "files.exclude": { "**/.classpath": true, "**/.project": true, "**/.settings": true, "**/.factorypath": true }, "explorer.confirmDelete": false, "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "workbench.colorTheme": "Nebula", "window.zoomLevel": -1, "terminal.integrated.rendererType": "dom", "python.jediEnabled": false, "update.mode": "none", "update.enableWindowsBackgroundUpdates": false, // "[javascript]": { // "editor.defaultFormatter": "HookyQR.beautify" // }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.showUnused": true, }, "vetur.validation.template": false, "todo-tree.tree.showScanModeButton": false, // 格式化插件设置为 prettier,以下是prettier的配置 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "prettier.tabWidth": 4, // 缩进字节数 "prettier.printWidth": 100, // "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号) "prettier.useTabs": false, // 缩进不使用tab,使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote": true, // 不使用单引号代替双引号 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行 // 箭头函数参数括号 默认avoid 可选 avoid| always // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号 // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号 "prettier.arrowParens": "avoid", "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }" // "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置 "prettier.endOfLine": "auto", //不让prettier使用eslint的代码格式进行校验 "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.jsxBracketSameLine": true, // 在jsx中把'>' 单独放一行 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 // "prettier.parser": "babylon", // 格式化的解析器,默认是babylon "prettier.requireConfig": false, // 不让prettier使用tslint的代码格式进行校验 } ```
2月前
18833
VSCode
#### 之前学习的时候用过vue3,过了过文档,现在公司的新项目就是vue3写的,开写了几天了,写起来挺不错的。 想吐槽一下vite,有点太智能了吧,只要在js里用到一些vue的方法,连引入都省去了,看过打包后的js,里面给你自动加上了引入,看代码时给我一种错觉,还以为是放在window上的呢,再配合script setup 的写法,方便是太方便了,方便过头了,什么函数式写法的语法糖, 看起来以为是个函数,其实就是打包后给你替换了一下,最开始写的时候还有点误导性,我反正是太不推荐用这个了,还是该引入的引入,正儿八经的写法好一些。 各有各的爱好吧,我反正是太不推荐了,更加配置化编程的感觉了。 写了几天还是学到了一些东西,当时写 storagex-js 工具的时候,使用proxy深度代理深层次的对象,使用了很蠢的方法,递归把每个对象都变成代理对象(这样源对象已经改变了,而且对象层次太深性能不好),来实现对象改变后相应的去更新本地数据,代理对象之间的赋值这些加了很多优化,总体来说管你怎么赋值都能相应更新到本地,看了vue3的处理方法就太科学了,不管层次多深的对象都只代理一层,当访问的一个属性的值是个对象的时候再去代理该对象并返回该对象(已经代理过的对象不会再代理),这样不仅性能好,而且查看源对象的时候结构一点都没有破坏,用到那一层就代理到那一层,这样的处理很科学。对于基础数据的话就包装一层来代理,这样只要数据一变化就能监听到。使用Api的形式来代理,这样我不管在那个文件都能生成一个可用于组件中的数据了。 使用 onMounted() 来注册生命周期钩子时很疑惑只使用一个参数的时候它是怎么注册到当前实例上的,但考虑到调用setup后再去render,有其他组件再去调用其他组件的setup后render,生成实例的时候是有先后顺序的,这样就很容易取到实例,用caller来找的话能不能行呢?我在定时器里注册的钩子能否触发呢?源码又看不进去,哈哈! 还没有用TS来写正式的项目,现在已经很香了,很期待。 [storagex-js源码(已经放弃了)](https://github.com/wurencaideli/storagex-js) [storages-js源码(更简单)](https://gitee.com/wuzhanggui/storages-js)
2022-07-13
104119
vue3
#### 前端开发时,使用localStorage,sessionStorage这些都是家常便饭了,虽说它们自带的Api其实也挺方便的,但我觉着可以更甚! #### 相比与之前的storagex-js,现在这个更简单,也更手动化,之前那个使用了proxy来深度代理(可配置是否深度代理),然后监听数据的变化来存进本地,虽说做了很多优化,但还是觉得不够简单易用,现在这个才是超级简单,使用说明如下。 首先是安装它了 ``` npm install storages-js ``` 然后只需两行代码即可使用 ```JavaScript import StorageS form 'storages-js'; let storages = new StorageS('test',undefined,{modelName:'local'}); console.log(storages.value); //undefined storages.value = {a:1}; //相应的保存在本地中 console.log(storages.value); //{a:1} ``` ```JavaScript StorageS构造方法比需3个参数 key:string 浏览器是根据键值对来把数据存入本地,所以key就是键名了。 value:any 初始化该键时的数据,建议是可JSON序列化的数据。 option:object 一些配置属性,已有属性介绍 model:object 需要自定义存储时配置(不需时不写) modelName:string 存储模式的选择,可有的值 local,session,uni,wx realTime:boolean 是否是实时性的,默认false ``` 对一个StorageS的实例来说只需要直接给实例的value属性赋值,则相应更新本地数据,对存入的数据会包装一层,以便知道数据的类型,对于使用者则无需关心,是不是相当简单呢。 [开源地址,有用的话点个start吧](https://gitee.com/wuzhanggui/storages-js)
2022-07-05
113970
npm storages-js
一篇文字
![一篇文字](https://w.wallhaven.cc/full/e7/wallhaven-e7m7w8.jpg) ### 在写js的时候不可避免的会使用等于操作符来进行判断操作,而等于操作符在比对时会将符号两端的数据进行类型转换,有些转换规则是必须要知道的。而全等操作符是不会进行类型转换的。 #### 等于和不等于 等于使用 **(==)** 表示,如果操作数相等则返回true,不等号用 **(!=)** 表示,与等于相反。这两个操作符都会先进行类型转换(强制类型转换)再确定操作符是否相等。转换规则如下: 1:如果任一操作数是布尔值,则将其转换为数值再比较是否相等。false转换为0,true转换为1。 2:如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等。 3:如果一个操作数是对象,另一个不是,则调用对象的valueOf()方法取得其原始值,再根据前面的规则进行比较。 在进行比较时,这两个操作符会遵循如下规则。 1:null和undefined相等。 2:null和undefined不能转换为其他类型的值在进行比较。(特殊) 3:如果有任一操作符数是NaN,则相等操作符返回false。(即使两个操作数都是NaN,相等操作符也返回false,因为按照规则,NaN不等于NaN) 4:如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true。 一些特殊情况以及比较结果 ``` js null == undefined //true "NaN" == NaN //false 5 == NaN //false NaN == NaN //false NaN != NaN //true false == 0 //true true == 1 //true true == 2 //false undefined == 0 //false null == 0 //false "5" == 5 //true ``` #### 全等和不全等 全等用 **(===)** ,不全等用 **(!==)** ,返回值与用法与相等不相等操作符类似,只不过它们在比较时不转换操作数。 比较全等时只要两个操作数类型不一致都返回 false。 > 摘抄自权威书籍,防止记不住而且百度的杂七杂八的不准确。
2022-06-29
114391
js JavaScript
下一页
最近