VUE 数组更新详解-js教程-PHP中文网

首页

web前端

js教程

VUE 数组更新详解

小云云

Dec 19, 2017 am 09:03 AM

数组更新详解

关于vue数组更新，本文主要介绍了VUE 数组更新问题，文中给大家介绍了vue如何监听数据的变化的 ,需要的朋友可以参考下，希望能帮助到大家。

1、数据方法分类：

（1）原数组改变

push
pop
unshift
shift
reverse
sort
splice

（2）原数组未变，生成新数组

slice
concat
filter

对于使原数组变化的方法，可以直接更新视图。

对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。

示例代码：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in books">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java&#39;,
              author: &#39;c&#39;
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: &#39;c++&#39;,author: &#39;d&#39;});
      //需要更新原数组
      app.books = app.books.concat([{name: &#39;c++&#39;,author: &#39;d&#39;}]);
    </script>
  </body>
</html>

注意：以下不会触发视图的更新。

（1）通过索引直接设置项。

（2）修改数组长度，app.books.length=1。

若不想改变原数组，可以使用计算属性来过滤数组，如：

 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in filterBooks">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级111&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java33333&#39;,
              author: &#39;c&#39;
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return this.books.sort(function(a,b){
              return a.name.length>b.name.length?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

那么vue如何监听数据的变化呢？

1）如何追踪变化

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

2）变化检测问题

受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如：

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, &#39;b&#39;, 2)

还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名，

以上是VUE 数组更新详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C++中的众数函数详解Nov 18, 2023 pm 03:08 PM

C++中的众数函数详解在统计学中，众数指的是一组数据中出现次数最多的数值。在C++语言中，我们可以通过编写一个众数函数来找到任意一组数据中的众数。众数函数的实现可以采用多种不同的方法，下面将详细介绍其中两种常用的方法。第一种方法是使用哈希表来统计每个数字出现的次数。首先，我们需要定义一个哈希表，将每个数字作为键，出现次数作为值。然后，对于给定的数据集，我们遍

C++中的取余函数详解Nov 18, 2023 pm 02:41 PM

C++中的取余函数详解在C++中，取余运算符（%）用于计算两个数相除的余数。它是一种二元运算符，其操作数可以是任何整数类型（包括char、short、int、long等），也可以是浮点数类型（如float、double）。取余运算符返回的结果与被除数的符号相同。例如，对于整数的取余运算，我们可以使用以下代码来实现：inta=10;intb=3;

Vue.nextTick函数用法详解及在异步更新中的应用Jul 26, 2023 am 08:57 AM

Vue.nextTick函数用法详解及在异步更新中的应用在Vue开发中，经常会遇到需要进行异步更新数据的情况，比如在修改DOM后需要立即更新数据或者在数据更新后需要立即进行相关操作。而Vue提供的.nextTick函数就是为了解决这类问题而出现的。本文就会详细介绍Vue.nextTick函数的用法，并结合代码示例来说明它在异步更新中的应用。一、Vue.nex

php-fpm调优方法详解Jul 08, 2023 pm 04:31 PM

PHP-FPM是一种常用的PHP进程管理器，用于提供更好的PHP性能和稳定性。然而，在高负载环境下，PHP-FPM的默认配置可能无法满足需求，因此我们需要对其进行调优。本文将详细介绍PHP-FPM的调优方法，并给出一些代码示例。一、增加进程数默认情况下，PHP-FPM只启动少量的进程来处理请求。在高负载环境下，我们可以通过增加进程数来提高PHP-FPM的并发

Django框架中的缓存机制详解Jun 18, 2023 pm 01:14 PM

在Web应用程序中，缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架，自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解，包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

PHP function_exists()函数用法详解Jun 27, 2023 am 10:32 AM

在PHP开发中，有时我们需要判断某个函数是否可用，这时我们便可以使用function_exists()函数。本文将详细介绍function_exists()函数的用法。一、什么是function_exists()函数？function_exists()函数是PHP自带的一个内置函数，用于判断某个函数是否被定义。该函数返回一个布尔值，如果函数存在返回True，

PHP strpos()函数用法详解Jun 27, 2023 am 10:43 AM

PHPstrpos()函数用法详解在PHP编程中，字符串处理是非常重要的一部分。PHP通过提供一些内置函数来实现字符串处理。其中，strpos()函数就是PHP中最常用的一个字符串函数之一。该函数的目的是在一个指定的字符串中搜索另一个指定字符串的位置，如果包含则返回这个位置，否则返回false。本文将通过详细分析PHPstrpos()函数的用法，助你更好

Python中的GUI库wxPython详解Jun 09, 2023 pm 10:00 PM

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域，如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库，但他们的功能较为简单，无法满足各类复杂应用的需求。因此，Python中有许多GUI库可供选择，其中wxPython是其中一个，本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库，它基

See all articles