vue
vue 日常
张贺_
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下
展开
-
vue 实现检测网络状态的组件 offline-handler
主要利用浏览器的 offline 和 online 事件来给出提示。template<template> <div v-if="mask" class="offline-mask"> <h2 class="offline-mask-title"> {{ offlineTitle }} </h2> </div></template>script<script>export defa原创 2021-05-08 10:08:40 · 2163 阅读 · 3 评论 -
vue3.x 中watchEffect与watch的区别
watchEffect与watch的区别:watch 是需要传入侦听的数据源,而 watchEffect 是自动收集数据源作为依赖。watch 可以访问侦听状态变化前后的值,而 watchEffect 没有,watchEffect获取的改变后的值。watch 是属性改变的时候执行,当然也可以immediate,而 watchEffect 是默认会执行一次(相当于自带 immediate),然后属性改变也会执行。...原创 2021-03-01 10:46:26 · 1825 阅读 · 1 评论 -
webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)
如今,webpack毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack知识。webpack的基本用法这里就不展开讲了。主要探讨一下如何提高webpack的打包速度。这篇文章以vue cli3.0+,webpack4.0+,nodejs10.0+这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时speed-measure-webpack-plugin就派上用场了。它的作用如下:...原创 2020-10-12 19:14:39 · 942 阅读 · 0 评论 -
vue响应式原理解析
原文链接.什么是vue响应式数据发生变化后,会重新对页面渲染,这就是Vue响应式。想要完成这个过程,我们需要做什么侦测数据变化收集视图依赖了哪些数据数据变化时,自动‘通知’需要更新的视图部分,并进行更新他们对应的专业术语分别是:数据劫持/数据代理依赖收集发布订阅模式如何侦测数据变化有两种办法可以侦测到数据变化:只用 Object.defineProperty 和 ES6 的 Proxy,这就是进行数据劫持或数据代理。Object.defineProperty实现Vue 通过转载 2020-09-15 10:31:08 · 157 阅读 · 0 评论 -
手撸一个自定义关联方式的多选树组件
目录提示业务场景实现思路功能拆分实现逻辑代码实现树的实现逻辑组件预览提示文章为公司内部提供的分享文章,业务场景描述部分会涉及到内部框架 yt-org 以及 yt-admin 等陌生词汇,读者请手动忽略,或直接读 实现思路 及 实现代码部分。业务场景首先提一下我们基于 el-cascader 二次封装的机构选择组件 yt-org , 接触过营销平台的小伙伴都知道, 这个组件用起来是相当舒适的。没接触过没关系,我大概说一下功能:该组件为全局组件, 集成在 yt-admin 中第一次调用时会请求原创 2020-08-10 09:42:03 · 508 阅读 · 0 评论 -
vue中computed和watch的区别详解
计算属性computed:支持缓存,只有依赖数据发生改变,才会重新进行计算不支持异步,当computed内有异步操作时无效,无法监听数据的变化computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用 computed如果computed 属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性原创 2020-07-27 11:41:42 · 5419 阅读 · 1 评论 -
vue init webpack-simple与vue init webpack的区别
vue init webpack-simple这样的方式适合小项目,vue init webpack这样的方式适合中大型项目;两种方式初始化Vue-Cli的项目的目录差别比较大,你可以发现使用vue init webpack这样的方式来初始化项目,默认提供了很多的webpack的配置,也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的...原创 2019-04-17 18:28:08 · 3972 阅读 · 0 评论 -
vue中删除数组(对象)的某一项
delete和Vue.delete删除数组的区别:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组 改变了数组的键值。 var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) this.$delete(b,1...原创 2019-02-25 10:38:19 · 39249 阅读 · 0 评论 -
vue高频面试题汇总
文章目录vue生命周期及各个生命周期阶段都干了什么?为什么vue组件中data必须是一个函数?vue中v-if和v-show有什么区别?$nextTick是什么?v-for key的作用组件传值常用的事件修饰符vue生命周期及各个生命周期阶段都干了什么?总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。建前/后: 在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el原创 2020-07-27 09:57:49 · 548 阅读 · 0 评论 -
[Vue warn] : Props with type Object/Array must use a factory function to return the default value.
解决方案:把props中的props:{ obj:{ type:Object, default:{} },},修改为props:{ obj:{ type:Object, default:()=>{} },},原理:系统报错Invalid default value ...原创 2019-01-29 18:36:16 · 11936 阅读 · 5 评论 -
vue用命令直接修复ESLint
步骤如下:1、打开package.json,在script里找到修改为:(中间插入--fix)"lint": "eslint --fix --ext .js,.vue src test/unit",2、终端运行npm run lint修改代码样式3、最后终端运行npm run dev就不会报ESLint错误了。...原创 2019-04-17 17:53:52 · 1704 阅读 · 0 评论 -
vue中watch的使用
watch:{ obj:{ handler (v) { //逻辑处理 }, deep:true, //若obj是对象或数组,要加deep:true才能监听到 immediate:true, //添加本条为立即执行侦听 ,即从obj的默认值开始侦听 }},数组中内容改...原创 2019-02-20 11:35:25 · 192 阅读 · 0 评论