Vue
文章平均质量分 83
奋飛
乐观、勇气、专注、果断、好奇、公正、慎思、真诚、追求极致追求完美、诚信!独立撰写了多个前端专题模块,访问量达百万级。多次负责组织大数据可视化前端架构平台开发工作。对前端新技术、新潮流具有很强的敏锐力和洞察力!
展开
-
【揭秘Vue核心】为什么不建议在 v-for 指令中使用 index 作为 key,让你秒懂!
在没有 key 的情况下,Vue 将使用一种最小化元素移动的算法,并尽可能地就地更新/复用相同类型的元素。如果传了 key,则将根据 key 的变化顺序来重新排列元素,并且将始终移除/销毁 key 已经不存在的元素。虚拟DOM在比较元素的时候,因为DOM上的key等属性均未发生变化,所以其自身和内部的input均被复用了。所以,在实际开发过程中不要把 index 作为 key 值。原创 2023-07-17 11:05:01 · 429 阅读 · 0 评论 -
【揭秘Vue核心】深入解析Object.defineProperty和Proxy的区别,让你秒懂!
proxy和Object.defineProperty是用于实现响应式数据的两种不同方式。Object.defineProperty 通过直接修改对象的属性描述符来实现数据的劫持。Vue2.x中就是通过此来实现数据的响应式。但有一些限制,如只能劫持已经存在的属性,无法对新增属性或删除属性进行劫持。这就导致Vue 2.x需要在创建实例之前声明数据属性,否则无法实现响应式。而Vue 3.0使用了Proxy,它是ES6新增的特性。可以对整个对象进行劫持,包括对新增属性和删除属性的劫持。可以更加灵活地监听和代理。原创 2023-07-05 16:32:38 · 360 阅读 · 0 评论 -
掌握这些vue内容,让你在提升代码复用上不再纠结!
前端工程化的最终目的都是为了能够更好地维护代码。代码复用是提升效率和可维护性的利器。vue 中针对不同场景和业务情况,提供了各种方式。全面了解这些内容,可以在开发过程中让你得心应手!1. 组件:主要的构建模块;2. 组合式函数:侧重于有状态的逻辑;3. 自定义指令:重用涉及普通元素的底层 DOM 访问的逻辑;4. 插件:添加全局功能的工具代码。原创 2023-06-28 18:59:40 · 478 阅读 · 0 评论 -
掌握这些容易被忽略的Vue组件细节,提升开发效率,事半功倍!
组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。组件在日常开发的重要性不言而喻,掌握这些细则,可以让你在开发中事半功倍!原创 2023-06-27 18:49:13 · 477 阅读 · 0 评论 -
掌握这些容易被忽略的Vue细节,轻松排查问题,省时省力!
掌握这些容易被忽略的Vue细节,轻松排查问题,省时省力!原创 2023-06-25 22:40:53 · 420 阅读 · 0 评论 -
vue 模板中使用 console.log
模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。如何注册能够被应用内所有组件实例访问到的全局属性?原创 2023-04-20 15:56:53 · 2064 阅读 · 0 评论 -
深入实战探究 Vue 2.7 Composition API 的强大之处
Composition API是 Vue 2.7 中引入的一种新的组件逻辑复用方式。它与 Vue 之前的 Options API 有很大的不同。Options API:基于对象的方式,将组件的各种选项,如data、methods、computed等,组织在一个对象中;Composition API:允许我们将组件的逻辑拆分成更小的、可复用的部分,称为composition函数。在实际开发过程中,使用 Composition API 带来了一些显著的优点,使得组件可以更加灵活、清晰,复用性也得到显著提高原创 2023-04-12 19:50:15 · 1444 阅读 · 0 评论 -
vue2.0 插槽不是响应性的
请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染,我们建议改变策略,依赖诸如props或data等响应性实例选项。原创 2023-01-12 10:56:15 · 1171 阅读 · 0 评论 -
关于el-upload看这一篇就够了
el-upload 提供了诸多处理,为我们日常开发提供了便利性,同时也存在着一些边界没有处理。所以,这里建议如下:【关于校验】放到on-change中实现,而不是中这样无需关心是否为自动上传执行问题(非自动掉用submit,才触发)返回 false,会执行on-remove,整体比较混乱【关于是否自定义 file-list】如果存在存量file,一定要使用file-list,便于初始化展示对于文件列表有其他业务要求可自定义,否则不建议使用,避免引用之间的传递问题...原创 2022-08-03 19:29:18 · 7330 阅读 · 0 评论 -
最佳实践:vue组件引用传值(续篇)
需要大家深刻理解vue单向数据流思想,不要为了节省代码(或偷懒),产生难以维护的代码!当父子组件对引用类型需要同步修改时,在子组件中需要切断相关引用,避免引用传值传递破坏vue的副作用,违背了vue单向数据流的设计初衷。...原创 2022-07-15 09:34:07 · 706 阅读 · 0 评论 -
Vue项目兼容IE(续) babel7.4.0+
关于 vue-cli 项目兼容 IE 的内容,请查看 https://blog.csdn.net/ligang2585116/article/details/103554818本文针对 babel 7.4.0+ ,处理方式仍然是寻找相应 Babel polyfill。转换 ES6+ 代码这里我们仍然采用官方「第3种」 方式。babel.config.js 无需修改(这里需要特别注意)module.exports = { presets: [ '@vue/cli-plugin-b.原创 2022-02-08 18:15:03 · 940 阅读 · 1 评论 -
vue2项目中如何使用es2020
ECMAScript 规范史ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。截止2022年,正式标准一共发布12次,es2020草案撰写中。1997年06月,ECMAScript 第一版语言被采纳,标准规范发布;1998年06月,Ecma 大会批准了第二版;1999年12月,强大的正则表达式、更好的字符串处理、新的控制语句、try/catch 异常处理、更严格的错误定义、数字输出格式以及对未来语言增长预期的原创 2021-11-04 20:26:25 · 4070 阅读 · 6 评论 -
vue知识图谱--不问API,只问为什么
一张图带你了解整个vue全家桶相关。包括vue、vue-router、vuex、webpack、浏览器相关等所有vue全家桶相关知识点。xmind原件下载地址:https://download.csdn.net/download/ligang2585116/16263314原创 2021-03-31 15:03:47 · 395 阅读 · 0 评论 -
最佳实践:vue2 父组件监听子组件生命周期钩子
HookEvent源码地址:https://github.com/vuejs/vue/blob/master/src/core/instance/lifecycle.js#L314export function callHook (vm: Component, hook: string) { const handlers = vm.$options[hook] if (handlers) { for (let i = 0, j = handlers.length; i < j; i原创 2020-12-26 13:08:04 · 752 阅读 · 0 评论 -
vue3 -- 通过简单示例,聊一聊Composition API
在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式:Mixin:命名空间冲突 & 渲染上下文中暴露的 property 来源不清晰。例如在阅读一个运用了多个 mixin 的模板时,很难看出某个 property 是从哪一个 mixin 中注入的。Renderless Component:无渲染组件需要额外的有状态的组件实例,从而使得性能有所损耗Vuex:就会变得更加复杂,需要去定义 Mutations 也需要去定义 Actions上述提到的几种方原创 2020-11-20 18:56:39 · 673 阅读 · 1 评论 -
vue3 -- 通过几行示例代码,聊一聊响应式
Vue3 中关于响应式的 API (@vue/reactivity)有以下几个,下面通过使用不同的 Api 实现下述示例,来做一个对比和总结 :refreactivecomputedreadonlywatchEffectwatchApp.vue初始值:<input v-model.number="initial"/><count :initial="initial"></count>Count.vue<div>当前值: {{cou原创 2020-11-18 20:02:18 · 482 阅读 · 0 评论 -
最佳实践:vue弹窗及滑块响应式
下述为项目中弹窗/滑块统一处理方式汇总(下述已 el-dialog 为例)演示环境:https://eugvd.csb.app/Demo 地址:https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497DOM 结构方式1. (推荐1:直接注入数据「详情」) el-dialog 壳子在外,内容单独组件,后续组件可以替换为其他壳子<template> <el-dialog原创 2020-06-03 23:26:27 · 773 阅读 · 2 评论 -
vue组件对象字面量传值的注意啦!
前面汇总过 「vue组件引用传值的最佳实践」,对于 vue2 版本存在一个严重的性能问题,需要格外注意:对象字面量的传递vue-props-传入一个对象<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics原创 2020-05-19 23:33:05 · 1005 阅读 · 0 评论 -
最佳实践:vue组件引用传值
下述组件传值指引用类型(数组或对象)传值。准备:单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。这个 prop 用来传递一个初始值;这个子组件接下原创 2020-05-18 23:17:41 · 1538 阅读 · 0 评论 -
vue-loader&vue-template-compiler详解
在 vue 工程中,安装依赖时,需要 vue 和 vue-template-compiler 版本必须保持一致,否则会报错。Module build failed: Error: Cannot find module ‘vue-template-compiler’为什么二者版本必须一致呢?vue-template-compiler 承担哪些作用?其和 vue-loader 又有何关联?...原创 2020-02-29 16:29:34 · 14990 阅读 · 0 评论 -
Vue数据代理检测(源码)
阅读源码通常是枯燥无味的,类似 Vue 这种框架级的,代码量更是巨大;且各个实现之间关联性很大,跟踪源码非常跳跃,看完后总是稀里糊涂。今天,从一个常见的错误说起,与使用场景相结合,带着目的去查看源码。从一个告警说起Vue 工程中,在 data 对象中,使用 _ 或 & 开头命名变量,且将该变量应用到模板中,会收到如下警告(开发模式下):[Vue warn]: Property my...原创 2020-02-13 20:42:57 · 2279 阅读 · 0 评论 -
Vue项目兼容IE11
vue cli项目中使用@babel/polyfill兼容ie11。 解决 DOM7011: 此页上的代码禁用了反向和正向缓存;HTML1300:进行了导航;`"useBuiltIns": "entry"`的合理使用;vue.config.js 中 transpileDependencies 的正确配置。原创 2019-12-15 22:38:38 · 12455 阅读 · 8 评论 -
让vue-cli初始化后的项目集成支持SSR
文章转自悠扬小Q,原文地址: http://blog.myweb.kim/vue/%E8%AE%A9vue-cli%E5%88%9D%E5%A7%8B%E5%8C%96%E5%90%8E%E7%9A%84%E9%A1%B9%E7%9B%AE%E9%9B%86%E6%88%90%E6%94%AF%E6%8C%81SSR/?utm_campaign=ligang&utm_source=csdn&转载 2017-11-14 18:56:23 · 16042 阅读 · 7 评论 -
Vue基础:组件--组件及组件通信
组件组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。使用组件注册一个全局组件,你可以使用 Vue.component(tagName, options)使用组件实例选项注册局部组件new Vue({// ...components: { // <m原创 2017-10-16 19:31:37 · 1982 阅读 · 0 评论 -
Vue基础:组件--slot、异步组件、递归组件及其他
slot分发内容为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 <slot> 元素作为原始内容的插槽。 问题(编译作用域)message 应该绑定到父组件的数据,还是绑定到子组件的数据?<child-component> {{ message }}</child-component>答案是父组件。父组件模板的内容在父组件作用原创 2017-10-26 20:08:37 · 3722 阅读 · 2 评论 -
Vue基础:响应式
最近换了东家,比较忙、比较累,但博客的更新速度不能明显下降。Fighting!写在前面Vue不是框架(前端框架往往需要解决路由、试图管理、数据持久化等流程),Vue只关注视图层。webpack构建Vue项目使用webpack构建Vue项目,在配置文件中会看到如下代码:module.exports = { // ... resolve: { alias: { // 使用完原创 2017-09-12 18:26:06 · 1919 阅读 · 1 评论 -
Vue基础:条件渲染、列表渲染、事件处理
条件渲染v-ifVue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。<template v-if="type"> <label>Username</label> <input type="text" placeholder="enter your username"></template><template v-else> <label>Email</label>原创 2017-09-18 18:53:59 · 1483 阅读 · 0 评论 -
vue-自定义组件传值
项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式。 父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值 在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop给子组件下发数据,子组件通过事件给父组件发送消息。常规prop-event父组件<prop-event-原创 2017-12-23 16:55:48 · 23879 阅读 · 17 评论 -
vuex
写在前面 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。使用Vue开发项目时,通常我们就会遇到如下几种棘手的问题:问题1:通过路由传递参数,我们会采用params或者query形式,但这两种方式都会在URL上做手脚,如果传递的参数过多,会导致400 Bad Request(如,点击原创 2018-01-03 18:51:06 · 1558 阅读 · 0 评论 -
vue-router详解及实例
写在前面用户进行了交互操作,现在要对页面内容进行变更,可以通过javascript进行动态替换DOM,但是其不便于分享、收藏,对于搜索引擎和用户来说都是不友好的!什么是前端路由? 根据不同的 url 地址展示不同的内容或页面,无需依赖服务器根据不同URL进行页面展示操作优点用户体验好,不需要每次都从服务器全部获取,快速展现给用户缺点使用浏览器的前进,后退键的原创 2018-01-13 16:01:20 · 16332 阅读 · 3 评论 -
ElementUI获取子组件验证结果
最近项目中遇到父组件需要获取子组件(表单)的验证结果的需求,特整理如下: 尽管有 prop 和事件,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,...原创 2018-03-07 19:26:53 · 7092 阅读 · 2 评论 -
Vue 组件扩展
最近,新项目架构搭建在扩展组件的场景中:图表使用了extends方式,而公共业务server和view之间使用了mixins方式。对于二者的选择,我们通常会解释为extends的优先级高于mixins,但其真实的差异是由于其合并策略不同或者说在合并策略中执行的顺序不同导致的。源码 下述,简单阐述Vue中涉及到组件扩展的相关API及自定义合并策略等相关内容示例:定义公共基础的组件配置模...原创 2018-06-18 22:34:30 · 7334 阅读 · 0 评论 -
Vue-第三方库扩展
之前写过一篇 Vue-组件扩展 的文章,通常我们采用 extends 或 mixins 进行扩展组件;但项目中我们经常还会使用一些第三方库(Lodash, Moment等),如何调用这些工具方法智者见智仁者见仁。 我司现在大部分都是大数据可视化方面的工作,所以在系统中,倡导封装了一批图表的数据转换方法,便于大家的调用和系统的统一。 在第一个项目中,将这批数据转换方...原创 2018-07-31 09:33:10 · 2603 阅读 · 0 评论 -
vuex-router-sync 源码解析
vuex-router-sync:路由状态管理,保持 vue-router 和 vuex 存储同步。import { sync } from 'vuex-router-sync'import router from '@/router'import store from '@/store'sync(store,router)new Vue({ el: '#app', rout...原创 2019-07-01 22:14:33 · 513 阅读 · 0 评论 -
vue computed正确使用方式
最近面试中,遇到一个小伙子,谈到了vue中的 computed 和 watch 区别,最后得到了一个让我瞠目结舌的答案,只用 watch,从不用 computed模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于复杂逻辑,vue 提倡使用计算属性。需要特别说明:计算属性的 getter 函数是没有副作用 (side effec...原创 2019-07-03 21:16:13 · 123221 阅读 · 7 评论 -
Vue基础:数据绑定
模板语法v-once 指令 执行一次性地插值,当数据改变时,插值处的内容不会更新。大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令使用javascript表达式,只能包含单个表达式{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('')原创 2017-09-14 08:15:28 · 1965 阅读 · 0 评论