![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 67
安静的天空
这个作者很懒,什么都没留下…
展开
-
vue-vue2和vue3响应式原理的区别
而数组因为是通过重写数组的7个方法【 ‘push’,‘pop’,‘shift’,‘unshift’, ‘splice’,‘sort’,‘reverse’】和遍历数组元素进行的响应式处理,也会导致按照数组下标进行赋值或者更改元素时无法触发视图更新。但是 只有通过 proxyObj 进行操作的时候才能通过定义的操作拦截方法进行处理,直接使用原对象则无法触发拦截器,这也是 Vue 3 中要求的 reactive 声明的对象修改原对象无法触发视图更新的原因;并且 Proxy 也只针对。通过下面的简易代码来分析。原创 2023-04-18 14:30:43 · 537 阅读 · 0 评论 -
vue-vue2和vue3的diff算法
乱序部分,采用最长递增子序列的算法,最大递增子序列的作用就是通过新旧节点变化前后的映射,创建一个递增数组,这样就可以知道哪些节点在变化前后相对位置没有发生变化,哪些节点需要进行移动,如下图计算出E、F、Y、J 是不需要操作的节点,直接复用,然后移动K节点,即可完成一次更新;若新的比老的长,创建,可以看到下图新的比老的多,新的多了一个D,多出来的这个节点就需要创建并添加到尾部。老的比新的长,删除,可以看到下图老的比新的多了个C,多出来的这个节点需要删除。原创 2023-04-12 16:03:19 · 2929 阅读 · 1 评论 -
vue-性能优化
线上的项目,一般都会结合构建工具 webpack 插件或服务端配置 nginx,来实现 http 传输的 gzip 压缩,目的就是把服务端响应文件的体积尽量减小,优化返回速度,html、js、css资源,使用 gzip 后通常可以将体积压缩70%以上,这里介绍下使用 webpack 进行 gzip 压缩的方式,使用。4、按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。/5、可以使用keep-alive,keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。原创 2023-03-23 18:18:59 · 292 阅读 · 0 评论 -
vue-vue2和vue3的区别
核心要点用Composition API代理Options API体积更小数据响应式的区别diff算法优化静态提升事件监听缓存SSR优化部分新特性1、用Composition API代理Options API逻辑的独立分离,更好阅读和维护更少的代码量2、体积更小vue2导入的是整个vuejs,而vue3可以按需导入通过webpack的tree-shaking功能,可以将无用模块“剪辑”,仅打包需要的能够tree-shaking;3、数据响应式的区别Vue2是通过原创 2023-03-23 17:35:13 · 294 阅读 · 0 评论 -
vue-vue的插件机制与install
插件制作时会通常会加上 install 方法,我们以 Vue-Router 为例。核心作用就是use的时候,判断插件类型,执行install或者插件本身。然后我们在项目中使用 Vue-Router 插件。(3)Vue-Router 挂载流程。(2)根据上面的例子我们进行分析。原创 2023-03-23 10:18:45 · 861 阅读 · 0 评论 -
vue-解决跨域问题
指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全制。原创 2023-03-23 10:57:39 · 465 阅读 · 0 评论 -
vue-初始过程做了什么
如果发现配置项上有el选项,则自动调用$mount方法,也就是说有了el选项,就不需要再手动调用$mount方法,反之,没提供el选项则必须调用$mount。初始化组件的inject配置项,得到ret[key]=val形式的配置对象,然后对该配置对象进行响应式处理,并代理每个key到vm实例上。(2)初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到vm.$options选项中,以提高代码的执行效率。初始化组件实例的关系属性,比如。...原创 2022-07-26 18:18:27 · 207 阅读 · 0 评论 -
vue-自动化测试框架JEST和CYRPESS
大部分企业为了追求开发效率,所以并没有去强制要求员工写前端自动化测试的代码。将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装,对这些函数或类进行的测试。单元测试是指对程序中最小可测试单元进行的测试,例如测试一个函数、一个模块、一个组件…(1)根目录/src/component/ZTest/index.vue。(2)根目录/tests/unit/ZTest.spec.js。强迫开发者编写更容易被测试的代码,提高代码质量。编写的测试有文档的作用,方便维护。不方便迭代,代码重构困难。........原创 2022-07-25 18:03:39 · 1829 阅读 · 0 评论 -
vue-sentry实现前端监控
3、在.env.development和.env.production和.env.staging文件中定义sentry版本号的环境变量VUE_APP_RELEASE_VERSION=‘vue-admin-template@1.0.0’5、在App.vue中故意抛出错误,运行程序,然后到sentry中查看错误记录。,注册账号,建立组织(organization)和项目(project)4、在main.js文件中初始化监控服务。2、安装sentrysdk。...原创 2022-07-25 14:53:15 · 983 阅读 · 0 评论 -
vue-双向绑定
实现过程我们已经知道如何实现数据的双向绑定了,那么首先要对数据进行劫持监听,所以我们首先要设置一个监听器Observer,用来监听所有的属性,当属性变化时,就需要通知订阅者Watcher,看是否需要更新。因为属性可能是多个,所以会有多个订阅者,故我们需要一个消息订阅器Dep来专门收集这些订阅者,并在监听器Observer和订阅者Watcher之间进行统一的管理。因为在节点元素上可能存在一些指令,所以我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化成一个订阅者Watc原创 2022-03-17 15:26:47 · 715 阅读 · 0 评论 -
js-promise实现逻辑
一、promise实现class MyPromise { static PENDING = 'PENDING' static FULFILED = 'FULFILED' static REJECTED = 'REJECTED' constructor(callback) { if (typeof callback !== 'function') { throw new TypeError('promise resolve undefined is no a func原创 2022-03-14 16:41:32 · 191 阅读 · 0 评论 -
浏览器解析网页的过程
用户输入url并回车;进行DNS解析获得IP: 先搜索浏览器自身dns缓存; 再找本机dns缓存;如找到且未过期则搜索停止,如未找到,则向本地配置的首选dns服务器发起域名解析请求,后续由运营商的dns服务器查到或进一步发送请求,直到拿到域名对应的ip并返回给浏览器;发起TCP协议的三次握手:第一次握手:建立连接时,客户端发送syn(建立联机)包到服务器,并进入syn_send状态,等待服务器确认;第二次握手:服务器收到syn包,确认包信息,同时自己也发送一个syn + ack(确认)包并进入sy.原创 2021-02-26 13:53:46 · 1032 阅读 · 0 评论 -
vue-初步理解VUE双向绑定原理
vue双向绑定原理vue的双向绑定是由数据劫持结合发布者-订阅者模式实现。什么是数据劫持?: vue通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情。var Book = {};Object.defineProperty(Book,'name',{ set:function(value) { name = value; console.log('你取了名叫:'+value);原创 2021-02-25 17:30:25 · 380 阅读 · 0 评论 -
vue-前进刷新,后退不刷新实现
vue通过keep-alive实现前进刷新,后退不刷新(1)在路由中设置两个参数,关于keepAlive、isRefresh的具体作用往下看 { path: "/a", name: "a", component: () => import("../views/a.vue"), meta: { title: "前进刷新,后退...原创 2020-02-28 17:48:57 · 510 阅读 · 0 评论 -
vue-项目优化之(1) 函数式组件
vue项目优化之(1) 函数式组件 // @ 普通组件<template> <div class="cell"> <div v-if="props.value" class="on"></div> <section v-else class="off"></section> </div>...原创 2019-09-11 16:55:04 · 185 阅读 · 0 评论 -
vue-@vue/cli3.0 使用 postcss-pxtorem
postcss-pxtorem是PostCSS的插件作用: 将像素单元生成rem单位。(1)安装依赖npm install postcss-pxtorem --save-dev(2)配置(vue.config.js) css: { loaderOptions: { postcss: { plugins: [ require(...原创 2019-09-19 15:47:56 · 498 阅读 · 0 评论 -
vue-在线预览pdf文件和下载(pdf.js)
最近做项目遇到在线预览和下载pdf文件试了多种pdf插件,例如jquery.media.js(ie无法直接浏览)最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果)强烈推荐改插件,以下介绍用法(1)下载插件下载路径:https://github.com/mozilla/pdf.js(2)将下载构建后的插件放到文件中public(vue/cli 3.0)(3)在vu...原创 2019-09-25 18:00:01 · 10349 阅读 · 4 评论