當vue的data中的值發生變化后，視圖中引用部分的值是否會同時發生變化呢？首先，我們要知道有哪些更新的類型。
更新的類型
1、直接賦值更新。this.heros=[' ']，模板會立即更新。
2、通過函數更新。this.heros.push("xx)。
更新的函數：
push()：在數組最后添加元素；
pop()：刪除最后一個元素；
shift()：刪除最后一個元素；
unshift()：在開頭添加一個元素；
splice()：可以增加、修改、刪除元素。splice函數使用方法：其需要傳遞開始操作元素的索引，影響的元素個數。如是：在指定位置增加元素，其第二個參數（影響元素個數）必須為0，如果為其他的則變成了修改元素了。其核心思想為：從開始影響的索引元素開始，根據傳遞的第二個元素判斷，將會影響后面的幾個元素，然后，根據后面的items值，去影響，如果items的個數多於影響個數，則會在被影響元素后面添加剩余的元素；如果，只有起始元素索引和影響元素，則會將影響元素刪除。
vue的set()方法
在vue中，直接通過下標修改元素的值或增加新的屬性，視圖是不會自動更新的。此時，需要使用set()方法。
更新值時是第一個參數是要【更新的對象】，第二個參數是對象中【要更新的索引】，第三個參數是【更改后的值】。
增加屬性時第一個參數是具體要添加的對象（如果是數組中某一項，則要通過索引直接指明），第二個參數是要添加屬性的【屬性名】，第三個參數是【屬性值】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue觸發視圖更新</title> </head> <body> <div id="app"> 書名： <ul> <li v-for="book in books" key="book">{{book}}</li> </ul> <button @click="update_1">直接更新</button> <button @click="update_2">通過函數更新</button> <button @click="pop_1">通過函數<span style="color: red;">刪除最后一個元素</span> </button> <button @click="shift_1">通過函數<span style="color: red;">刪除第一個元素</span> </button> <button @click="unshift_1">在開頭添加一個元素</button> <button @click="splice_add">在第2個元素后增加多個元素</button> <button @click="splice_update">修改第2個元素的值</button> <button @click="splice_update_add">修改第2個值，並在其后添加元素</button> <button @clicK="splice_del">刪除第2個數</button> <button @click="update_set">set方法變更值</button> <div v-for="book in books_2"> {{book.title}}：{{book.author}} </div> <button @click="set_2">補上作者</button> </div> <script> new Vue({ el: '#app', data: { books: ['三國演義', '水滸傳', '數據結構', '操作系統'], books_2: [{ title: '水滸傳', author: '施耐庵', }, { title: '三國演義', author: '羅貫中', }, { title: '西游記', author: '吳承恩', }, { title: '紅樓夢', }, ] }, methods: { update_1() { this.books = ['三國演義', '水滸傳', '紅樓夢'] }, update_2() { this.books.push("西游記") }, pop_1() { this.books.pop() }, shift_1() { this.books.shift(); }, unshift_1() { this.books.unshift('這是四大名著') }, splice_add() { this.books.splice(2, 0, '計算機網絡基礎', '計算機組成原理') }, splice_update() { this.books.splice(1, 1, '紅樓夢') }, splice_update_add() { this.books.splice(1, 1, "紅樓夢", "史記") }, splice_del() { this.books.splice(1, 1) }, update_set() { Vue.set(this.books, 2, '西游記') }, set_2() { Vue.set(this.books_2[3], 'author', '曹雪芹', ) } } }) </script> </body> </html>