vue
文章平均质量分 82
寻ing
我又回来了~
展开
-
nuxt3 nuxtjs/i18n 配置
国际化页面配置成静态渲染(预渲染)页面,该选项会在打包时将页面预渲染成默认语言的html文件,访问该页面时服务端会直接返回当前html(因为与渲染会将函数执行,导致服务端返回的一直是默认语言的页面),最终导致页面语言和排版混乱。:cookie中没有设置值的话,默认使用此致(并不是默认。对应的值的效果,他会偶尔抽风,错误的去设置默认。总是重定向到存储在cookie中的值,:支持的语言列表,可以是数组或对象。:(必填)-区域设置的唯一标识符。需求允许的情况下,修改后调用。在需要切换国际化时,通过原创 2024-01-09 10:34:58 · 1573 阅读 · 2 评论 -
nuxt3 路由相关
Nuxt 3提供了钩子,允许完全更改Nuxt自动生成的路由,我们可以通过该钩子实现vue-router路由方案(适合老项目迁移,并不是很推荐这样用)首先创建文件path: "",meta: {},...创建钩子函数hooks: {// 清空Nuxt.js自动生成的路由// // 重新将自定义路由配置设置进去},},})原创 2024-01-08 15:16:22 · 988 阅读 · 0 评论 -
nuxt3 请求相关问题
#配置跨域 本地的反向代理我们可以通过Nitro引擎来配置服务器请求没有跨域,也就不需要配置代理转发。#接口封装 nuxt3中虽然也可以使用axios,但nuxt本身对fetch做了封装,并提供了几个函数 #推荐用法 更推荐使用useFetch直接在业务中请求数据,将返回的数据直接当做ref使用原创 2024-01-05 09:45:01 · 605 阅读 · 0 评论 -
nuxt3 服务端请求其他接口犯的问题与解决
useAsyncData/useFetch返回的代理数据,是类似`useState`生成的**SSR 友好组合**代理,会根据内部的`key`来校验是否需要重复请求的,删掉了就很容易出现重复请求的结果原创 2024-01-04 10:15:48 · 1683 阅读 · 0 评论 -
nuxt3 env文件、全局变量处理
通过配置nuxt.config.ts + Nuxt提供的钩子函数,实现全局变量的获取文件往放入内容通过env文件配置来获取服务端全局变量,客户端通过vite.define实现。原创 2024-01-03 13:40:42 · 1751 阅读 · 0 评论 -
vue3响应式核心 reactivity 源码逻辑分析
当创建reactive后,会对传入对象进行proxy代理,在被订阅者使用(get)时,触发track函数 收集依赖,记录下“订阅者在这里用到当前reactive啦!”,在对象被修改(set)时,触发trigger函数 触发依赖,“要去更新所有用到当前reactive的订阅者!”......原创 2023-03-13 14:49:39 · 278 阅读 · 1 评论 -
vue 组件通信 事件处理
本文主要是通过源码了解,vue是怎样把事件传递给子组件并能够给正常调用的。首先看一个超级简单的demodemo中有一个组件,父级向里边传入了一个函数,个组件中通过调用了它,这是一个最简单的事件通信方法跳过不相干的步骤,我们从创建组件的虚拟节点处的源码开始说起想了解他的实现原理,可以拆开的整体流程,从方法下手,来看看子组件中函数调用时都做了什么(函数就是一个通过调用并抛出错误的通用函数,文章最底下会简略说明该函数)可以看到,方法实际就是找到并调用该素组中的所有方法,那我们现在的目标就是找到中的数据怎么存原创 2022-07-08 14:53:21 · 937 阅读 · 0 评论 -
vue 组件通信 props
了解props源码主要是解决两个疑问答:父组件怎么将值传递给子组件的?父组件的值更新后,子组件如何更新?我们写的节点模板会被解析并生成`render`函数,函数执行时会从父组件中获取到传参,子组件获取到传参后,会对其外层进行响应式绑定,并代理到vm上详细的说,可以从两个部分来解释,分别是父组件怎么传给子组件子组件怎么处理传过来的参数1. 父组件怎么传给子组件我们写的节点模板会被解析并生成render函数、然后通过render函数最终生成一个vnode虚拟节点,render函数大概.........原创 2022-06-10 16:54:42 · 494 阅读 · 1 评论 -
vue diff算法
vue diff算法 在vue中的实现原理,patch函数、patchVnode、updateChildren、sameVnode函数的介绍原创 2022-04-28 16:00:32 · 3621 阅读 · 0 评论 -
Vue组件的渲染流程
Vue的组件渲染、extend方法、Ctor、组件的注册流程详解原创 2022-04-24 17:30:13 · 1943 阅读 · 0 评论 -
watch与计算属性 (源码浅析)
watch与计算属性源码浅析原创 2022-03-17 13:34:19 · 1503 阅读 · 1 评论 -
Vue的响应式原理-数组处理
数组和对象处理的区别是在`class Observer{}`中开始区分的,对象的话是调用了`walk`方法进行处理,数组的话是首先执行`protoAugment`/`copyAugment`方法来“劫持”数组七种方法,然后调用`observeArray(value)`将数组中的属性循环执行`observe(item)`原创 2022-03-08 11:15:39 · 700 阅读 · 0 评论 -
Vue的响应式原理-两个创建Dep的位置
在`Vue`响应式的`class Observer`部分,我们发现会有两个部分都创建了`Dep`实例。分别为1:defineReactive创建的dep 2:Observer创建的dep,那么这两个dep到底都是干什么用的呢?原创 2022-03-03 13:32:56 · 584 阅读 · 0 评论 -
Vue的响应式原理
Vue的响应式实现主要有三块重点内容,分别为Observer、Dep、watcher。我们常说的`Object.defineProperty`就是通过`observe函数`、`Observer类`、`defineReactive函数`的递归执行实现,`defineProperty`写在`defineReactive`函数中;而数据与视图的相互绑定(数据改变页面也跟着改变),是通过`Dep类`(发布者)和`watcher类`(观察者)实现的原创 2022-03-01 10:27:14 · 928 阅读 · 0 评论 -
vue3 + vite使用addroute时接口返回数据导致component的问题
vue3+vite使用addroute时接口返回数据导致component的问题处理很多后台管理系统,路由都是通过请求获得,一般流程都是通过使用addroute处理接口返回的路由信息在vue3+vite中,动态路由component写法是 router.addRoute({ name: "demo", path: "/demo", component: () => import('view/demo.vue'), });除了com原创 2021-12-03 14:51:12 · 2072 阅读 · 0 评论 -
前端 vue 直传 华为云OBS(BrowserJS 断点续传方法)
需求:可多个文件同时上传,需要显示文件名、上传进度、上传速度,可以暂停、继续开始1、搭建OBS服务环境相关请参考官网教程 点击跳转2、下载OBS BrowserJS SDK开发包 点击跳转,引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js文件import ObsClient from "../util/esdk-obs-browserjs-without-polyfill-3.19.5.min.js";3、创建OBS实例<scri原创 2021-02-23 22:53:23 · 6159 阅读 · 32 评论 -
vue 3.0 prototype 替代用法
在vue2.x中,我们想设置全局变量,可以在main文件中用prototype绑定vue实列,在vue3.0中,可以用app.config.globalProperties来代替prototype,具体用法如下// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'a原创 2020-12-14 10:15:03 · 21875 阅读 · 8 评论 -
vue axios form-data格式 传输数据和文件
vue axios form-data格式 传输数据和文件form-data在post请求下的一种传输方式,数据会在Form Data中传输,传输的数据由boundary来分割------WebKitFormBoundaryRO0YA4pq9oCgwTktContent-Disposition: form-data; name="id"undefined------WebKitFormBoundaryRO0YA4pq9oCgwTktContent-Disposition: form-data;原创 2020-09-09 15:06:55 · 8511 阅读 · 6 评论 -
require.context批量导入
require.context如果想引入一个文件夹中的所有(或部分)文件,可以使用require.context方法来引入使用方法require.context(“文件路径”,“是否搜素子路径Boolean”,“匹配文件的正则表达式”)返回require.context() 返回的是一个functionconst requireApi = require.context("./api",false,/\.js$/);console.log(requireApi)想要获取到require回原创 2020-09-02 21:19:13 · 593 阅读 · 0 评论 -
vue createElement与elementUI中表头修改
vue $createElementVue推荐在大多数情况下用模板来创建你的 HTML(template中写dom)。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。createElement在正常开发下是一个不太常用的函数,他可以创建虚拟dom(VNode)createElement参数createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项原创 2020-08-26 22:48:33 · 2304 阅读 · 0 评论 -
vue-router嵌套路由中无父级组件的设置方法
解决方法: component: {render: (e) => e("router-view")},需求在一些情况下,会有设置二级路由,但一级路由不需要 component 的特殊需求比如我在data路由下需要List页.../#/data/list,shop页.../#/data/shop 等,但每一个页面中没有任何相同的地方,也就是在.../#/data路由下不需要compone...原创 2020-01-08 16:08:47 · 5670 阅读 · 6 评论 -
vue中axios模块化简易封装
在实际开发过程中,需要对AJAX请求进行统一的封装,使其模块化,易于修改和操作。直接上代码var get = function(modules, _axios) { // 创建axios请求,等待执行 Object.keys(modules).forEach(module => { let data = {...modules[module] } ...原创 2019-05-30 17:50:00 · 981 阅读 · 0 评论