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


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

查看所有标签

猜你喜欢:

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

Android群英传

Android群英传

徐宜生 / 电子工业出版社 / 2015-9 / 69.00元

《Android群英传》对具有一定Android开发基础的读者,以通俗易懂的语言介绍了Android开发的进阶技巧。《Android群英传》共分为13章,讲解了Android体系与系统架构、Android开发工具新接触、Android控件架构与自定义控件详解、ListView使用技巧、Android Scroll分析、Android绘图机制与处理技巧、Android动画机制与使用技巧、Activi......一起来看看 《Android群英传》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具