![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 62
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
Vue2.0 和 Vue3.0 Dom Diff 对比
diff算法的目的是为了找到哪些节点发生了变化,哪些节点没有发生变化可以复用。如果用最传统的diff算法,如下图所示,每个节点都要遍历另一棵树上的所有节点做比较,这就是o(n^2) 的复杂度,加上更新节点时的o(n)复杂度,那就总共达到了O(n^3)的复杂度,这对于一个结构复杂节点数众多的页面,成本是非常大的。实际上vue和react都对虚拟dom的diff算法做了一定的优化,将复杂度降低到了o(n)级别,具体的策略是:同层的节点才相互比较从根节点起遍历整个节点数,只对同层的节点进行相互比较。原创 2022-10-13 17:11:23 · 1343 阅读 · 0 评论 -
vue中自定义指令的使用
权限方法,随便举个例子function checkArray(value) { let arr = [1, 2, 3]; return arr.indexOf(value) > -1;}判断用户是否有权限展示如果没有权限则不渲染Vue.directive('permission', { //元素插入 inserted(el, binding) { let value = binding.value; if (value) { //判断元素是否有权原创 2022-05-26 16:44:52 · 92 阅读 · 0 评论 -
require.context的使用
解释require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块使用说明require.context函数接受三个参数directory {String} -读取文件的路径useSubdirectories {Boolean} -是否遍历文件的子目原创 2022-05-26 16:03:54 · 1132 阅读 · 0 评论 -
vue实现 虚拟dom生成真实dom和更新时候的对比
虚拟dom生成真实domfunction patch(vNode) { let tag = vNode.tag; //目标元素 不可或缺 let attrs = vNode.attrs || {}; //属性 let children = vNode.children || [] //子节点 if (!tag) { return null; } //创建对应的dom let ele = document.createElement(t原创 2022-05-20 16:33:12 · 511 阅读 · 0 评论 -
Vue 模板是如何编译的
认识模板编译我们知道 <template></template> 这个是模板,不是真实的 HTML,浏览器是不认识模板的,所以我们需要把它编译成浏览器认识的原生的 HTML这一块的主要流程就是提取出模板中的原生 HTML 和非原生 HTML,比如绑定的属性、事件、指令等等经过一些处理生成 render 函数render 函数再将模板内容生成对应的 vnode再经过 patch 过程( Diff )得到要渲染到视图中的 vnode最后根据 vnode 创建真实的 DOM原创 2022-05-17 15:31:53 · 582 阅读 · 0 评论 -
vue Diff算法比较过程
第一步:patch函数中对新老节点进行比较如果新节点不存在 就销毁老节点 如果老节点不存在,直接创建新的节点 当两个节点是相同节点的时候,进入 patctVnode 的过程,比较两个节点的内部 第二步:patchVnode函数比较两个虚拟节点内部 如果两个虚拟节点完全相同,返回 当前vnode 的children 不是textNode, 再分成三种情况 - 有新children,没有旧children,创建新的 - 没有新children,有旧children,删除旧的原创 2022-05-10 11:42:28 · 1005 阅读 · 0 评论 -
Vue的生命周期是什么,整个流程,包括组件间的执行顺序
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。1、beforeCreate(创建前) :数据观测和初始化事件还未开始,此时 data 的响应式追踪、event/watcher 都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。2、created(创建后) :实例创建完成,实例上配置的 options 包括 data、compu原创 2022-04-14 14:58:52 · 1082 阅读 · 0 评论 -
vue2双向绑定原理
核心实现类:Observer : 它的作用是给对象的属性添加 getter 和 setter,用于依赖收集和派发更新Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例(里面 subs 是 Watcher 实例数组),当数据有变更时,会通过 dep.notify()通知各个 watcher。Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器.原创 2022-02-25 11:38:24 · 912 阅读 · 0 评论 -
Vue2.0为什么不能检查数组的变化,该怎么解决?
Vue内部实现了一组观察数组的变异方法,例如:push(),pop(),shift()等。Object.definePropert只能把对象属性改为getter/setter,而对于数组的方法就无能为力了,其内部巧妙的使用了数组的属性来实现了数据的双向绑定,下面我们来一步一步的实现一个简单版。定义一个需要监听变化的数组let obarr = []copy一份数组的原型方法,防止污染原生数组方法const arrayProto = Array.prototypeconst arrayMetho原创 2022-02-25 11:37:14 · 2040 阅读 · 0 评论 -
vue computed原理
computed 本质是一个惰性求值的观察者。computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。其内部通过 this.dirty 属性标记计算属性是否需要重新求值。当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,computed watcher 通过 this.dep.subs.length 判断有没有订阅者,有的话,会重新计算,然后对比新旧值原创 2022-02-25 11:25:35 · 2268 阅读 · 0 评论 -
在vue中使用装饰器
1、什么是装饰器器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式2、场景举一个例子在日常开发写bug过程中,我们经常会用到防抖和节流,比如像下面这样class MyClass { follow = debounce(function() { console.log('关注我') }, 100)}const myClass = new MyClass()// 多次调用只会输出一次myClass.follow()原创 2021-12-21 13:48:48 · 4663 阅读 · 0 评论 -
vue使用 iframe + postMessage 实现通信
1、在本地起两个工程 方便我们测试父:http://172.16.150.72:8080 this.$refs.iframe.contentWindow.postMessage(‘消息’,目标src)子:http://172.16.150.72:8081 window.addEventListener(‘message’,(e)=>{console.log(‘接收信息’)})2、父页面代码<template> <div class="box"> &l原创 2021-12-16 21:58:49 · 1745 阅读 · 0 评论 -
vue高频面试题
1.为什么data是个函数并且返回一个对象呢?data之所以只一个函数,是因为一个组件可能会多处调用,而每一次调用就会执行data函数并返回新的数据对象,这样,可以避免多处调用之间的数据污染。2.组件之间的传值方式有哪些?父组件传值给子组件,子组件使用props进行接收子组件传值给父组件,子组件使用$emit+事件对父组件进行传值组件中可以使用$ parent和$children获取到父组件实例和子组件实例,进而获取数据使用$ attrs和$ listeners,在对一些组件进行二次封装时可以原创 2021-09-22 11:48:19 · 455 阅读 · 0 评论 -
MVVM是什么?和MVC有何区别呢?
MVCModel(模型):负责从数据库中取数据View(视图):负责展示数据的地方Controller(控制器):用户交互的地方,例如点击事件等等思想:Controller将Model的数据展示在View上MVVMVM:也就是View-Model,做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。思想:实现了 View原创 2021-09-22 11:17:13 · 158 阅读 · 0 评论 -
element table表格行展开列表的实现
UI图难点element UI 并没有可以照搬的,只能我们自己对样式修改还原下面展开的项 能够和上面 对齐自适应屏幕缩放已实现效果屏幕自适应可以看到基本效果已经实现出来了,剩下的一点也是小修小补了实现代码html结构<el-table :data="tableData" class="table" row-class-name="table-row" cell-class-name="table-cell"> <el-table-column type=原创 2021-09-13 21:24:11 · 1436 阅读 · 0 评论 -
vue vuedraggable实现两栏,自定义组件拖拽,每一栏上下左右均可
需求:实现两栏,自定义组件拖拽,上下左右均可看官方文档,是没有上下左右的例子,只有两栏左右拖拽的,但是每一栏只能上下,而不能左右其实这里用了display:flex的属性,flex-wrap:wrap 如果宽度超出 那么就自动的往下布局来实现的demo如下<div class="container"> <div class="left"> <draggable v-model="list" group="site"> <transition原创 2021-09-09 16:29:41 · 1996 阅读 · 0 评论 -
vue实现div拖拽互换位置
<template> <transition-group tag="div" class="container"> <div v-for="(item,index) in items" :key="item.key" class="item" :style="{background:item.color,width:'80px',height:'80px'}" draggable="true" @dragstart="handleDragStart($event, .原创 2021-09-09 15:59:05 · 1222 阅读 · 0 评论 -
element ui datepicker时间控件选择周获取时间范围
遇到问题就是datepicker如果使用type为week的时候,只能获取到一个时间,但是后台需要我们提供一个startTime和endTime解决1.引入 import dayjs from ‘dayjs’;2.使用dayjs 获取周起始和周结束changeWeek(val) { this.queryParams.startTime = val && dayjs(val) .startOf('week') .format('YYYY-MM-DD') + '原创 2021-09-06 11:51:13 · 1878 阅读 · 2 评论 -
Vue和react的异同
共同点Vue和React存在着很多的共同点:数据驱动视图组件化都使用 Virtual DOM1. 数据驱动视图在jquery时代,我们需要频繁的操作DOM来实现页面效果与交互;而Vue和React 解决了这一痛点,采用数据驱动视图方式,隐藏操作DOM的频繁操作。所以我们在开发时,只需要关注数据变化即可,但是二者实现方式不尽相同。2. 组件化React与Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一些细块,这些块就是组件,组件之间的组合嵌套就形成最后的网页界面。原创 2021-08-23 17:13:46 · 1192 阅读 · 5 评论 -
说一说Vue2.0 双向绑定的原理与缺陷?
出现问题<el-tag v-for="(tag, index) in ruleForm.seatsList" :key="index" type="info" class="tags" closable @close="ruleForm.seatsList.splice(index, 1)" //ruleForm.seatsList.push({ realName: 1 })> {{ tag.realName }}</el-tag>分析原因首先我们先来了解原创 2021-08-17 11:13:01 · 843 阅读 · 0 评论 -
封装全局提示框,confirm
效果图目录在js中import Vue from 'vue';import confirm from './Confirm';let confirmConstructor = Vue.extend(confirm);let theConfirm = function(content) { content['show'] = true; return new Promise((res, rej) => { //promise封装,ok执行resolve,no执行rejectlet原创 2021-08-13 17:55:14 · 558 阅读 · 0 评论 -
el-date-picker限制时间可选择区间
废话不多说,上代码<el-date-picker v-model="daterange" type="daterange" range-separator="至" start-placeholder="筛选开始日期" end-placeholder="筛选结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="changeDate"></el-date-picker>其实原创 2021-08-12 13:52:29 · 1035 阅读 · 1 评论 -
vue-router原理解析
一 主要有两种模式hash模式和history模式。1.hash模式URL的hash 是以#开头,是基于location.hash来实现的。Location.hash的值就是URL中#后面的内容。当hash改变时,页面不会因此刷新,浏览器也不会请求服务器。同时,hash 改变时,并会出发相应的hashchange时间,所以,hash很适合被用来做前端路由。当hash路由发生跳转,便会触发hashchange回掉,回掉里面就可以实现页面的更新操作,从而达到跳转页面的效果。 // 当Html文档加原创 2021-08-03 11:53:06 · 466 阅读 · 0 评论 -
Vue中provide inject详解+数据响应式更新
1. 概念父辈们给祖孙传值, 不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,这就是它最大的特性。2. 基本用法provide 选项应该是:一个对象或返回一个对象的函数inject 选项应该是:一个字符串数组,或 一个对象,对象的 [key] 是本地的绑定名2.1 代码执行顺序:dataprovidecreated//在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组件才可以取到inject值原创 2021-06-30 11:28:59 · 1324 阅读 · 1 评论 -
vue $nextTick()方法实现原理
什么是vue.nextTick()在下次 DOM 更新循环结束之后执行延迟回调简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,应用场景1、created中Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数原创 2021-06-18 17:05:34 · 705 阅读 · 0 评论 -
vuex之state、actions、mutations
1、Vuex 是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。使用场景在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——Vuex当多个组件需要操作到同一个数据的时候可以使用核心概念Vuex 的核心概念由五部分组成: State (存放状态)、Getter (加工state成员给外界)、Mutation (state成员操作,必须是同步函数)、A原创 2021-05-27 16:10:53 · 222 阅读 · 1 评论 -
手把手教学,带你升级vue3.0(三)setup,ref,reactive,customRef,readOnly
setup特点:它是一个组合api,只能是一个同步函数生命周期位于beforeCreate和created之间,因此也意味着,在它里面无法访问到data和mounted,this = undefined;需要返回一个对象 (在setup函数中定义的变量和方法需要 return 出去的 不然无法再template中使用)setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性原创 2021-05-19 15:19:29 · 327 阅读 · 1 评论 -
手把手教学,带你升级vue3.0(二)为什么vue3性能会比vue2.0好
vue3.0 的diff算法vue3比vue2对比,为什么速度会更快性能会更好?vue3对diff优化Vue2中的diff算法进行全量对比的Vue3新增了静态标记, 它与上次虚拟节点进行对比的时候,只对比带有静态标记的节点,并且可以通过flag得知当前节点需要对比的内容,如下图所示vue3.0在创建虚拟DOM的时候,会根据DOM中的内容,会不会发生变化,来添加静态标记,因为<p>我是段落</p> 它是不会写死的,所以也不需要多浪费资源去对它进行对比,然后对会变化的原创 2021-05-19 14:26:58 · 717 阅读 · 0 评论 -
手把手教学,带你升级vue3.0(一)创建项目
创建项目有三种形式 Vue-Cli Vite Webpack本文将采用 Vue-Cli创建项目首先安装好最新版的vue-cli$ vue create demo$ cd demo$ yarn$ yarn serve创建好初始项目之后,我们会发现vue3写法变了,vue2 是初始化实例的形式,而 vue3 是通过函数式风格。// Vue2.0new Vue({render: h => h(App)}).$mount(’#app’)// Vue3.0import原创 2021-04-15 16:00:15 · 451 阅读 · 0 评论 -
mui框架 解决numbox组件第一次进入 点+按钮,数值没反应
引用mui numbox代码<div class="mui-numbox" data-numbox-min="1" data-numbox-max="999"> <button class="mui-btn mui-btn-numbox-minus" type="button">-</button> &l...原创 2019-04-01 19:44:13 · 2014 阅读 · 0 评论 -
vue-preview 插件的使用 缩放图片
vue-preview一个Vue集成PhotoSwipe图片预览插件这个插件可以实现图片的缩放,因为这个插件已经更新了,所有可能有的小伙伴不会使用或者出现了一些小错误,如 Property or method “$preview” is not defined on the instance but referenced during之类的首先配置golbal.css 全局文件.thumb...原创 2019-03-30 19:27:33 · 1038 阅读 · 1 评论