前端邓浩 - vue/angular/react
type: channel
link: https://denghao.me/index.php/category/vue/
description: 前端框架
items: Nuxt踩坑随手记
items: Vue SSR方案，Nuxt和Vapper怎么选？
items: 字幕在线编辑器SubPlayer
items: Vue修改数组对象的更新问题
items: vue+tabs动态组件方案漫谈
items: socket.io体验-AI在线聊天
items: Vue模拟select多选

Nuxt踩坑随手记
type: item
date: 2021-10-13T10:41:00+08:00
description: 本文记录Nuxt.js使用过程中遇到的问题及解决方法。生命周期(asyncData、fetch、mounted...)执行了两次原因：可能是Nuxt的bug讨论：https://github.com/nuxt/nuxt.js/issues/5703解决：1.仔细检查每一个静态资源加载情况，特别是图片，兼容为空的情况; 2. 检查每一个组件和模块，需要一个一个地注释和排除，包括自定义和第三方; 3.检查v-show，换成v-if试试。加载速度太慢？网页性能优化是一个系统工程，以"外评网"例。使用nuxt自带analyze工具可以查看每一个资源大小，// 修改nuxt.config.js文件 build:{ analyze:true, ... }以下是最终优化后的效果，从原来的>1Mb，减小到345kb，且还有优化的空间。1. UI组件按需加载外评网UI基于element-ui，剔除多余组件后，积体减少了几十kb。// plugins/element-ui.js文件，按需加载 import {Button,Form} from 'element-ui'; const components = [Button,Form]; const Element = { install(Vue) { components.forEach(component => { Vue.component(component.name, component) }) } } Vue.use(Element, { size: 'mini' })2.雪碧图查看network时，发现许多svg图标加载都在1s左右，改成雪碧图之后网络请求瞬间减少了7~8个。png图片用tinyPng压缩后，体积还能减少20%~60%不等。3.css外部引入Nuxt默认把css直接渲染在页面，百度官网也是同样的做法，这个见仁见智。我认为如果css较多，服务器配置又不高，还是提到外面引入好些。//修改nuxt.config.js配置 build: { extractCSS: { allChunks: true } }4.图片懒加载这个没啥好说的，我使用的vue-lazyload，支持img和background-img两种方式的图片的懒加载，配置也简单。5.CDN目前我还没做，因为Demo网站没备案，国外cdn又因为某些原因不稳定。有条件的应该上。6.硬件说了这么多，你可以点开Demo站点试试效果。速度达到你的预期了吗？老实说，没达到我的预期，因为Demo站用的1c2h1m香港服务器，再怎么折腾，速度还是没有国内同等级服务器快。

Vue SSR方案，Nuxt和Vapper怎么选？
type: item
date: 2021-03-12T16:11:00+08:00
description: 在前端现代框架下做服务端渲染，是开历史的倒车，无奈搜索引擎至今对Javascript依然不友好。背景最近我花了2周时间写了一个网站（Demo地址），先后中度体验了水滴团队的Vapper和大家熟知的Nuxt，有一些感受想和大家分享。先说结果，我最终放弃了Vapper，选择了Nuxt。前期感受当初选型时，Vapper最吸引我的地方是“无感”切换，只需给页面添加needSerialize:true,以很小的成本就能实现SSR同构，那是多么美妙的事。相比之下，Nuxt规则了固定的目录结构，默认还自动生成router（可自定义），并引入了如asyncData等新方法，添加了项目迁移成本。又比如Vapper允许在服务端入口created()钩子中直接使用this(Vm), 而Nuxt的服务端入口asyncData()中无法直接调用this，因此不能直接引用methods下的方法,(Nuxt 2.12之后提供fetch钩子可实现)。后期感受在使用Vapper完成了主体开发后，我决定放弃。原因很简单：Vapper已经大半年没维护，且全网资料实在太少了！就拿动态设置页面title来说，Vapper在入口文件定义好head后，我至今没找到合适的方式在页面内部进行二次修改，（有解决此问题的朋友请留言告知），而Nuxt在页面内部提供了head()方法，可直接修改。 Vapper默认的html模板中，lang写死为en，以至于在入口文件配置了htmlAttrs后，出现两个lang的情况，如果你有我一样的强迫症，只有手动新建一个服务端html模板来解决。Vapper官网也没有介绍部署上线相关资料，官方认为此类问题不属于其管辖范围。在用pm2部署时也折腾了一阵。此种小坑不断，网上资料寥寥无几，孤军奋战的感受贯穿始终。在磨合了近一周时间后，我放弃了。花了半天时间切到Nuxt，上面那些问题迎刃而解。当然Nuxt也有坑，但目前遇到的问题网友们基本都填过了，不超过10分钟就能解决。总结就目前而言，Nuxt还是更稳妥的方案。

