vue
关注
分享
扫一扫
文章平均质量分 73
进阶__前端
这个作者很懒，什么都没留下…
展开
-
vue3.0 axios封装
vue3 + ts + axios 封装请求原创 2022-09-30 09:56:17 · 1770 阅读 · 0 评论 -
vue前端项目优化方式
压缩js和css之类的。显然这些都是必须做的，而且已经根本不是主要的性能优化的关键点。一、 gzip压缩web前端项目，静态资源基本都放在cdn上，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。# 开启gzipgzip on;# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩gzip_min_le原创 2022-04-07 09:13:58 · 463 阅读 · 0 评论 -
vue3 is动态组件
vue 的 is 属性简单说 就是扩展 html标签的限制什么是动态组件：就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。动态切换：（:is后面的是对应的组件名，必须一致）在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可在一个多标签的界面中使用 “ is ”特性来切换不同的组件：<template> <div原创 2021-04-20 16:50:09 · 10404 阅读 · 0 评论 -
vue项目接口管理
这篇文章是引用的，主要是自己能够用到，方便查找,记录下具体文章链接: https://www.cnblogs.com/goloving/p/8901189.htmlvue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址一、开发环境中跨域 使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，转载 2020-12-06 20:19:53 · 544 阅读 · 0 评论 -
Vue 基础回顾
Vue 原理的解析解析vue的基础用法Vue Router原理分析，实现 虚拟DOM库Snabbdom源码实现响应式原理分析与实现Vue.js源码分析Vue 基础结构<script crossorigin="anonymous" integrity="sha512-tbfpVZegVjOUS9H3X526XZJxi/dPnhiGRM8Z83AY8kbFBrZLuug/mU57PJJsdXn38dlXjrUxtaEOl11Y1uoaRQ==" src="https://lib.baomi原创 2020-12-24 14:27:13 · 140 阅读 · 0 评论 -
VueRouter 的原理及自定义Route
Vue Router 实现原理Vue Router基础Hash模式 和 history模式模拟实现自己的Vue Router基本使用在使用vue创建项目时，使用Rouer选项自动安装依赖项import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由插件Vue.use(VueRouter)// 路由规则const routes = [原创 2020-12-24 17:36:20 · 905 阅读 · 1 评论 -
Vue项目 配置本地IP
Node 读取配置新增 ip.js//build/IP.jsconst os = require('os') // Node.js 的 os 模块提供了一些基本的系统操作函数module.exports = { getIp(){ const ifaces = os.networkInterfaces() // 获得网络接口列表。 let ip = '' for(const dev in ifaces) { ifaces[dev].forEach(functi原创 2020-12-24 19:05:45 · 1151 阅读 · 1 评论 -
Vue set方法使用及源码解析
使用场景：实例创建之后添加新的属性到实例上，它不会触发视图更新。由于 JavaScript 的限制，Vue 不能检测以下变动的数组。通过数组的下标去修改数组的值,数据已经被修改了,但是不触发updated函数,视图不更新,vue中检测不到对象属性的添加和删除解决方案:1）.data 对象就像组件状态的模式（schema）。在它上面声明所有的属性让组件代码更易于理解。2）.添加一个顶级响应属性会强制所有的 watcher 重新计算，因为它之前不存在，没有 watcher 追踪它。原创 2020-12-26 18:01:07 · 397 阅读 · 0 评论 -
Vue 响应式原理模拟
Vue 响应式模拟原理<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2020-12-26 18:47:07 · 207 阅读 · 0 评论 -
简述vue中的虚拟dom及diff算法
为什么使用虚拟DOM手动操作DOM比较麻烦，而且需考虑兼容性，但是随项目复杂度，dom操作更复杂为了简化DOM的复杂操作出现mvvm框架，解决视图-状态的同步问题为简化视图操作可使用模板引擎，但是模板没解决跟踪状态变化的问题，所以使用Virtual dom VirtualDom好处是状态改变不需要更新DOM，只需要虚拟树描述，Virtual DOM内部将有效更新dom什么是虚拟DOMVirtual DOM 就是 普通的JS对象，以对象的结构描述DOM结构因为不是真实DOM节点，所以叫做虚原创 2020-12-29 17:18:52 · 621 阅读 · 0 评论 -
简述 Diff 算法的执行过程
diff 算法是进行同级数据对比的一个过程，在同级对比的过程中，设置给对应老节点开始-结束的索引，新节点开始-结束的索引，进行遍历，更新位置，或是删除的一个过程。当oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx 条件成立，进行while循环先进行节点数据为空时候的判断，oldStartVnode 为 null，则 oldStartVnode 等于 oldCh 的下一个子节点，即 oldStartVnode 的下一个兄原创 2020-12-29 17:57:14 · 746 阅读 · 0 评论 -
Vue.use 源码
Vue.use() 用来注册插件/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { // use.js导出 Vue.use = function (plugin: Function | Object) { // 给vue增加 use方法，接收plugin插件作为参数 const installedPlugins = (this._installedPl原创 2020-12-30 17:32:06 · 308 阅读 · 0 评论 -
Vue.mixin 源码
/* @flow */import { mergeOptions } from '../util/index'export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // mergeOptions 的作用是将 mixin的所有成员拷贝到options // this 就是vue构造函数，全局的vue this.options = mergeOptions(thi原创 2020-12-30 17:34:45 · 187 阅读 · 0 评论 -
Vue.extend 源码
Vue.entend() 基于传入的options 返回一个组件的构造函数/* @flow */import { ASSET_TYPES } from 'shared/constants'import { defineComputed, proxy } from '../instance/state'import { extend, mergeOptions, validateComponentName } from '../util/index'export function initExt原创 2020-12-30 17:43:16 · 353 阅读 · 0 评论 -
Vue initAssetRegisters()创建组件、指令、过滤器源码
// 注册Vue.directive 、 vue.component() 、 Vue.filter()initAssetRegisters(Vue)/* @flow */import { ASSET_TYPES } from 'shared/constants'import { isPlainObject, validateComponentName } from '../util/index'export function initAssetRegisters (Vue: GlobalAPI原创 2020-12-30 17:54:11 · 210 阅读 · 0 评论 -
Vue 初始化-静态成员
地址：vue-dev\src\core\global-api\index.js源码地址： https://github.com/vuejs/vue/* @flow */import config from '../config'import { initUse } from './use'import { initMixin } from './mixin'import { initExtend } from './extend'import { initAssetRegisters } f原创 2020-12-30 17:58:12 · 280 阅读 · 2 评论 -
Vue初始化 - 实例成员
地址 ：src\core\instance\index.js具体实现都是在vue的原型上增加对应的成员，属性或者方法实例化过程import { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } from './events'import { lifecycleMixin } from './lifecy原创 2020-12-30 19:05:16 · 478 阅读 · 0 评论 -
Vue 自定义hash Router
// Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象let _Vue = nullexport default class VueRouter { // 静态方法， 注意参数是 Vue构造器 static install(Vue){ // 1. 判断是否已经被注册过（单例模式） if(VueRouter.install.installed){ retur原创 2021-01-01 15:12:12 · 307 阅读 · 0 评论 -
Vue响应式原理--初始化过程
目标Vue.js静态成员和实例成员的初始化过程（vue.set、vue.get、vue.extend等）首次渲染的过程数据响应式的原理准备源码地址： https://github.com/vuejs/vue结构 dist：存放打包后文件 examples：存放示例文件，例如表格的使用等 src：compile/模板编译 core:vue核心 components：存放组件，例如keep-live global-api：存放use、m原创 2021-01-02 18:46:28 · 462 阅读 · 0 评论 -
Vue响应式原理 - 响应式处理
响应式处理入口通过查看源码解决下面问题vm.msg = {count:3} ,重新给属性赋值，是否是响应式的?vm.arr[0] = 4,给数组元素赋值，视图是否会更新vm.arr.length = 0,修改数组的length，视图是否会更新vm.arr.push(4),视图是否会更新响应式处理的入口整个响应式处理的过程是比较复杂的，从src/core/instance/init.jsinitState(vm) vm 状态的初始化初始化了_data、_props、methods等原创 2021-01-03 17:12:45 · 451 阅读 · 1 评论 -
Vue delete的源码实现
vm.$delete功能删除对象的属性，如果对象是响应式的，确保删除能茶法更新视图，这个方法主要用于避开Vue不能检测到属性被删除的限制，但是你应该很少会使用它注意：目标对象不能说一个Vue实例或者Vue实例的跟数据对象示例data : { namelist : { id : 1, name : 'aaaa' } }// 删除namedelete this.namelist.name;//js方法原创 2021-01-03 18:12:33 · 320 阅读 · 0 评论 -
Vue.watch 源码实现
watchvm.$watch（expOrFn,callback,[options]）功能观察Vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式值接收监督的键路径参数exOrFn：要监视的$data 中的属性，可以说表达式或函数callback：数据变化后执行的函数函数：回调函数对象：具有handler属性(字符串或者函数)，如果该属性为字符串则methods中相应的定义options：可选的选项deep: 布尔类型，深度监听immediate: 布尔原创 2021-01-03 18:54:31 · 409 阅读 · 0 评论 -
Vue.nextTick 源码实现
异步更新队列-nextTick()Vue 更新DOM是异步执行的，批量的在下次DOM更新循环结束之后执行延迟回调。在吸怪数据之后立即使用此方法，获取更新后的DOMvm.$nextTick(){/操作dom/} Vue.nextTick(function(){})vm.$nextTick()代码演示<div id="app"> <p ref="p1">{{msg}}</p></div><script> const vm原创 2021-01-04 09:05:10 · 208 阅读 · 0 评论 -
TypeScript 的 Vue.js 项目差异
1）基本操作安装 @vue/cli 最新版本使用 @vue/cli 创建一个项目（不选 TypeScript)使用 @vue/cli 安装 TypeScript 插件2）通过 Git Diff 对比介绍使用 TypeScript 的 Vue.js 项目差异安装了 @vue/cli-plugin-typescript 等插件shims-vue.d.ts 文件的作用shims-tsx.d.ts 文件的作用定义 Vue 组件的几种不同方式写法 1：使用 Options APIs组件仍原创 2021-01-06 17:47:44 · 799 阅读 · 0 评论 -
Vue Vitrual DOM实现
虚拟DOM库 - SnabbdomVue 响应式原理模拟实现Vue源码解析 - 响应式原理虚拟DOM概念虚拟dom (Virtual DOM) 是使用 JavaScript 对象描述真实domVue.js 中的虚拟DOM借鉴snabbdom，并添加了vue的特性例如：指令和组件机制，插槽为什么使用虚拟dom避免直接操作dom，提高开发效率作为中间层可以跨平台虚拟DOM不一定可以提高性能 首次渲染时候可能会增加开销 复杂视图情况下提升渲染性能原创 2021-01-08 16:30:14 · 230 阅读 · 0 评论 -
Vue 组件及创建，更新过程源码
vue 组件源码分析组件注册1.全局组件：全局使用2.局部组件：只能在内部使用Vue.component() 的实现位置：src/core/global-api/index.js 内的initAssetRegisters()注册了compoennt方法作为一个字符串定义在ASSET_TYPES 中，函数接收Vue实例作为参数 component接收id和definition做参数之后判断如果是组件或是指令，作出特殊处理，如果是过滤器记录到Vue全局配置上判断type是compon原创 2021-01-09 17:24:31 · 341 阅读 · 0 评论 -
Vue的模板编译和组件化 解析
模板编译介绍模板编译是将模板转换成渲染函数Vue2.x 使用Vnode 描述视图以及各种交互，用户自己编写VNode比较复杂用户只需要编写类似HTML的代码 —Vue.js模板，通过编译器将模板准换位返回VNode的render函数.vue文件会被webpack在构建的过程中转换为render函数vue内部其实是不支持的，但是使用vue-loader进行编译的模板编译的结果完整版Vue入口，src/platforms/web/util/entry-runtime-with-compile原创 2021-01-09 17:36:34 · 982 阅读 · 0 评论 -
Vue 模板编译的过程
Vue 模板编译的过程Vue中的模板编译就是将模板编译成render渲染函数模板编写，便于阅读，便于交互，编写render函数比较复杂编译过程入口： src/platforms/web/entry-runtime-with-compile.js如果有render函数，进行render调用，没有render，进行模板转换render函数调用createCompile函数，接收baseCompile函数将模板转换为ast语法树，描述代码结构使用optimize(ast,options)优原创 2021-01-09 17:38:00 · 729 阅读 · 1 评论 -
vue 组件源码分析
vue 组件源码分析组件注册1.全局组件：全局使用2.局部组件：只能在内部使用Vue.component() 的实现位置：src/core/global-api/index.js 内的initAssetRegisters()注册了compoennt方法作为一个字符串定义在ASSET_TYPES 中，函数接收Vue实例作为参数component接收id和definition做参数之后判断如果是组件或是指令，作出特殊处理，如果是过滤器记录到Vue全局配置上判断type是component的情况原创 2021-01-09 17:39:08 · 324 阅读 · 0 评论 -
Vue 初始化 执行过程
Vue 初始化 执行过程先在platforms 下的 entry-runtime-with-compile.js调用 Vue.$mountd 的获取el对象， 挂载mount方法 ，将Vue的模块导出找到 core/instance/index.js ，获取 vue的构造函数，初始化Vue 上的静态方法，例如 set，delete，nextTick初始化Vue 上的实例成员，就是在Vue的原型上混入相应的成员，进行patch方法进行初次的渲染到el对象上，例如 data,data,data,pr原创 2021-01-09 17:39:52 · 3284 阅读 · 0 评论 -
Vue 数据响应式过程
数据响应式过程1.入口 src/core/instance/init.jsinitstate(vm) vm状态的初始化初始化了_data,_props,methods等调用了 initData(vm)在 initData中 获取传入的数据，调用observe方法接收data并做出响应式的处理observe在接收数据，创建一个 new Observer对象，将其 对应的数据转换为set/getObserver 中 缓存了对应的数据在_ob_上，对数组和对象做了对应的处理，数组增原创 2021-01-09 17:40:39 · 230 阅读 · 0 评论 -
vue Virtual DOM创建过程
vue Virtual DOM创建过程在 lifecycle.js 中的mountComponent 中定义了updateComponent，接收_render()方法作为参数，render接收用户传入的render函数在render.js中定义了_render方法，其中通过call接收render函数，改变内部this，使用了createElement函数，c与createElement函数，_c与createElement函数，c与createElement都是执行createElement函原创 2021-01-09 17:41:13 · 356 阅读 · 0 评论 -
Vue key的优点
Vue key的优点key的使用就是在updateChildren方法中没用key的情况1.进行sameVnode对比时候，没有key值，返回的都是相同节点2.进行patchVnode对比节点，找到差异，更新dom3.直到找到判断文本节点是否相同时，循环执行4.直到找到更新节点，samevnode因为没有key值，依然会继续执行5.直到最后，会找到所有更新的dom进行多次节点更新操作使用key值内容未发送变化项进行对比找到sameVnode节点key值不同，会从后向前比较都是文本节点原创 2021-01-09 17:42:22 · 196 阅读 · 0 评论 -
Vuex 状态管理
Vue 组件内的状态管理流程Vue 核心功能是数据驱动和组件化基于组件化开发提高可维护性，复用性状态管理state：驱动应用的数据源view：以生命的方式将state映射到视图actions：响应在biew上的用户输入导致的状态变化Vue 组件间通信父组件给子组件传值：子组件通过props接收，父组件给子组件通过传递相应属性传值子组件给父组件传值 ：子组件通过$emit()调用父组件方法不相干组件之间传值：Vuex或者eventbus方式，ref父子传值父组件<te原创 2021-01-10 19:18:21 · 202 阅读 · 0 评论 -
服务端渲染
服务端渲染基于客户端渲染的前端框架angularReactVueSPA单页面应用优点用户体验好开发效率高渲染性能好可维护性好等等缺点首屏渲染时间长，不利于用户体验不利于SEO，搜索引擎爬取内容时，spa是没有内容的借鉴了传统的服务端渲染客户端激活为SPA同构应用通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO内容通过客户端渲染接管界面内容交互得到更好的用户体验这种方式通常被称为现代化的服务端渲染，也叫同构渲染这种方式构建的应用称为服务原创 2021-01-11 19:12:29 · 219 阅读 · 0 评论 -
Nuxt.js基础
Nuxt.js 基础Nuxt.js是什么Nuxt.js 是一个基于Vue.js的通用应用框架通过对客户端/服务端基础架构的抽象组织，Nuxt主要关注的是应用的UI渲染可以基于它初始化新项目的基础结构，或者在已有的node.js中使用Nuxt.js Nuxt.js预设了利用Vue.js开发服务端渲染所需要的各种配置 提供了一个命令: nuxt generate ,为基于Vue.js应用提供了生成对应静态站点的功能Nuxt.js运作Nuxt.js集成了 VUE + webpack + b原创 2021-01-14 08:55:05 · 235 阅读 · 0 评论 -
Nuxt.js 综合案例
案例介绍案例名称：RealWorld一个开源的学习项目，目的是帮助开发者开始学习到新技能GitHub仓库：https://github.com/gothinkster/realworld在线示例：https://demo.realworld.io/#/接口文档：https://github.com/gothinkster/realworld/tree/master/api页面模板：https://github.com/gothinkster/realworld-starter-kit/blob原创 2021-01-14 19:38:29 · 726 阅读 · 0 评论 -
nuxt项目发布-部署
如何将nuxt项目进行发布部署打包 Nuxt.js 应用命令描述nuxt启动一个热加载的web服务器(开发模式) localhost://3000nuxt build利用webpack编译应用，压缩js和css(发布用)nuxt start以生产模式启动一个web服务器（需要先执行nuxt build）nuxt generate编译应用，并依据路由配置生成对应的html文件(用于静态文档部署)可以将 命令加入到package.json中执行np原创 2021-01-15 20:10:50 · 1427 阅读 · 0 评论 -
Gridsome案例
目的：做一个博客，使用gridsome基础知识点的巩固gridsome create blog-with-gridsomenpm run develop 启动项目处理首页模板使用一个bootstrap 开源项目作为基础地址： https://https://github.com/StartBootstrap/startbootstrap-clean-blog将项目下载下来，将模板套到本地项目项目安装bootstrap npm i bootstrapyarn add @fort原创 2021-01-19 10:22:53 · 438 阅读 · 0 评论 -
封装vue.js 组件库
组件化开发开源组件库：element-yi，iviewCDDCDD(component-Driven Development)自下而上从组建级别开始，到页面级别结束好处：组建在最大程度被重用并行开发可视化测试处理组件的边界情况root−−通过root -- 通过root−−通过root可以访问vue的根实例,操作根实例的成员KaTeX parse error: Expected 'EOF', got '#' at position 8: parent/#̲childre原创 2021-01-19 19:42:43 · 297 阅读 · 0 评论