vue踩坑记录

1. 对象和数组的更新检测

由于?JavaScript?的限制，Vue 不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

还是由于?JavaScript?的限制，Vue 不能检测对象属性的添加或删除

解决方法：?对于数组来说可以使用?vm.$set或改用可观察数组的变异方法，对于对象来说可以使用?vm.$set?或?Object.assign

e.g.?https://jsfiddle.net/hysunny/eywraw8t/228152/

2. mixins同名选项混合问题

当我们想覆盖一个组件的一些东西或想扩展某个组件时，可以用?Vue?的?mixins

不过要注意:

当组件和混合对象含有同名选项时，同名钩子函数将混合为一个数组，都会被调用；混合对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如?methods,?components?和?directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

e.g:?https://jsfiddle.net/hysunny/eywraw8t/228225/

3. v-if 与 v-for 的优先级问题

v-if?与?v-for?一起使用时，v-for 具有比 v-if 更高的优先级，因此如果想有条件的跳过循环的执行，则需将?v-if?置于外层元素（或?template）上。如：

<ul v-if="todos.length"> <li v-for="todo in todos" :key="todo.id" > {{ todo.name }} </li> </ul> <p v-else>No todos left!</p> 

4. 遍历对象顺序不一致

使用?v-for?遍历对象时，是按?Object.keys()?的结果遍历，但是不能保证它的结果在不同的?JavaScript 引擎?下是一致的。

比如： 在 ios 下当对象的key为字母时，排序为降序，其他机型为升序。

解决方法： 如果要保证顺序，可以加个排序的?filter?或者 改用数组。

参考：?https://github.com/vuejs/vue/issues/1827

5. event bus 多次触发

$on?的事件可在?created?或?mounted?注册

需在?beforeDestroy?或?destoryed?的时候使用用?$off?销毁

否则在某些情况下会被被多次触发

e.g.?https://jsfiddle.net/hysunny/eywraw8t/232163/

6. 变量命名

变量名不要以_、$开头，因为名字以?_?或?$?开始的属性不会被?Vue?实例代理，

因为它们可能与?Vue?的内置属性与?API?方法冲突。

需要用?vm.$data._property?访问它们。

e.g:?https://jsfiddle.net/hysunny/eywraw8t/224835/

7. vue 2.0 给组件绑定事件无效

对于一般的?html?元素，绑定自定义事件使用?v-on即可，但是在某个组件的?根元素?上监听一个?原生事件?，比如：

<my-component v-on:click="handleClick" /> 

我们会发现这样是不起作用的，可以使用?.native?修饰符(某些情况) 或是?$listeners

<my-component v-on:click.native="handleClick" /> 

e.g.?用.native给自定义组件绑定事件