vue
vue内容
zc自由飞~
这个作者很懒,什么都没留下…
展开
-
多人协作避免vue.config.js文件冲突----vue项目改造
先看文件夹目录:重点是config文件夹下的配置,.gitignore,vue.config.js文件要把vue项目跟后台对接接口api单独提出来,首先对vue.config.js进行改造:把proxy单独提出来vue.config.js:'use strict'const path = require('path')const defaultSettings = require('./src/settings.js')const proxy = require('./config/proxy原创 2022-03-28 15:33:53 · 1590 阅读 · 0 评论 -
vue-pdf的使用
<template><v-pdf v-for="i in numPages" :key="i" class="v-pdf-item" :src="src" :page="i"/></template><script>import pdf from 'vue-pdf'export default { components: { 'v-pdf': pdf }, methods: { // 流文件转pdf ur原创 2022-03-18 16:06:35 · 3836 阅读 · 0 评论 -
vue高德地图实现海量点分组(用icon图标替换海量点)动态循环出groupStyleMap集合
高德 vue 海量点 图标分组 动态原创 2021-12-01 15:41:57 · 941 阅读 · 0 评论 -
vue中使用高德地图的覆盖物群组
vue中使用高德地图Map.vue<template> <div class="m-map"> <div class="search" @click="removeOverlayGroup"> <el-input placeholder="搜企业、人员、车辆" v-model="searchKey" size="mini"> <i slot="suffix" class="el-input__icon el-i原创 2021-09-15 10:11:57 · 545 阅读 · 1 评论 -
nextTick中的降级处理
nextTick 要优先使用Promise和MutationObserver因为他俩属于微任务,会在执行栈空闲的时候立即执行,它的响应速度相比setTimeout会更快,因为无需等渲染。而setImmediate和setTimeout属于宏任务,执行开始之前要等渲染,即task->渲染->task。再就是浏览器兼容性问题,setTimeout所有浏览器都可以兼容,setImmediate是IE最新浏览器都可以兼容,源码:function nextTick(cb){//cb就是f.原创 2021-02-28 22:02:29 · 599 阅读 · 0 评论 -
vue是如何检测数组变化的
array.js://主要做的事就是拦截用户调用的push shift unshift pop reverse sort splice//上述方法可改变原始数组import { observe } from "./index";//先获取老的数组方法 只改写这7个方法let oldArrayProtoMethods = Array.prototype;console.log(Array.prototype)//拷贝的一个新的对象 可以查找到老的方法//arrayMethods里包含原创 2021-02-28 21:57:49 · 643 阅读 · 0 评论 -
mixin混入
混入就是提取出公共代码,被页面引入,即可被页面使用。下边是自己项目中用到的混入:code.js:混入代码,只要是提取了获取验证码接口的方法和本地存储sid的逻辑代码import { getCode } from '@/api/login'import { v4 as uuidv4 } from 'uuid'import { ValidationProvider, ValidationObserver } from 'vee-validate'const CodeMix = { c原创 2021-02-28 16:31:02 · 140 阅读 · 0 评论 -
vue组件级权限控制
自定义指令v-hasRole:directives.js:首先从store仓库中获取当前登录用户的角色,判断如果使用该组件的权限如果不包括在当前登录人的权限中 就利用父元素删除该元素。export default { // 组件级权限控制 hasRole: { inserted: function (el, binding) { // 当前登录人角色 const roles = store.state.userInfo.roles || ['user']原创 2021-02-27 21:53:11 · 1440 阅读 · 0 评论 -
vue自定义操作权限控制级别的指令
directives.js:export default { // 操作权限控制 hasPermission: { inserted: function (el, binding, vnode) { const types = vnode.context.$route.meta.types//获取router中各个路由上定义的types属性 const values = binding.value let flag = true for (原创 2021-02-27 21:17:48 · 345 阅读 · 0 评论 -
vue为什么采用异步渲染
因为vue是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能考虑,vue在本来数据更新后,再去异步更新视图。第一步:通知watcher进行更新操作第二步:依次调用watcher中的update第三步:将watcher进行去重,放到队列中第四步:异步清空watcher队列...原创 2021-02-26 15:58:21 · 628 阅读 · 0 评论 -
vue组件中的data为什么是一个函数
同一个组件被多次复用,会创建多个实例。这些实例用的是同一个构造函数,如果data是一个对象的话,所有的组件共享同一个对象。为了保证组件的数据独立性,要求每个组件必须通过data函数返回一个对象作为组件的状态。一个组件被多次使用,用的是同一个构造函数。为了保证组件的不同实例的data不冲突,要求data必须是一个函数,这样组件间不会互相影响。为了防止被公用。导致组件不独立。主要是为了避免组件间的数据互相影响。谁new就是谁的实例,互不影响。如果data是对象:functionVueCo.原创 2021-02-26 15:00:54 · 226 阅读 · 0 评论 -
vue父子组件生命周期
1.加载渲染过程父beforeCreate -> 父created -> 父beforeMount ->子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted2.子组件更新过程父beforeUpdate -> 子beforeUpdate -> 子updated -> 父 updated3.父组件更新过程父beforeUpdate -> 父updat原创 2021-02-22 16:56:31 · 95 阅读 · 0 评论 -
vue生命周期
vue2中生命周期生命周期钩子 组件状态 最佳实践 beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据 常用于初始化非响应式变量 created 实例创建完成后,可访问data、computed、watch、methods上的方法和数据,为挂载到DOM上,不能访问$el属性,$ref属性内容为空数组 常用于简单的ajax请求,页面初始化 beforeMount原创 2021-02-22 16:43:09 · 44 阅读 · 0 评论 -
keep-alive
什么是keep-alivekeep-alive是用来缓存组件,避免多次加载相应的组件,减少性能消耗,比如从页面1跳转到其他页面后回退到页面1不用重新执行页面1的代码,只会2从缓存中加载已经缓存的页面1,这样可以减少加载时间,减少性能消耗,提高用户体验性。什么时候用keep-alive如果需要频繁切换路由,这个时候可以考虑leep-alive,来达到避免数据的重复请求的目的。如何使用keep-alive<keep-alive> <router-view> </ro原创 2021-02-22 16:01:48 · 162 阅读 · 0 评论 -
vuex
vuex包括:state:状态中心mutation:更改状态action:异步更改状态getters:获取状态modules:将state分成多个modules,便于管理const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment(context)原创 2021-02-22 15:26:06 · 53 阅读 · 0 评论 -
vue为什么使用v-for时不能用index作为key
最主要原因是:更新dom的时候会出现性能问题。为什么要用key?防止就地复用:有key的话会根据key的唯一标识去移动节点,无key就会就地复用节点,重新创建dom渲染dom内容。举个例子:我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:即把C更新成F,D更新成C,E更新成D,最后再插入E,这样效率不高,且性能不够好。如果使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。总而言之,key的作用主要是为了高效的更新虚拟D转载 2021-02-22 14:59:51 · 759 阅读 · 0 评论 -
proxy相比defineProperty的优势
1.proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等是object.defineProperty不具备的。2.proxy可以直接监听数组的变化,proxy可以直接监听对象而非属性。vue2.0中,比如vm.arr.length–或者vm.arr[0]=100均不能触发视图更新;如果想更新索引可以使用vm.$set(vm.arr,0,100)或者vm.$delete(vm.arr,0);3.proxy返回的是一个新对象,我们可以只操作新对原创 2021-02-22 14:26:01 · 901 阅读 · 0 评论 -
vue中的computed、methods、watch
computed实质是一个惰性的watcher,在取值操作时根据自身标记dirty属性返回上一次计算结果/重新计算值。在创建时就进行一次取值操作,依赖变动的对象/属性(将自身压入dep中)在依赖的对象/属性变动时,仅将自身标记dirty置为true。...转载 2021-02-22 13:55:43 · 379 阅读 · 0 评论 -
vue组件间的传值
props / emit 适用 父子组件通信;ref 与parent/$children 适用 父子组件通信;EventBus(emit/on) 适用于 父子、隔代、兄弟组件通信;Vuex;示例:父子组件之间传值:父组件向子组件传值:①props:父组件嵌套的子组件中,使用v-bind:msg="xxx"进行对象的绑定,子组件通过props接收对应的msg值②使用$children获取子组件和父组件对象this.msg2=this.$children[0].msg③ref:使.原创 2021-02-22 10:13:37 · 87 阅读 · 0 评论 -
vue双向绑定原理
双向绑定原理:用Object.defineproperty()重新定义(set方法)对象设置属性值和(get方法)获取属性值的操纵来实现的;数组是通过重写数组方法(push shift splice unshift sort reserve)进行重写(只有被defineProperty劫持的方法才会被重写)。Object.defineProperty{ obj, //定义属性的对象 prop, //要定义或者修改的属性的名称 descriptor, //将被定义或修改属性的描述符【核心】}v转载 2021-02-21 23:17:01 · 612 阅读 · 0 评论 -
vue路由守卫,本人的路由守卫示例,仅供参考
import Vue from 'vue'import VueRouter from 'vue-router'import jwt from 'jsonwebtoken'import store from '@/store'import moment from 'dayjs'const Index = () => import(/* webpackChunkName: 'index */ '../views/index.vue')Vue.use(VueRouter)const route原创 2021-02-18 11:16:53 · 312 阅读 · 0 评论 -
vue动态组件注册
import Vue from 'vue'// 自动导入components中的组件const componentsContext = require.context('@/components', true, /index.vue$/)componentsContext.keys().forEach((component) => { const componentConfig = componentsContext(component).default Vue.component(co原创 2021-02-14 17:00:00 · 1374 阅读 · 4 评论