前言 在学习vue中的nextTick的时候,发现$nextTick和Promise.then在不同情况下执行顺序不一样一、正文先说结论,在vue2中,当发生dom更新的时候,$nextTick回调会在下一个事件循环的微任务阶段优先执行。这意味着,在发生 DOM 更新的情况下,$nextTick会在其他微任务之前执行,比如下面这段代码:<!DOCTYPE html> <h
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网
  最近一直忙着检查点测试平台的开发。之前主要是从事后端开发,现在所有的东西都需要自己一个人撸。也遇到了之前在后端服务开发中未碰到的问题,在此记录下解决的全过程。  前端采用vue + element的技术,开发完成后生成静态文件扔到nginx服务器上。后端用python的flask,完成之后放到gunicorn中。两个单独开发到没有什么太大问题,问题就出在将两个合在一起的时。  第一次合并的时候
# Vue 3 和 Yarn 命令的执行 在现代前端开发中,Vue.js 作为一个流行的框架,得到了广泛的应用。结合包管理工具 Yarn,开发者可以更高效地管理项目依赖。本文将介绍如何在 Vue 3 项目中使用 Yarn 命令,并通过代码示例和类图进行阐述。 ## 什么是 Vue 3Vue 3Vue.js 的最新版本,相比于 Vue 2,它在性能和功能上都有了显著的提升。新的组合式
原创 9月前
93阅读
vue的单页面应用访问速度一般情况下已经很快了,不过对于比较复杂的页面首次打开的时候会很慢,慢的原因呢主要涉及如下两个方面:1、dom元素较多,首次打开时需要进行太多的渲染和判断,而这些渲染和判断大多数往往都不是首次打开页面时需要消耗的。2、多数首次不显示的的dom元素,或者子组件加载时会调用ajax请求加载数据,这时候首次加载的请求可能有5个、10个甚至更多,这时候并发请求就会带来竞争,首次加载
转载 2024-03-28 16:37:56
369阅读
一、dist文件夹这个文件夹中,一般是执行npm run build命令后,打包生成的前端项目;前端项目发版时,就是把dist中的文件上传到nginx服务器的指定文件夹中即可。二、node_modules文件夹这个文件夹中,一般是执行npm install命令后,从网上下载到的本vue项目需要的相关依赖文件,启动vue项目或打包vue项目都会用到。与java对比的话,感觉就像是依赖用到的jar包。
转载 2024-03-29 07:36:59
277阅读
# 实现 Vue 3 中同时执行多个 Axios 请求的指南 在现代前端开发中,我们常常需要同时发起多个网络请求,以获取所需的数据。在这篇文章中,我们将介绍如何在 Vue 3 中使用 Axios 执行多个请求,并逐步帮助你实现这一功能。 ## 流程概述 在执行多个 Axios 请求时,整个流程可以简单分为以下几个步骤: | 步骤编号 | 步骤名称 | 描述
原创 9月前
289阅读
Vue中使用async函数async/await语法在生命周期钩子上使用async函数在methods中使用async函数源代码 async/await语法在ES7标准中新增了async和await关键字,作为处理异步请求的一种解决方案,实际上是一个语法糖,在ES6中已经可以用生成器语法完成同样的操作,但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。下面是MDN上使
转载 2024-10-20 11:23:57
135阅读
## 实现"vue3 axios结束再执行"的方法 ### 1. 流程图 ```mermaid flowchart TD A[发送请求] --> B[axios发送请求] B --> C[请求结束后执行的操作] ``` ### 2. 详细步骤 下面将详细介绍每一步需要做的事情以及对应的代码。 #### 2.1 发送请求 首先我们需要发送请求,可以使用`axios`库来进
原创 2023-09-01 05:37:08
456阅读
文章目录一、事件监听1. v-on2. v-on 修饰符二、条件判断1. v-if、v-else、v-else-if2. v-show三、循环1. 基于对象循环2. 基于数组循环3. 数字范围值循环四、双向绑定1. v-model2. v-model 修饰符 一、事件监听 1. v-on v-on 指令,用来给 DOM 绑定事件,并且触发时,执行 Vue 对象 中的自定义方法,其语法为 v-on
转载 2024-10-09 21:46:13
37阅读
在开发中,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下: 异步执行使用async和await完成 created() { this.init() }, methods: { async init(){ await this.getList1(); this.getList(); }, /
转载 2023-06-30 08:28:34
8阅读
挂载#app <div id="app"></div> <script src="../js/vue.js"></script> <script> Vue.createApp({ template: `<h2>你好啊, 李银河</h2>` }).mount("#app"); </script> 问题 ...
转载 2021-07-17 15:38:00
665阅读
2评论
原创 2023-07-27 21:47:21
10000+阅读
1.v-for: <ul> <li v-for="book in books"> <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3> </li> </ul> javascript: data() { return { book ...
转载 2021-09-11 22:45:00
651阅读
2评论
Vue3
原创 3月前
48阅读
依赖安装npm install three如果有用 typeScript 安装npm install @types/three开始 建一个.vue文件 准备一个空的模板我们需要给生成的canvas准备一个容器<template> <div id="three"></div> </template>引入Threejs依赖<script l
前言 ... 目标 1 vue3的优势有哪些 2 如何创建vue3工程 graph LR A[初始vue3] --> B[vue3带来了什么] A --> C[如何创建vue3工程] 一 vue3带来了什么 从vue2到vue3一个大版本的升级,必然会有一些性能上的优化 性能提升和源码升级 性能提升 源码升级 打包大小减少 使用Proxy代替defineProper
原创 2024-07-21 09:24:38
146阅读
前言 ... 目标 1 vue3的优势有哪些 2 如何创建vue3工程 graph LR A[初始vue3] --> B[vue3带来了什么] A --> C[如何创建vue3工程] A --> D[如何引入vue3] 一 vue3带来了什么 从vue2到vue3一个大版本的升级,必然会有一些性能上的优化 性能提升和源码升级 性能提升 源码升级 打包大小减少
原创 精选 2024-08-05 15:03:53
230阅读
v-for中的key是什么作用?在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释:key属性主要用在Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes;如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销
转载 2024-02-02 11:41:40
91阅读
1、Vue3简介1.1、Vue3带来了什么1.性能的提升Vue3Vue 2相比,在包大小(使用 tree-shaking 时减轻多达 41%)、初始渲染(速度提高多达 55%)、更新(多达 133% 更快)和内存使用(最多减少 54%)。打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟
转载 2023-10-23 19:59:39
180阅读
  • 1
  • 2
  • 3
  • 4
  • 5