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
不过要注意:
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给自定义组件绑定事件