vue.set全局操作 · web前端

[TOC] # 作用 Vue.set 的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。比如在vue構造器內部定義了一個count為1的數據，我們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就需要用到Vue.set。 # 引用構造器外部數據：什么是外部數據，就是不在Vue構造器里里的data處聲明，而是在構造器外部聲明，然后在data處引用就可以了。外部數據的加入讓程序更加靈活，我們可以在外部獲取任何想要的數據形式，然后讓data引用。看一個簡單的代碼 ~~~ //在構造器外部聲明數據 var outData={ count:1, goodName:'car' }; var app=new Vue({ el:'#app', //引用外部數據 data:outData }) ~~~ # 在外部改變數據的三種方法 ## 用vue.set改變 ~~~ <body> <div id="app"> {{count}} </div> <button onclick="add()">add</button> </body> <script type="text/javascript"> function add() { //第一個是變量,第二個是變量中的值,第三個是要變成的值 Vue.set(outData, 'count', 20); } var outData = { count: 1, goodName: 'car' }; var app = new Vue({ el: '#app', data: outData, }) </script> ~~~ ## 用vue對象的方法添加 ~~~ app.count++; ~~~ ## 直接操作外部數據 ~~~ outData.count++; ~~~ 其實這三種方式都可以操作外部的數據，Vue也給我們增加了一種操作外部數據的方法 # 為什么要有Vue.set的存在? 由于Javascript的限制，Vue不能自動檢測以下變動的數組。 * 當你利用索引直接設置一個項時，vue不會為我們自動更新。 * 當你修改數組的長度時，vue不會為我們自動更新我們來看個代碼 ~~~ <div id="app"> <ul> <li v-for=" aa in arr">{{aa}}</li> </ul> </div> <button onclick="add()">外部添加</button> <script type="text/javascript"> function add(){ console.log("我已經執行了"); app.arr[1]='ddd'; //Vue.set(app.arr,1,'ddd'); } var outData={ arr:['aaa','bbb','ccc'] }; var app=new Vue({ el:'#app', data:outData }) </script> ~~~ 這個是沒用的,需要這樣 ~~~ function add() { console.log("我已經執行了"); Vue.set(app.arr, 1, 'dd'); }; ~~~ 這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,’ddd’)來設置改變，vue才會給我們自動更新，這就是Vue.set存在的意義