Vue踩坑笔记(更新ing)

栏目: JavaScript · 发布时间: 5年前

内容简介:1.一个方法是使用例如2.可以使用数组的部分方法可以使视图自动进行更新,就不需要使用

我们知道,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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

学习JavaScript数据结构与算法

学习JavaScript数据结构与算法

[巴西] 格罗纳(Loiane Groner) / 孙晓博、邓钢、吴双、陈迪、袁源 / 人民邮电出版社 / 2015-10-1 / 39.00

本书首先介绍了JavaScript语言的基础知识,接下来讨论了数组、栈、队列、链表、集合、字典、散列表、树、图等数据结构,之后探讨了各种排序和搜索算法,包括冒泡排序、选择排序、插入排序、归并排序、快速排序、顺序搜索、二分搜索,还介绍了动态规划和贪心算法等常用的高级算法及相关知识。一起来看看 《学习JavaScript数据结构与算法》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具