对于初学者来说，很容易犯一些类似的错误。这些错误虽然在 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 案例。
评论 (0)