Vue开发技巧(避免踩坑) ---- 持续更新

一、数组更新检测

在Vue中操作数组,当你使用索引设置一个项,例如 vm.items[index] = newVal,或者修改数组长度,例如vm.item.lenghts = newLenghts,因为javascript的限制,将能不能触发状态更新,但是你可以使用如下方法触发更新

// 第一个问题
Vue.set(items, indexOfItem, newVal)
// or 
items.splice(indexOfItem, 1, newVal)

// 第二个问题
item.splice(newLength)

同时,以下的数组API都会触发状态更新

push(), pop(), shift(), unshift(), splice() (上面有演示), sort(), reverse()

我曾经在一个项目中直接使用索引去操作数组,结果被坑了10分钟,谨记谨记。
还有剩下一些例如 fitler(), concat(), slice() 。这些方法不会改变原始数组,但总是返回一个新数组,所以可以用新数组替代旧数组。或许你会认为这样Vue会丢弃现有DOM并重新渲染整个列表,事实上Vue为了使DOM元素得到最大范围的重用使用了一些智能的,启发式的方法,所以用一个含有相同元素的数组去替换原来的数组非常高效。

二、for循环加key

开发中有时会碰到 Vue提示,for循环里缺少key,其实这个key加不加是不会影响程序正常运行的,但是加了之后又有什么好处呢,这里主要涉及虚拟DOM的Diff算法,看图


我们想在dom B,C之间插入dom F,如果没有key,默认的diff算法执行如下



节点不变,只更新里面的属性内容,把c换成f,d换成c,e换成d,然后创建一个e插入最后,如果有100,1000条数据,我如果在第二个位置插一个数据,想一下这个计算量是很多的。
但是有了key之后,就大不一样了,看图



每个节点都有自己唯一的key,新的节点直接根据位置插入节点,是不是很快,但是key也不是必须要的,但是如果操作大量数据频繁变化时,就要用上key啦~

三、v-show,v-if的动态监测

开发中,如果我们对v-show,if的状态判断为返回一个函数如

<h1 class="title" v-if="test()">商品评价</h1>

<script>
methods: {
  test () {
    if (this.onlyContent) {
      console.log('我被触发了')
      return true
      }  
   }
 },
created () {
  setInterval(() => {
    this.onlyContent = !this.onlyContent
    console.log(this.onlyContent)
  }, 1000)
}
</script>

如果我们在test方法中对onlyContent的状态进行了判断,那么此时的onlyContent处于被监听的状态(就像在watch里),如果onlyContent的状态发生了改变,那么test方法将会被再次执行,这样就减轻了多余的watch监听。我在created 的时候添加一个定时器,效果就是test函数每隔1s就会被触发一次。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 3,245评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 785评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 8,004评论 5 126
  • 上周在微信公开课成都专场,讲师郑国弘发布“小程序点餐”行业解决方案时,也称小程序围绕门店的点餐场景,延伸出会员、礼...
    极乐叔阅读 760评论 0 2
  • 新疆拉条子 我前2天写了一个新疆的美食,皇后锅抓饭。吃货们,喜欢吗?新疆还有一个美食,我如果在外地,会经常想吃,就...
    多彩生活1阅读 216评论 0 3