小知識點 -- 計劃內屬性 · Vue&&TypeSprict--基礎總結

[TOC] >[success] ## 對象重新渲染 * 圖解計劃內屬性 ~~~ 1.當vue被render 函數最后渲染后，會將data中的數據通過getter放到， watch中，當改變數據時候會通過setter重新渲染，因此計劃內的數據指的就是通過getter放到watch中的數據，wachter會觸發接下來的vue的渲染，因此就會有計劃屬性說法 ~~~ ![](https://box.kancloud.cn/7fb4e61f1ac46a9d8fc5a26d462c27f0_890x521.png) ~~~ 1.首先vue 中只有計劃好的數據，才能做相應渲染，什么樣算是計劃好的就是在 vue實例對象data中已經聲明的舉個例子: var vm = new Vue({ el: '#app', data: { msg:{} }, }); 根據上面的例子其中msg 是已經在計劃內聲明好的，但msg.title = '不在計劃內的'，msg中的title就屬于不在計劃內，這樣的數據不會被渲染，為了可以更好的理解下面的案例將說明 ~~~ >[danger] ##### 不在在計劃內的數據 ~~~ 1.剛才已經對不在計劃內的數據做了解釋，現在可以更進一步通過代碼來講解 2.下面案例中msg是計劃內數據，但是msg.title不是計劃內的，即使我們通過點擊事件，給這個不在計劃內的數據重新賦值，頁面也不會重新渲染 ~~~ ![](https://img.kancloud.cn/2d/26/2d2665c2e337b0580efc3bd184709665_589x316.png) ~~~ html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: {}, }, methods: { onChange() { this.msg.title = '我不在計劃內' console.log(this.msg) }, }, }) </script> </body> </html> ~~~ >[danger] ##### 在計劃中定義的數據 ~~~ 1.那上面的案例進行改造，msg.titl在計劃內會發生什么變化 2.當我們點擊p標簽后發現數據在頁面被重新渲染了 ~~~ ![](https://img.kancloud.cn/2b/b8/2bb8aedd2ce13c81f504cd56f7cd4e8f_653x379.png) ~~~html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: { title: '' }, }, methods: { onChange() { this.msg.title = '我在計劃內' console.log(this.msg) }, }, }) </script> </body> </html> ~~~ >[warning] ### 怎么保證不在計劃內的值也被重新渲染 ~~~ 1.調用Vue的靜態方法：set 2.調用實例上的方法：$set 3.給計劃內的對象重新賦值：vm.object = {key:'新的'} 4.添加指定屬性重新構建賦值：Object.assign() ~~~ >[danger] ##### 第一種解決方法 -- set/$set ~~~ 1.Vue.set( target, key, value ),其中'target' 是 'Object | Array'對象或者是數組，'key'是'string | number'字符串或者是數字,'value'是可以任意類型 2.vm.$set( target, key, value )，$set和set用法參數是一樣，但要注意set是靜態(類) 方法$set是實例方法，案例會有詳細解說。 ~~~ * set ~~~ html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: {}, }, methods: { onChange() { Vue.set(this.msg, 'title', '我不在計劃內但我也能使用') }, }, }) </script> </body> </html> ~~~ * $set ($set 是實例方法因此也是this在內部直接調用) ~~~ html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: {}, }, methods: { onChange() { // 我是實例方法 this.$set(this.msg, 'title', '我不在計劃內但我也能使用') }, }, }) </script> </body> </html> ~~~ >[danger] ##### 給計劃內的對象重新賦值 ~~~ 1.第三個方法和第四個方法都是給對象重新賦值達到的效果，兩者使用形式上不同 ~~~ * vm.object = {key:'新的'} ~~~html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: {}, }, methods: { onChange() { this.msg = { 'title': '我簡單粗暴把你這個msg這個計劃對象直接換了' } }, }, }) </script> </body> </html> ~~~ * Object.assign({},this.object,{key,value}) ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script> </head> <body> <div id="app"> <p @click='onChange'>1{{msg.title}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { msg: {}, }, methods: { onChange() { this.msg = Object.assign({}, { title: '我用Object自帶的方法也可以' }) }, }, }) </script> </body> </html> ~~~ >[info] ## 數組重新渲染 ~~~ 1.首先vue提供一套變異方法，會改變被這些方法調用的原始數組，使用這些方法時候就不用去考慮數組會不會被渲染的問題 'push()' 'pop()' 'shift()' 'unshift()' 'splice()' 'sort()' 'reverse()' 2.但使用這些方法的時候就需要用新老數組替換的方式: filter(), concat() 和 slice() ,map()。文檔中對這種新老數組替換'是否會影響性能的解釋'：你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。 3.依舊支持set/$set 4.splice是個好方法會常用 ~~~ >[danger] ##### set/$set ~~~ 1.下面兩個案例都為了解決vm.items[indexOfItem] = newValue不能被渲染的問題 ~~~ * set ~~~ 1.下面的案例會把我是重新渲染成替換 2.使用方法set 是Vue靜態方法，通過Vue調用 3.使用Vue.set( array, indexOfItem, newValue) ~~~ ![](https://box.kancloud.cn/f051c3587ae1a8fb7173070f00a0762e_260x168.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"> <p v-for="i in msg">{{i}}</p> <input v-model="pushArray"> <button @click="changeMsg">提交</button> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { pushArray:'', msg:['我是', '測試', '數據'], }, methods:{ changeMsg(){ Vue.set(this.msg, 0, this.pushArray); } } }); </script> </body> </html> ~~~ * $set ~~~ 1.下面的案例會把我是重新渲染成替換 2.使用方法$set 是實例方法用this調用即可 3.使用this.$set( array, indexOfItem, newValue) ~~~ ~~~ <!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 in msg">{{i}}</p> <input v-model="pushArray"> <button @click="changeMsg">提交</button> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { pushArray:'', msg:['我是', '測試', '數據'], }, methods:{ changeMsg(){ this.$set(this.msg, 0, this.pushArray); } } }); </script> </body> </html> ~~~ >[danger] ##### splice 是一個好方法 ~~~ 1.vm.items.splice(indexOfItem, 1, newValue)，也能解決上述問題 ~~~ >[info] ## v-for 為什么要配合v-bind:key ~~~ 1.key:跟蹤每個節點的身份，從而重用和重新排序現有元素 2.下面案例。如果沒有使用key 就會造成checkbox 添加數據的時候勾選混亂，應該遵循官方建議v-for 循環加上key ~~~ ~~~ <!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"> <div> <label>Id: <input type="text" v-model="id"> </label> <label>Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div>    <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '李斯' }, { id: 2, name: '嬴政' }, { id: 3, name: '趙高' }, { id: 4, name: '韓非' }, { id: 5, name: '荀子' } ] }, methods: { add() { // 添加方法 this.list.unshift({ id: this.id, name: this.name }) } } }); </script> </body> </html> ~~~