lotte

基于 Vue 3 Composition API 的高质量 Hooks 库

useAsyncState是一个用于管理异步状态的自定义钩子函数。它是你简化异步操作的最佳拍档，就像鱼儿离不开水，雄鹰离不开天空，你老婆离不开你，同时异步也离不开 useAsyncState，它简化了在Vue组件中处理异步操作的过程，如发送网络请求、加载数据或执行其他耗时的任务。

百度地图绘制围栏，圆形，多边形，行政区域。

fromData 树形全部数据 fromData已选数据。

可以通过this.$options.data().xxx来获取初始值v-model 语法糖荣耀黄金1. Vue的优点？Vue的缺点？优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长2. 为什么说Vue是一个渐进式框架？渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以3. Vue跟React的异同点？相同点：

1. Vue 实例的 data 属性，可以在哪些生命周期中获取到？A. beforeCreateB. createdC. beforeMountD. mounted2. 下列对 Vue 原理的叙述，哪些是正确的？A. Vue 中的数组变更通知，通过拦截数组操作方法而实现B. 编译器目标是创建渲染函数，渲染函数执行后将得到 VNode 树C. 组件内 data 发生变化时会通知其对应 watcher，执行异步更新D. patching 算法首先进行同层级比较，可能执行的操作是节点的增加、删

写在前面本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式：props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具)开始搞事情~举一个栗子俗话说的好，学习不写demo，那就是耍流氓~本篇文章将围绕下面这个demo，如下图所示：...

参考:https://github.com/kaorun343/vue-property-decorator怎么使vue支持ts写法呢,我们需要用到vue-property-decorator,这个组件完全依赖于vue-class-component.首先安装: npm i -D vue-property-decorator我们来看下页面上代码展示:<template> <div> foo:{{foo}} defaultArg:{{defa...

前言　在vue源码目录中有个core文件夹，其核心功能比如组件、数据绑定、虚拟dom等等都在里面。core下面又分为了components、global-api、instance、obsever、util、vdom六个部分，这次还是先以util开头，里面也封装了一些工具型的函数并且引用了外层share里面的工具函数。debug.js error.js　debug.js里面主要封装的是用于开发阶段的调试相关的方法，比如一些提示警告。error.js里面只封装了一个handleError方法，用于处

工具函数是每个框架类库的基本的组成部分，本篇分析的是/shared/util.js文件，从中挑选的部分方法函数，比较常见基础的方法我就跳过了。值得一说的是，编译合成前的源码都用到了flow.js，可以理解为一个javascript的静态类型检查器，有点像typescript，可以对js的变量进行类型定义、检查错误等，然后再通过编译生成正常的js代码，文件开头有/@flow/注释的都是用到了flow的。1.makeMap()　先来看这个makemap，传入一个字符串和是否区分大小写的标示符，然后在..

判断两个对象是否相等对象引用类型不能像字符串，数字，布尔值那样 ===去判断借用vue源码中looseEqual 方法，比较大团队写的好 两个对象分别对比，遇到引用类型再次递归对比，而不是简单的JSON.stringfiy()去做比较，这样会出现报错情况举例： a:{name:'小明',age:20} b:{name:'小明',age:20}a对象中一次遍历name和age与b对象中name和age对比，然后再用b对象中name和age与a对象中name和age对比...

