vue中需要注意的问题

数据绑[DataBinding ]
vue中的数据是双向绑,即修改html上的值也会同时修改js对象上,js修改也会修改html

• DOM操作速度开销

  • vue不是完美的,也会使用js的document.querySelector来操作DOM,此操作效率较慢

• 减少data的层级

  • • 当访问的数据在js对象很深层级时,再访问此对象会有很高的开销*

• 避免使用$set

  • • 当修改data的时候,需要使vue能够感知到数据进行了修改,vue提供了多种方式让它感知,一般在data进行修改时,都应该用该方法来让vue感知到*
  • • vue.set(obj,index,value)

• 使用父级索引的方式访问数组

  • • 当数组的索引不是已知的情况下,才需要使用子索引访问的方式访问数组元素,否则使用父级访问的方式会比较高效*
  • • data[i] VS data[myindex][i]

• 不必要的css类名

  • • 避免使用一个css类名然后用另一个类名把前面的类名去掉*

• DOM元素的开销

  • • el和root的增加和销毁开销较大*

• DOM和js的循环

  • • 在html、js中减少使用循环语句*

• 避免使用v-if

  • • v-if会增加切换开销,只能用在初次页面加载,且此元素较少时才会比较明显*

• 避免频繁触发某些特定函数

  • • 这些函数可能会增加一些不必要的开销*
  • • 避免频繁更新页面

• 更新后会触发的钩子

  • • 同一个事件函数,在新的每次触发时,会在之前销毁之前的*
  • • 解决方法:在父组件中更新,然后给另一个子组件传参

• 避免频繁触发某些特定函数

  • • 这些函数可能会增加一些不必要的开销*
  • • 避免频繁更新页面

• 把事件处理函数作为inline声明

  • • 这样做会比使用function*
  • • 因为inline更轻量,执行速度更快

• 减少setTimeout的调用

  • • 尽量使nextTick代替set*

• 浏览器兼容

  • • 某些方式,解决方法见 caniuse 的情况,只有当需要时才会引入库*

• 使用$nextTick代替setTimeout

  • • $nextTick 只在下次循环迭代时执行回调。setTimeout 立即执行

• 修改DOM

  • • 修改DOM时的成本往往非常高，所以使用JS中的DOM操作指令会更高效。我们可以使用data-attr的方式做循环、DOM查询*

• 修改DOM

  • • 修改DOM时的成本往往非常高，所以使用JS中的DOM操作指令会更高效。我们可以使用data-attr的方式做循环、DOM查询*

• 避免JSON解析(toJSON)

  • *JSON.stringify() 和 JSON.parse() 两者都是非常慢的，但有的时候的确需要使用。使用JSON.stringify()时，要记住：
    • 不要序列化循环。这会导致栈溢出错误。
    • 避免在IE中使用自定义对象*

• 手动更改DOM

  • • 某些情况下，使用某种方法触发的事件会慢，当这种情况产生的时候，我们能手动更改DOM，这会更简单更高效。如隐藏显示表单，增加类名*

• 使用template代替render

  • • 当使用template的时候,只需要传入需要绘制的数据,在编译期进行转换*
  • • 当使用render的时候,我们有更低的级别控制渲染的结果,实现的目标会更多,包括:
    • 更改元素的outerHTML
    • 作为child的元素
    • 动态的样式*

• 使用CDN加速网络加载

  • • 当我们需要多个js/css的时候,这能减少向不同域名的请求次数*