1.Templatev-show，v-if应该用哪一个？第一个维度是权限问题。只要涉及到权限相关的显示，就必须使用v-if。第二个维度是根据用户点击频率选择的，没有权限限制。频繁切换和不频繁切换使用v-show。使用v-if，这里的优化点是减少页面的dom总数。我更喜欢使用v-if，因为它减少了dom的数量并加快了第一个屏幕的渲染。至于性能，我感觉切换的渲染肉眼是看不出来的。该过程不会影响用户体验。不要在模板中写太多的表达式和判断v-if="isShow&&isAdmin&&(a||b)"，这种表达式虽然可以识别，但不是长久之计。看着不舒服的时候，适当的写方法，计算封装成一个方法。这样做的好处是方便我们在多个地方对同一个表达式进行判断，其他具有相同权限的元素在判断和展示的时候可以调用同一个方法。在循环中调用子组件时添加一个键。key可以唯一标识一个loop个体。例如，item.id可以用作键。如果数组数据是这样的['a','b','c','a']，使用:key="item"显然没有意义，更好的办法是在arr中循环(item,index)，然后:key="index"以确保密钥的唯一性。状态更新时，将新状态值与旧状态值进行比较，快速定位差异。2.风格1。应该添加到各个模块的样式中。目的是怕其他开发者和文件的风格冲突，造成风格混乱。2、尽量少用浮动和定位，用flex解决问题。3、scriptmethods中的每个方法一定要简单，只做一件事，尽量封装一个可复用的短方法，参数不要太多。如果严重依赖lodash开发，方法看起来会简单很多，但代价是整体的bundle体积会更大。如果项目只用到少量方法，可以部分导入loadsh。如果不想使用lodash，可以自己打包一个util.js文件watch和computed。具体用哪一个的问题看官网的例子。计算属性主要是做一层过滤转换。不要在其中添加一些调用方法。watch的作用是监听数据变化，改变数据或者触发事件，比如this.$store.dispatch('update',{...})3.减少watch数据。当一个组件的某个数据在相应的状态改变后需要改变时，就需要改变另一个组件的状态。可以使用watch监听相应的数据变化，绑定事件。当watch数据比较少的时候，性能消耗并不明显。当数据变大时，系统会卡顿，所以减少watch数据。其他不同组件状态的双向绑定可以使用事件中心总线或者vuex进行数据变更操作。4.组件优化在项目开发过程中，如果所有组件的布局都写在一个组件中，当数据发生变化时，由于组件代码量大，Vue的数据驱动视图的更新会比较慢，导致太渲染缓慢。也会造成比较差的体验效果。所以要细分组件，比如一个组件，可以把整个组件细分为轮播组件、列表组件、分页组件等。5.组件的异步加载（按需加载组件）在一般的demo中，这个需求可能不会遇见了。当页面很多，组件很多的时候，SPA页面在第一次加载的时候会变得很慢。这是因为第一次加载vue时，一开始可能看不到的组件也被一次性加载了。这时候需要优化页面，需要异步组件。6.打包优化解决方法很简单。打包vendor时，不要打包vue、vuex、vue-router、axios等，使用国内的bootcdn直接导入到根目录的index.html中。例如：webpack中有externals，不需要打包的库externals可以忽略：{'vue':'Vue','vue-router':'VueRouter','vuex':'Vuex','axios':'axios'}微信公众号：我的web前端自助之路回复并加入群里，跟大佬交流技术吧
