vuex

3 月，跳不动了？>>> app-plus Object 设置编译到 App 平台的特定样式，配置项参考下方 app-plus App 参考地址 https://uniapp.dcloud.io/collocation/pages app-plus配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles。 titleNView Object 导航栏 ，详见:导航栏 App、H5subNVues Object 原生子窗体，详见:原生子窗体 App 1.9.10 bounce String 页面回弹效果，设置为 "none" 时关闭效果。 App（nvue Android无页面级bounce效果，仅list、recycle-list、waterfall等滚动组件有bounce效果）softinputNavBar String auto iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。 仅ios生效softinputMode String adjustPan 软键盘弹出模式，支持 adjustResize、adjustPan 两种模式 ApppullToRefresh Object 下拉刷新 AppscrollIndicator String 滚动条显示策略，设置为 "none"

3 月，跳不动了？>>> react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。 1.数据是不是可变的 react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。 而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。 总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。 2.通过js来操作一切，还是用各自的处理方式 react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component

3 月，跳不动了？>>> 前端工程师是有极限的 我从短暂的工作当中学到一件事...... 越是熬夜加班，就越会发现人类的能力是有极限的...... 除非超越产品 我不加班了！！BOSS 拖拽生成h5页面，支持动画，模板，保存组件，第三方后台接入提交数据，欢迎体验 基于vue搭建营销h5页面 易动 已上线，欢迎体验~~ activity_generate 后台 activity_mobile 客户端 activity_server 后端 开源不易，给个start吧~ 前言 面对频繁变更的页面需求，面对客户像爱情一样的的需求（文字小一点，边距小一点），你是不是也曾经抓狂过，是不是也想说出心里的声音，我不想加班 所以对于特定的业务场景，例如活动页面，以及首页，这种经常需要修改的页面，完全可以通过搭建进行完成，目前市场上搭建前端页面可以分为两类 易企秀 此类交互偏弱，但是组件是基于基础组件的，并且调整更加灵活，可上下左右拖拽，例如按钮，图片 有赞、酷客多 基于业务组件进行搭建，此类偏固定，组件以行为单位，只可调整上下，例如搜索组件、活动组件，图片组组件 实现方式是很多种的，本文提出的是一种比较通俗易懂的实现方案，如果想深入了解，请了解大厂的相关产品实现方案 这两种实现方案是不一样的 基于基础组件形式的拖拽：使用鼠标监听的形式 基于业务组件形式的拖拽：使用拖拽库 sortable

3 月，跳不动了？>>> 本文是vue源码贡献值Chris Fritz在公共场合的一场分享，觉得分享里面有不少东西值得借鉴，虽然有些内容我在工作中也是这么做的，还是把大神的ppt在这里翻译一下，希望给朋友带来一些帮助。 一、善用watch的immediate属性 这一点我在项目中也是这么写的。例如有请求需要再也没初始化的时候就执行一次，然后监听他的变化，很多人这么写： created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } } 上面的这种写法我们可以完全如下写： watch: { searchInputValue:{ handler: 'fetchPostList', immediate: true } } 二、组件注册，值得借鉴 一般情况下，我们组件如下写： import BaseButton from './baseButton' import BaseIcon from './baseIcon' import BaseInput from './baseInput' export default { components: { BaseButton, BaseIcon, BaseInput } } <BaseInput v-model="searchText"

3 月，跳不动了？>>> 本文参考自油管上某个国外大神的公开演讲视频，学习了一下觉得很不错，所以在项目中也使用了这些不错的技巧。 1. watch 与 computed 的巧妙结合 如上图，一个简单的列表页面。 你可能会这么做： created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多，比如上图 关键字筛选， 区域筛选， 设备ID筛选， 分页数， 每页几条数据， 可能会是这样： data(){ return { keyword:'', region:'', deviceId:'', page:1 } }, methods:{ fetchData(paramrs={ keyword:this.keyword, region:this.region, deviceId:this.deviceId, page:this.page, }){ this.$http.get("/list",paramrs).then("do some thing") } }, created(){ this.fetchData() }, watch: { keyword(data){ this.keyword=data this.fetchData() }, region(data){ this.region

某厂面试归来，发现自己落伍了！>>> 在nuxt中，只编写vuex的核心内容。 编写内容 //state区域，相当于定义变量 export const state = () => ({ }) //mutations区域，用于修改数据 export const mutations = { 方法名 (state,值) { } } state区域注意实现 //state 区域，相当于定义变量 export const state = ()=> { return { } } //省略写法 export const state = () => ({ }) 实例 【掌握】 创建 ~/store/index.js ，编写如下内容 //state 区域，相当于定义变量 export const state = () => ({ pageInfo: '' }) //mutations区域，用于修改数据 export const mutations = { setData( state , value) { state.pageInfo = value } } 完成fetch操作 <template> <div> {{ this.$store.state.pageInfo }} </div> </template> <script> export default { async fetch( {