/***Createdon2018/11/13.*/importaxiosfrom'axios'importutilsfrom'@/assets/js/utils'importiViewfrom'iView'letjwtNotFound=0/***抽象接口请求方法*@returns{*}*/window.requestList=[]exportfunctioncreateAPI(){axios....

setup类型：Functionsetup函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点。 调用时间 在创建组件实例时，在初始 prop 解析之后立即调用setup。在生命周期方面，它是在beforeCreate钩子之前调用的。 模板使用 如果setup返回一个对象，则该对象的属性将合并到组件模板的渲染上下文中： <template> <div>{{ count }} {{ object.foo }}</...

const app = Vue.createApp({ data() { return { a: 1, b: 2, c: { d: 4 }, e: 'test', f: 5 } }, watch: { a(val, oldVal) { console.log(`new: ${val}, old: ${oldVal}`) }, // 字符串方法名 b.

router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前,什么什么之后,英文叫hooks,专业点叫生命周期，装逼点可以叫守卫...vue-router中也存在钩子的概念,分为三步记忆 全局守卫 路由独享守卫 组件独享守卫 全局守卫很好理解，全局守卫就是能监听到全局的router动作 router.beforeEach 路由前置时触发 const router = new VueRouter({ ... })...

我们在.vue文件中输入自定义指令，快速生成vue模板1.首先在vscode编辑器中文件-->首选项-->用户片段-->点击新建全局代码片段文件上方输入框中输入文件名称 回车ok2.把代码放进去。。。{ "Print to console": { "prefix": "vueinit", "body": [ "<!-- $0 -->", "<template>", " <div></d.

import 'axios'// get传参数axios.get('/user?id=123') .then(response=> { console.log(response) }) .catch(error=> { console.log(error) });// get传参数axios.get('/getuser', { params: { ID: 123 }}) .then(response=> { ...

由原来assetsPublicPath：‘/ ‘ 修改相对路径assetsPublicPath：'./'后出现路径错误问题static/css/static/img/login.png 路径多了两层static/css/出现问题原因ExtractTextPlugin抽离css文件时没有转换资源引入路径，导致app.css引入了相对app.css目录为"static/img/ .png"的静态资源，该路径相对index.html即为：static/css/static/img/ .png...

2020前端面试系列（VUE） VUE官网 MVVM模式的理解 VUE双向绑定原理 生命周期 v-model VUE初始化闪动 watch和computed的优缺点与区别 VUE通信 Vue性能优化方法 VUE-Router hash模式 history模式 路由守卫 动态路由 VUEX VUE nextTick 虚拟DOM和Diff算法原理 mixin render函数 2020前端面试系列（VUE）.

用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。思路如下：一、定义初始化默认路由。二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。三、通过匹配，把匹配好的路由数据addRoutes到路由中。四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。具体代码如下：router.jsimport Vue from 'vue'import...

动态添加路由基本功能let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }]this.$router.addRoutes(routes)涉及多层路由嵌套 如图单纯使用addRoutes 层级结构不同修改路由结构例：{ name:'account', path: '/account/accou

<Input v-model="relatedWords" type="textarea" placeholder="请输入" @input='verifyInput(formItem.relatedWords)'/>verifyInput(v){ let _this=this; let punctuation = /[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\]·~！@#￥%……&——\-={}|《》？：“”【】、；‘’。、].

作为前端开发者，这几天想必大家都看到了Vue3.0的beta版新闻了，是的，尤大大在4.17号微博晒出了Vue3.0的beta链接，不少FEer开始兴奋，不过也有不少其它声音：『我学不动了』、『这不就是React』、『啥时候出正式版』；Vue3.0-beta链接：https://github.com/vuejs/vue-next#status-beta那么首先，我们先简单看一下Vue发布版本的过程：Alpha - Beta - RC - 正式所以，从截图来看，还会经历RC阶段才会有正式版本...

import routeMap from './router/component.js';const NotFound = () => import('./page/404.vue');const formatRoutes = function (routes, routeData) { if (!routeData) { routeData = { name:...

VuelidateVuelidate是一款简单轻量级的基于模块的Vue.js验证插件。安装安装很简单，用npm来安装只需要一句话：npm install vuelidate --savenpm i -S vuelidate //简写使用在main.js中导入库并用作Vue插件，以便在包含验证配置的所有组件上全局启用该功能：...

Installationnpminstall--savevue-text-highlight#oryarnaddvue-text-highlightUsageBasic UsageimportVuefrom'vue';importTextHighlightfrom'vue-text-highlight';Vue.compone...

前言当回答面试官问及的Vue问题，我们除了照本宣科的回答外，其实还可以根据少量的源码来秀一把，来体现出你对Vue的深度了解。本文会陆续更新，此次涉及以下问题： “new Vue()做了什么？” “什么阶段才能访问DOM？” “谈谈你对Vue生命周期的理解。” 扩展：新生命周期钩子serverPrefetch是什么？ “vue-router路由模...

if(_this.centerName.length>2){//多于两个时 new Promise((resolve, reject) => { if(_this.centerName[0]=='专题'){ _this.specialFun() }else{ _this[_this.centerFun[_this.centerName.inde...

请求方法中添加第二个参数action获得两个参数传递给api index.js中对应接口地址接口方法拿到两个参数，对拼接参数进行转换格式拼接urljson格式数据传递给postJSON方法进行转换...

module.exports = { // baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。 // 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-...

methods: {//移步请求 async generateData (){//等待请求结果 let _result = await this.getProductslist() console.log(_result)//findAppMenu 返回信息 }, getProductslist(){ return new ...

首先在create_api.js增加window变量window.requestList = []记录每次请求CancelTokenlet CancelToken = axios.CancelTokenaxios.interceptors.request.use(res => {//在请求配置中增加config.cancelToken = new CancelToke...

当项目中接口需要携带token等固定参数，在请求头统一配置初始化create_api.js

token失效请求返回新token再次请求的情况post (target, params = {}) { let suffix = Object.keys(params).map(name => { return `${name}=${params[name]}` }).join('&') let urls = suffix....

首先引入npm install vue2-editor --save安装至项目中import{VueEditor}from"vue2-editor";注册组件components:{ VueEditor},传值与方法<vue-editor:customModules="customModulesForEditor":editorOptions=...

switch开关回显及修改方法{ title: "操作", key: "id", align: "center", render: (h, params) => { let _this = this; return h('div', [ h('i-button', { props: {//按钮大小类型 ...

 直接上代码&lt;div id="app"&gt; &lt;p class='p1' v-way="wayFun('p1')"&gt;测试&lt;/p&gt; &lt;p class='p2' v-way="wayFun('p2')"&gt;&lt;/p&gt;&lt;/div&gt;export default {

偶现返回值格式异常正常返回值修改请求返回值添加判断

最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和 $route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这...

存取vueximport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex)const state={ code:{ a:1, b:'sss' }}const mutations={ getDate(state,num){ state.code.a+=num //赋值后直接存起来...