vue 陣列方法

vue的核心時資料和檢視的雙向繫結，當我們修改陣列時，vue會檢測到資料的變化，所以用v-for渲染的檢視也會立即更新。vue包含了一組觀察陣列變異的方法，使用它們改變陣列也會觸發檢視更新：

push()
pop()
shift()
unshift()
splice()
sort()

reverse()

<div id="app">
    <ul>
        <template v-for="book in books">
            <li>書名:{{ book.name }}</li>
            <li>作者:{{ book.author }}</li>
        </template>
    </ul>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data: {
            books: [
            {
                name: 'vuejs',
                author: 'liang'
            },
            {
                name: 'javascript',
                author: 'douglas'
            },
            {
                name: 'nodejs',
                author: 'thomas'
            }
            ]
        }
    });
    app.books.push({
        name:'css',
        author: 'dsss'
    });
</script>

使用以上方法會改變被這些方法呼叫的原始陣列，有些地方不會改變原始陣列，例如：

filter()
concat()

slice()

<div id="app">
    <ul>
        <template v-for="book in books">
            <li>書名:{{ book.name }}</li>
            <li>作者:{{ book.author }}</li>
        </template>
    </ul>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data: {
            books: [
                {
                    name: 'vuejs',
                    author: 'liang'
                },
                {
                    name: 'javascript',
                    author: 'douglas'
                },
                {
                    name: 'nodejs',
                    author: 'thomas'
                }
            ]
        }
    });

    app.books = app.books.filter(function (item) {
        return item.name.match(/javascript/);
    })
</script>

vue在檢測陣列變化時，並不是直接重新渲染整個列表，而是最大化地複用DOM元素。替換的陣列中，含有相同元素的項不會被重新渲染，因此可以大膽地用新陣列來替換舊陣列，不用擔心效能問題。

透過一個陣列的副本來做過濾或排序的顯示時，可以使用計算屬性來返回過濾或排序後的陣列，並且不改變原陣列。

    <div id="app">
        <ul>
            <template v-for="book in filterBooks">
                <li>書名:{{ book.name }}</li>
                <li>作者:{{ book.author }}</li>
            </template>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                books: [
                    {
                        name: 'vuejs',
                        author: 'liang'
                    },
                    {
                        name: 'javascript',
                        author: 'douglas'
                    },
                    {
                        name: 'nodejs',
                        author: 'thomas'
                    }
                ]
            },
            computed: {
                filterBooks: function () {
                    return this.books.filter(function (book) {
                        return book.name.match(/javascript/);
                    });
                }
            }
        });
    </script>

實現排序也是類似的，新加一個計算屬性sortedBooks，按照書名的長度由長到短進行排序

    computed: {
        sortedBooks: function () {
            return this.books.sort(function (a,b) {
                return a.name.length < b.name.length;
            });
        }
    }

本作品採用《CC 協議》，轉載必須註明作者和本文連結

vue 陣列方法

相關文章