Vue -- $方法 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # Vue -- $方法 ~~~ 1.Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數據屬性區分 2.實例方法指的是創建Vue實例，例如 let vm = New Vue({}) 這里面vm就是實例，在內部就可以this 調用這些$方法，在外部也可以vm調用這些$方法 3.當然也可以Vue直接調用，但這樣調用就不能加$ ~~~ >[danger] ##### 更改渲染 $set ~~~ 1.vm.$set( target, key, value ),其中'target' 是 'Object | Array'對象或者是數組，'key'是'string | number'字符串或者是數字,'value'是可以任意類型 2.在v-for章節有詳細講解 ~~~ >[danger] ##### 更改渲染 $delete ~~~ 1.用法： vm.$delete( target, key ) ，參數講解{Object | Array} target 、{string | number} key，target接受數組或者對象，key 接受字符串或者數字 2.對象使用$delete 是刪除整個key和key對應的valeu信息，在'章節案例中有講解' 3.下面案例是針對數組刪除的重新渲染的兩種方法 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="i,index in list" @click="delHandel(index)">{{i}}</p> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: ['as', 'bs', 'cs'], }, methods: { delHandel(index){ //this.list.splice(index,1); this.$delete(this.list,index); } }, }); </script> </body> </html> ~~~ >[danger] ##### 更改渲染 $refs ~~~ 1.因為 ref 是對象的形式儲存，如果值相同后面的會把前面的覆蓋 2.用v-for 循環出來綁定同一個ref 會以數組的形式呈現。 3.渲染Dom是異步的，如果在生命周期mounted中獲取ref的，當頁面沒有變化時候是好用，但是如果后續通過'v-for' 等形式增加了dom，是獲取不到的。因為mounted只加載一次，且$ref 是異步，也就導致不能同步獲得 4.如何獲取異步$refs有個兩方法，一個是updated的生命周期中獲取，另一種在 mounted生命周期中使用$nextTick ~~~ ![](https://box.kancloud.cn/1e9818e3391245e93e75423adc2424fa_354x393.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="dom">增加dom</button> <p v-for="i,index in list" ref="plist">{{i}}</p> <p ref="pHtml">我好</p> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: ['as', 'bs', 'cs'], }, methods:{ dom(){ this.list.push('ds'); }, }, mounted(){ // 沒有使用$nextTick 同步進行dom console.log(this.$refs); this.$nextTick(()=>{ // 使用$nextTick 異步進行dom console.log(this.$refs); }); }, updated(){ // 異步進行dom console.log(this.$refs); }, }); </script> </body> </html> ~~~ >[danger] ##### 更改渲染 $nextTick ~~~ 1.將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。 2.具體案例看上面$refs 案例 ~~~