Vue踩坑笔记（更新ing）

一、Vue中修改引用数据类型不触发页面更新的解决方式

我们知道，Vue组件中，有时直接操作引用数据类型，视图有时并不会更新。

1.一个方法是使用$set

例如

this.$set(this.obj,"key","value")
this.$set(this.arr,index,"value")
复制代码

2.可以使用数组的部分方法可以使视图自动进行更新，就不需要使用$set了。

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
复制代码

3.可以把需要改变的引用数据类型保存在另外一个变量中，对这个变量进行操作之后再用这个这个变量替换原有的引用数据类型

不会大规模渲染整个列表

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

Vue数组更新检测

二、v-for和v-if

<div v-for="item in items" :key="item.id" v-if="item.id==009"></div>
复制代码

在Vue中v-for的优先级高于v-if，每一次的v-if判断之前都会先v-for循环。

所以如果如果v-if的判断条件和item无关的话，这样写：

<div v-for="item in items" :key="item.id" v-if="status==true"></div>
复制代码

并不好。 我们应当将v-if放到节点的父级来进行判断处理。

<div v-if="status==true">
    <div v-for="item in items" :key="item.id"></div>
</div>
复制代码

这样处理可以节约性能。

三、v-for的几种不常见的用法

    // 数据    
      data() {
          return{
           obj: {
              ob: "OB",
              koro1: "Koro1"
            },
            model: {
              ob: "默认ob",
              koro1: "默认koro1"
            }   
          }
      },
    // html模板
    // 一、input就跟数据绑定在一起了，那两个默认数据也会在input中显示
    <div v-for="(value,key) in obj">
       <input type="text" v-model="model[key]">
    </div>
    //二、没有数据的情况下渲染多个类似节点
    <div v-for="n in 5">
        <span>这里会被渲染5次，渲染模板{{n}}</span>
     </div>
复制代码

一段取值范围的v-for

转载于:https://juejin.im/post/5cb9d1f45188253fdd64209a