字幕在线编辑器SubPlayer
type: item
date: 2020-01-16T18:50:00+08:00
description: 逛V2看到的，一款挺好的字幕在线编辑器，作者也开源了。自己按需作了修改，记录一下。预览地址我的版本： https://denghao.me/special/subPlayer/index.html作者开源地址： https://github.com/zhw2590582/SubPlayer我修改部分时间批量偏移设置；字幕批量删除指定行；点击文本框直接修改保存；中间插入字幕危险操作二次确认，简化翻译语种预览图注：翻译调用百度/谷歌服务，Key是原作者的，建议更换成自己的。

Vue修改数组对象的更新问题
type: item
date: 2017-08-25T16:50:00+08:00
description: 在Vue中，对变量（数组对象）进行修改，有时并不会立即渲染在模板中，但打印发现变量确实已被修改。此时需要注意修改的方式，现总结备忘。官方说明：https://cn.vuejs.org/v2/guide/reactivity.html demo： 修改代码后，点击运行预览效果： obj：{{obj}} arr: {{arr}}

vue+tabs动态组件方案漫谈
type: item
date: 2017-06-30T21:59:00+08:00
description: 这是一篇枯燥的笔记，很可能最后还没有demo demo地址。Tabs标签页大家应该很熟悉了，特别是在jQuery盛行时代，内容可以高效地集中。如果使用vue这种自身就偏单页应用的框架，如何实现tabs动态加载所需页面呢？以下是我在实现过程中遇到的问题，供参考。1. 核心方法是什么?在Vue内置组件中，有个名叫component的组件，提供:is属性用于决定渲染目标，并提供了keep-alive指令把切换过的组件保留到内存中，避免重新渲染。参考：https://cn.vuejs.org/v2/guide/components.html#动态组件 2.路由怎么控制?由于是vue+tabs（SPA中的SPA）, vue-router之类的基本用不上了，直接在母页上导入组件，注册到components上供动态调用即可。import page1 from './page1.vue' import page2 from './page2.vue' ... ... components: { page1,page2 } 3.数据结构怎样设计?我的需求是tabs从一个菜单(可能包含二级菜单)点击生成，默认有一个tab永不关闭，其余每个tab可关闭和单独刷新等等。我的做法是建两个数组(或对象)：一个存储固定的菜单数据，另一个空数组，存储用户添加的tab数据。注意vue中监听对象或数组变化有坑。这里涉及具体逻辑，就不啰嗦了，有兴趣可以看看源码。4.每个tab单独刷新问题vue2新增了activated、deactivated等生命周期钩子(不理解为什么要取‘钩子’这么奇怪的名字)，用于监听keep-alive状态。这样就可以监听每个tab获得焦点或者失焦状态，以便知道在什么时候执行父组件传过来的命令(如关闭和刷新)。有了事件触发机制，现在就差知道到底执行什么命令了，我给component添加了自定义属性:refresh,当达到刷新条件时，通过props传给子组件，子组件得到refresh进行判断，决定是否刷新(刷新不要location.reload,这会让整个web刷新,要根据子页面逻辑重新初始化数据和请求接口。这方法比较笨拙，但我没发现官方api提供了想关方法，希望你有更好的处理方式)。5.在tab中打开新tabvue2虽然废除了$dispatch 和 $broadcast，但为组件间的通信提供了v-on和$emit，子组件触发$emit，在父组件中可用v-on监听到。更复杂的组件间通信，就需要使用vuex了。以上总结有错误之处请指正。最后奉上 git源码 和 Demo地址

socket.io体验-AI在线聊天
type: item
date: 2017-03-04T22:31:00+08:00
description: 我至今还清晰记得大学时问过老师：服务器如何主动向客户端推送信息,老师的回答是客户端定时请求刷新,如今有了更好的方案webSocket。本案例的功能是与机器人对话，当然通过ajax一样能实现，但这期的主角是socket.io，实现方式上与传统的ajax请求和回调完全是两种概念。案例使用了node.js+socket.io+Vue+gulp+sass...麻雀虽小，五脏俱全。由于我使用的虚拟主机不支持node，没能做在线demo，请git到本地运行。做了一个ajax版的demo，功能和界面完全一样，见底部。界面：源码地址：https://github.com/denghao123/AI-chat演示地址：demo(ajax版): http://denghao.me/demo/2017/demo_ajax.html操作步骤：npm install gulp localhost:8000 //浏览器访问

Vue模拟select多选
type: item
date: 2016-08-16T16:12:00+08:00
description: 大家都知道，给select标签加上multiple属性可实现多选，但原生的界面太丑，功能有限。我最近遇到类似的需求，于是到网上随便一搜，果然有大堆现成插件。只可惜当前项目使用vue，而网上大多是基于jq，还依赖样式库，我不想把结构搞得太复杂，只好自己写了简单的弹层来模拟multiselect。演示DEMO: http://denghao.me/demo/2016/multiselect.html .