vue-遇到的问题

vue数组响应式检测不到的情况

vue中不触发vue响应式更新的4种情况

不能检测到的数组变动是：

1、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；

2、当修改数组的长度时，例如：vm.items.length = newLength；

不能检测到的对象变动是：

3、向响应式对象添加属性；

4、向响应式对象删除属性；

解决方法总结：

1、创建新的数组替换原有数组值

2、使用JavaScript的数组操作函数，这些方法都会返回一个新数组，也是数组替换原理；

支持的方法：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

不支持的方法：

filter()、 concat()、slice()

3、使用vue自带的 vue.set(object , key , value ); 向响应式对象添加属性；

4、使用vue自带的 vue.delete(object , key ); 向响应式对象删除属性；

5、对象添加属性还可以使用Object.assign({},obj1,obj2)返回获取的新对象替换原有对象；

// 代替 Object.assign(this.someObject, { a: 1, b: 2 })this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

css—opacity的继承问题

opacity属性会被子元素继承 那么如果你要背景opacity 0.5 半透明 那么这个标签上的文字也会被设置为opacity 0.5 继承了，

解决办法：1.使用rgba 兼容问题–不兼容低级浏览器ie
2. 使子元素不是子元素 用绝对定位把应该的子元素 设置到对应的位置 即 就是不要是设置是opacity属性的标签的子标签就好了。

css的层级关系

waithcap
car
img

通过position：relative 把不同层级的标签 放到同一层级 那么zindex就有用了

margin padding 负值问题

padding 不能设置负值

margin设置负值

margin top left
正 ------ 是以margin的准线向里增加距离（+）

负 ------ 是以margin的准线向外增加距离（-）
但是他是减小了其实是你所设置的div（标签）的大小 说以下一个div就会覆盖了一点上一个div
并且 不影响content内容

right bottom 就以border边向外扩

发送POST请求时params和data的区别

因为params是添加到url的请求字符串中的，用于get请求。服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。（get请求下data不能用）

而data是添加到请求体（body）中的，服务器读取http body里面的数据那就需要用POST请求了，POST请求的参数就存放在body；（但是post请求下parms可以在特定情况下使用）

1、get请求参数是带在url上的，必须使用params，这个是肯定的，但是post的请求就不一定了
2、 post请求既可以使用params，也可以使用data
区别是：data是放在body里的，在url中看不见参数，但是使用params的话，说明参数在url里面是能够看见的
可以根据不同的情况使用参数传参

Vue 中的特殊属性Key

预期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

完整地触发组件的生命周期钩子
触发过渡
例如：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时， 总是会被替换而不是被修改，因此会触发过渡。

官方文档也说得很清楚了，key就是用来辨识元素的，如果vue识别到复用的组件key是一样的，那么他就不会删除这个组件，而是继续使用它，有需要的话，只会修改一下数值，实际上是不会触发周期钩子函数的，如果需要触发钩子函数，可以给元素设置key，并且这个key是需要变换的，否者还是不会删除这个元素。

tmp模板属性 undefiend

如果在tmp模板里面写了a.b.c这样的点对象，然后data里面只是注册了a ，a.b.c是请求后返回来的结果，vue在运行中就会报错，说找不到c ， 因为b是undefiend 的 。 所以需要在tmp模板里面加一个判断，
a.b && a.b.c 先判断a.b是否为空。