Vue踩坑笔记(更新ing)

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

内容简介: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


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

查看所有标签

猜你喜欢:

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

智能革命

智能革命

李彦宏 等 / 中信出版集团 / 2017-5-1 / 68.00元

人类历史上的历次技术革命,都带来了人类感知和认知能力的不断提升,从而使人类知道更多,做到更多,体验更多。以此为标准,李彦宏在本书中将人工智能定义为堪比任何一次技术革命的伟大变革,并且明确提出,在技术与人的关系上,智能革命不同于前几次技术革命,不是人去适应机器,而是机器主动来学习和适应人类,并同人类一起学习和创新这个世界。“人工智能”正式写入2017年政府工作报告,折射出未来人工智能产业在我国经济发......一起来看看 《智能革命》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器