[TOC] ## 问题归纳 本篇主要介绍模块中的常见的报错，希望列举不正确的以及不完善的大家帮忙提出。 ### 根据内容改变调整布局： 场景：如果是流动布局，这里没有任何问题，其内容变多之后会将其他内容的空间挤下去，但是如果你是想根据内容改变去调整已经固定好的布局方式，那么就需要变化内容容器的宽度高度传递给布局容器。 基本方案是：数据变化之后，用eventBus 或者vuex将高度传递，重新布局 问题点是：内容改变后的元素的盒模型的宽高不能马上得到，如果你马上调用事件就会导致其每次传递的是上一次变动的结果。 解决方案是 ：this.$nextTck() ,完整代码方案如下： ~~~ //内容组件 this.areaList = res.body.data let height = this.$refs.container.offsetHeight this.$nextTick(() => { this.$root.bus.$emit('heightChange',height) }) //布局组件中监听 topHeight为布局容器中留给内容容器的高度 let that = this this.$root.bus.$on('heightChange', function(height) { that.topHeight = top }) ~~~ ### 计算属性&&普通方法 场景：在基本的功能支持上，方法以及计算属性都可以支持根据某些data值来得到其他的值，那么其对比和区别是什么呢？ 说明：计算属性很大的特性就是依赖缓存，不会每次都渲染，针对有遍历大量数组和大量计算的时候，应当使用计算属性 ### 绑定class的几种方式 场景：经常会根据需要决定是否需要绑定某个class,有以下几种方式可供选择使用 | 类型 | 说明 | | --- | --- | | 对象语法| 针对需要设置的class设置对象返回值，需要使用，则定位为true，否则为false ,比如`:class="{'isActive':true}"` ，对于复杂的class判断，可以定义计算属性或者方法，返回class对象的配置项| | 数组语法 | 可以给class绑定一个数组，然后在数组内的每个变量设置具体的样式变量的值，比如：`：class="[activeClassA]",activeClassA:'a'`| | 字符串语法 | 原理是vue语法内支持基本的js运算， 使用返回字符串的格式，比如：`：class="active?'active':'disactive'"` | | 内联样式 | 将可以使用的内敛样式直接定义为样式对象，进行修饰，比如：` ：style="styles" styles:{color:red}`| ### v-if 与 v-show 相信大多数人都用过这两者，却没有深度对比过两者的区别。v-if的效果是是否重新渲染，而v-show只是控制其css的样式。 所以个人有以下的几个建议： - 频繁修改的建议用v-show，而载入页面就决定了并且低频或者不修改的用v-if - 代码中针对敏感数据内容或者权限做严格控制的，用v-if，如果只是产品交互或者设计排版的需要用v-show ### 你不知道的v-for 对于v-for，我们一般是遍历数组的，但是也可以支持遍历字符串，对象以及数字。比如： ~~~ // 遍历显示每个字符 <li v-for="c in 'aaa'"></li> // 遍历显示对象,如果有三个，则分别显示值，key以及index let o = {name:1} <li v-for="c in o "></li> <li v-for="(value,key,index) in o "></li> // 简单的重复输出n次，为1-n的递增显示 <li v-for="c in 3 "></li> ~~~ ### mutation-types 方法枚举类型，官网说明，其实定义申明如此多的变量常量是为了多人协作，那么究竟如何理解这句话。 1 有这个文件可以让合作者清晰直接的看到app中有多少定义常量文件，便于统一查看和管理。 2 共享一些常量名称，便于去重和重新定义。 ### 前端测试 待完善... 参考文档：[基本测试](https://vuex.vuejs.org/zh/guide/testing.html) ### 快速初始化一个vue文件模板 当你用的是vue并且软件是vscoode需要快速初始化的时候 ，打 < 选择提示的第一个 就可以了，可以得到下面的结果  ``` <template> </template> <script> export default { } </script> <style > </style> ``` ### v-for 遍历对象属性 经常使用是遍历对象的语法，v-for='(item,index) in arr',而遍历对象时，其是不同的，第二个为键值。v-for='(item,key,index) in obj'.作为常识必须清楚。 ### computed 监听内容 一般我们认为computed会监听计算属性所用到的所有的变量，其实不然，其增加监听的仅仅是绑定在data中的变量，对于其他变量并不做监听以及动态改变其计算值。 另外需要注意的是，利用计算属性的优点之一就是可以利用缓存， 当值不发生变化的时候，不会重新触发计算和渲染。