Vue踩坑笔记（更新ing）

1、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数组更新检测

2、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>
复制代码

这样处理能够节约性能。

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

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

一段取值范围的v-for