常见的Vue.js问题

对于初学者来说,很容易犯一些类似的错误。这些错误虽然在Vue.js指南中都有提到过,但很容易被忽略。Vue.js有哪些最容易掉进的“坑”呢?这篇文章中汇总了它们,希望它能为您节省一些时间!

一、为什么不更新DOM?

大多数情况下,当您更改Vue实例的数据时,视图会更新。但是有两个特殊情况:

当您添加观察数据时不存在的新属性时。由于ES5的限制,并确保跨浏览器的一致行为,Vue.js无法检测属性添加/删除。最佳做法是始终声明需要事先做出响应式的属性。在运行时不得已添加或删除属性的情况下,请使用全局Vue.set或Vue.delete方法。

当您通过直接设置索引(例如arr[0] = val)或修改其length属性来修改数组时。同样,Vue.js也无法获取这些更改。我们一定要使用Array的实例方法(push/pop/shif/unshift/splice/sort/reverse)修改数组,或者完全替换它。Vue提供了一种简便的方法arr.$set(index, value),它仅仅是arr.splice(index, 1, value)的语法糖。

深入阅读:

二、DOM何时更新?

Vue.js使用异步队列来批量更新DOM。这意味着当您修改某些数据时,DOM更新不会立即发生:它们在队列刷新时被异步应用。那么如何知道DOM何时更新?Vue.nextTick修改数据后立即使用。一旦队列被刷新,你传递给它的回调函数将被调用。

进一步阅读:异步更新队列

三、为什么组件的data需要返回一个函数?

在Vue实例中,我们data直接声明为普通对象。这是因为我们只用new Vue()来创建一个实例。但是,在定义组件时,data必须将其声明为返回初始数据对象的函数。为什么?因为使用组件会创建很多实例。如果我们仍然使用普通对象data,那么创建的所有实例将通过引用来共享同一对象!如果提供一个data函数,每次创建新实例时,我们都可以简单地调用它来返回初始数据的全新副本。

进一步阅读组件选项注意事项

四、HTML不区分大小写

Vue.js依赖符合规范的解析器来处理其模板,所有能解析成HTML标记的模板都是有效的。但是,如标准中所述,当匹配标签和属性名称时,HTML是区分大小写的。这意味着像:myProp=”123″这样的驼峰命名有属性将在模板中匹配为:myprop=”123″。总而言之,我们应该在JavaScript中使用camelCase,在模板中使用kebab-case。例如,在子组件中定义的myProp属性在模板应该作为:my-prop绑定。

进一步阅读:camelCase与kebab案例

发表评论