问题归纳

本篇主要介绍模块中的常见的报错，希望列举不正确的以及不完善的大家帮忙提出。

根据内容改变调整布局：

场景：如果是流动布局，这里没有任何问题，其内容变多之后会将其他内容的空间挤下去，但是如果你是想根据内容改变去调整已经固定好的布局方式，那么就需要变化内容容器的宽度高度传递给布局容器。
基本方案是：数据变化之后，用eventBus 或者vuex将高度传递，重新布局
问题点是：内容改变后的元素的盒模型的宽高不能马上得到，如果你马上调用事件就会导致其每次传递的是上一次变动的结果。
解决方案是 ：this.$nextTck() ,完整代码方案如下：

  1. //内容组件
  2. this.areaList = res.body.data
  3. let height = this.$refs.container.offsetHeight
  4. this.$nextTick(() => {
  5.        this.$root.bus.$emit('heightChange',height)
  6. }) 
  7. //布局组件中监听 topHeight为布局容器中留给内容容器的高度
  8. let that = this
  9. this.$root.bus.$on('heightChange', function(height) {
  10.       that.topHeight = top
  11.     })

计算属性&&普通方法

场景：在基本的功能支持上，方法以及计算属性都可以支持根据某些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，我们一般是遍历数组的，但是也可以支持遍历字符串，对象以及数字。比如：

  1. // 遍历显示每个字符
  2. <li v-for="c in 'aaa'"></li>
  3. // 遍历显示对象,如果有三个，则分别显示值，key以及index
  4. let o = {name:1}
  5. <li v-for="c in o "></li>
  6. <li v-for="(value,key,index) in o "></li>
  7. // 简单的重复输出n次，为1-n的递增显示
  8. <li v-for="c in 3 "></li>

mutation-types

方法枚举类型，官网说明，其实定义申明如此多的变量常量是为了多人协作，那么究竟如何理解这句话。
1 有这个文件可以让合作者清晰直接的看到app中有多少定义常量文件，便于统一查看和管理。
2 共享一些常量名称，便于去重和重新定义。

前端测试

待完善…
参考文档：基本测试

快速初始化一个vue文件模板

vscode看网上

  1. <template>
  2. </template>
  3. <script>
  4.   export default {
  5.   }
  6. </script>
  7. <style >
  8. </style>

v-for 遍历对象属性

经常使用是遍历对象的语法，v-for=’(item,index) in arr’, 而遍历对象时，其是不同的，第二个为键值。v-for=’(item,key,index) in obj’.作为常识必须清楚。

computed 监听内容与缓存

一般我们认为computed会监听计算属性所用到的所有的变量，其实不然，其增加监听的仅仅是绑定在data中的变量，对于其他变量并不做监听以及动态改变其计算值。

计算属性的优点之一就是可以利用缓存， 当值不发生变化的时候，不会重新触发计算和渲染。

比如你设计计算属性，根据当前日期的返回值，期望是每次返回最新的日期，但其实不是，并没有得到最新的值，原因是因为其将上次的值进行了缓存，并不对data以外的变量增加监听。

如果你想解决这个问题，控制计算属性的缓存为false就可以了。另外如果你对计算属性没有特别的要求，其实用method也是可以的。

小结：清楚计算属性的两大优点：1 监听data的变化，动态改变结果 ； 2 缓存上次的结果，数据不改变，不重新计算。

computerd 不会执行或失去监听

也许你可能遇到过计算属性在某些时候没有执行对应的计算逻辑，那么不要着急，这可能是因为vue对代码执行的一些优化，当其发现计算属性不在dom中有任何引用时，或者引用的dom节点被移除时，就不会实时计算执行了。