當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue 过滤器、计算属性、侦听器图解版一目了然

發(fā)布時間：2023/12/8 vue 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue 过滤器、计算属性、侦听器图解版一目了然小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

- 本篇學(xué)習(xí)目標(biāo)
- 1. vue基礎(chǔ)
- - 1.0_vue基礎(chǔ) v-for更新監(jiān)測
  - 1.1_vue基礎(chǔ)_v-for就地更新
  - 1.2_vue基礎(chǔ)_虛擬dom
  - 1.3_vue基礎(chǔ)_diff算法
  - - 情況1: 根元素變了, 刪除重建
    - 情況2: 根元素沒變, 屬性改變, ==元素復(fù)用==, 更新屬性
  - 1.4_vue基礎(chǔ)_diff算法-key
  - - 情況3: 根元素沒變, 子元素沒變, 元素內(nèi)容改變
    - - 無key - 就地更新
      - 有key - 值為索引
      - 有key - 值為id
  - 1.5_階段小結(jié)
  - 1.6_vue基礎(chǔ) 動態(tài)class
  - 1.7_vue基礎(chǔ)-動態(tài)style
- 2. vue過濾器
- - 2.0_vue過濾器-定義使用
  - 2.1_vue過濾器-傳參和多過濾器
  - 2.2_案例-品牌管理(時間格式化)
- 3. vue計(jì)算屬性
- - 3.0_vue計(jì)算屬性-computed
  - 3.1_vue計(jì)算屬性-緩存
  - 3.2_案例-品牌管理(總價和均價)
  - 3.3_vue計(jì)算屬性-完整寫法
  - 3.4_案例-小選影響全選
  - 3.5_案例-全選影響小選
  - 3.6_案例-反選
- 4. vue偵聽器
- - 4.0_vue偵聽器-watch
  - 4.1_vue偵聽器-深度偵聽和立即執(zhí)行
  - 4.2_案例-品牌管理(數(shù)據(jù)緩存)
- 今日總結(jié)
- 面試題
- - 1. Vue 中怎么自定義過濾器
  - 2. Vue中:key作用, 為什么不能用索引
  - 3. 數(shù)組更新有的時候v-for不渲染
- 寫在最后

本篇學(xué)習(xí)目標(biāo)

能夠了解key作用, 虛擬DOM, diff算法

能夠掌握設(shè)置動態(tài)樣式

能夠掌握過濾器, 計(jì)算屬性, 偵聽器

能夠完成品牌管理案例

1. vue基礎(chǔ)

1.0_vue基礎(chǔ) v-for更新監(jiān)測

目標(biāo): 當(dāng)v-for遍歷的目標(biāo)結(jié)構(gòu)改變, Vue觸發(fā)v-for的更新

情況1: 數(shù)組翻轉(zhuǎn)

情況2: 數(shù)組截取

情況3: 更新值

口訣:

數(shù)組變更方法, 就會導(dǎo)致v-for更新, 頁面更新

數(shù)組非變更方法, 返回新數(shù)組, 就不會導(dǎo)致v-for更新, 可采用覆蓋數(shù)組或this.$set()

<template><div><ul><li v-for="(val, index) in arr" :key="index">{{ val }}</li></ul><button @click="revBtn">數(shù)組翻轉(zhuǎn)</button><button @click="sliceBtn">截取前3個</button><button @click="updateBtn">更新第一個元素值</button></div> </template><script> export default {data(){return {arr: [5, 3, 9, 2, 1]}},methods: {revBtn(){// 1. 數(shù)組翻轉(zhuǎn)可以讓v-for更新this.arr.reverse()},sliceBtn(){// 2. 數(shù)組slice方法不會造成v-for更新// slice不會改變原始數(shù)組// this.arr.slice(0, 3)// 解決v-for更新 - 覆蓋原始數(shù)組let newArr = this.arr.slice(0, 3)this.arr = newArr},updateBtn(){// 3. 更新某個值的時候, v-for是監(jiān)測不到的// this.arr[0] = 1000;// 解決-this.$set()// 參數(shù)1: 更新目標(biāo)結(jié)構(gòu)// 參數(shù)2: 更新位置// 參數(shù)3: 更新值this.$set(this.arr, 0, 1000)}} } </script><style></style>

這些方法會觸發(fā)數(shù)組改變, v-for會監(jiān)測到并更新頁面

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

這些方法不會觸發(fā)v-for更新

slice()
filter()
concat()

注意: vue不能監(jiān)測到數(shù)組里賦值的動作而更新, 如果需要請使用Vue.set() 或者this.$set(), 或者覆蓋整個數(shù)組

總結(jié): 改變原數(shù)組的方法才能讓v-for更新

1.1_vue基礎(chǔ)_v-for就地更新

v-for 的默認(rèn)行為會嘗試原地修改元素而不是移動它們。

詳解v-for就地更新流程(可以看ppt動畫)

這種虛擬DOM對比方式, 可以提高性能 - 但是還不夠高

1.2_vue基礎(chǔ)_虛擬dom

目標(biāo): 了解虛擬DOM的概念

.vue文件中的template里寫的標(biāo)簽, 都是模板, 都要被vue處理成虛擬DOM對象, 才會渲染顯示到真實(shí)DOM頁面上

內(nèi)存中生成一樣的虛擬DOM結(jié)構(gòu)(本質(zhì)是個JS對象)

因?yàn)檎鎸?shí)的DOM屬性好幾百個, 沒辦法快速的知道哪個屬性改變了

比如template里標(biāo)簽結(jié)構(gòu)

對應(yīng)的虛擬DOM結(jié)構(gòu)

const dom = {type: 'div',attributes: [{id: 'box'}],children: {type: 'p',attributes: [{class: 'my_p'}],text: '123'} }

以后vue數(shù)據(jù)更新

生成新的虛擬DOM結(jié)構(gòu)
和舊的虛擬DOM結(jié)構(gòu)對比
利用diff算法, 找不不同, 只更新變化的部分(重繪/回流)到頁面 - 也叫打補(bǔ)丁

好處1: 提高了更新DOM的性能(不用把頁面全刪除重新渲染)

好處2: 虛擬DOM只包含必要的屬性(沒有真實(shí)DOM上百個屬性)

總結(jié): 虛擬DOM保存在內(nèi)存中, 只記錄dom關(guān)鍵信息, 配合diff算法提高DOM更新的性能

在內(nèi)存中比較差異, 然后給真實(shí)DOM打補(bǔ)丁更新上

1.3_vue基礎(chǔ)_diff算法

vue用diff算法, 新虛擬dom, 和舊的虛擬dom比較

情況1: 根元素變了, 刪除重建

舊虛擬DOM

新虛擬DOM

情況2: 根元素沒變, 屬性改變, 元素復(fù)用, 更新屬性

舊虛擬DOM

新虛擬DOM

1.4_vue基礎(chǔ)_diff算法-key

情況3: 根元素沒變, 子元素沒變, 元素內(nèi)容改變

無key - 就地更新

v-for不會移動DOM, 而是嘗試復(fù)用, 就地更新，如果需要v-for移動DOM, 你需要用特殊 attribute key 來提供一個排序提示

<ul id="myUL"><li v-for="str in arr">{{ str }} <input type="text"></li> </ul> <button @click="addFn">下標(biāo)為1的位置新增一個</button> export default {data(){return {arr: ["老大", "新來的", "老二", "老三"]}},methods: {addFn(){this.arr.splice(1, 0, '新來的')}} };

舊 - 虛擬DOM結(jié)構(gòu) 和新 - 虛擬DOM結(jié)構(gòu) 對比過程

性能不高, 從第二個li往后都更新了

有key - 值為索引

還是就地更新

因?yàn)樾屡f虛擬DOM對比, key存在就復(fù)用此標(biāo)簽更新內(nèi)容, 如果不存在就直接建立一個新的

<ul id="myUL"><li v-for="(str, index) in arr" :key="index">{{ str }} <input type="text"></li> </ul> <button @click="addFn">下標(biāo)為1的位置新增一個</button> export default {data(){return {arr: ["老大", "新來的", "老二", "老三"]}},methods: {addFn(){this.arr.splice(1, 0, '新來的')}} };

key為索引-圖解過程 (又就地往后更新了)

v-for先循環(huán)產(chǎn)生新的DOM結(jié)構(gòu), key是連續(xù)的, 和數(shù)據(jù)對應(yīng)

然后比較新舊DOM結(jié)構(gòu), 找到區(qū)別, 打補(bǔ)丁到頁面上

最后補(bǔ)一個li, 然后從第二個往后, 都要更新內(nèi)容

口訣: key的值有id用id, 沒id用索引

有key - 值為id

key的值只能是唯一不重復(fù)的, 字符串或數(shù)值

v-for不會移動DOM, 而是嘗試復(fù)用, 就地更新，如果需要v-for移動DOM, 你需要用特殊 attribute key 來提供一個排序提示

新DOM里數(shù)據(jù)的key存在, 去舊的虛擬DOM結(jié)構(gòu)里找到key標(biāo)記的標(biāo)簽, 復(fù)用標(biāo)簽

新DOM里數(shù)據(jù)的key存在, 去舊的虛擬DOM結(jié)構(gòu)里沒有找到key標(biāo)簽的標(biāo)簽, 創(chuàng)建

舊DOM結(jié)構(gòu)的key, 在新的DOM結(jié)構(gòu)里沒有了, 則移除key所在的標(biāo)簽

<template><div><ul><li v-for="obj in arr" :key="obj.id">{{ obj.name }}<input type="text"></li></ul><button @click="btn">下標(biāo)1位置插入新來的</button></div> </template><script> export default {data() {return {arr: [{name: '老大',id: 50},{name: '老二',id: 31},{name: '老三',id: 10}],};},methods: {btn(){this.arr.splice(1, 0, {id: 19, name: '新來的'})}} }; </script><style> </style>

圖解效果:

總結(jié): 不用key也不影響功能(就地更新), 添加key可以提高更新的性能

1.5_階段小結(jié)

v-for什么時候會更新頁面呢?

數(shù)組采用更新方法, 才導(dǎo)致v-for更新頁面

vue是如何提高更新性能的?

采用虛擬DOM+diff算法提高更新性能

虛擬DOM是什么?

本質(zhì)是保存dom關(guān)鍵信息的JS對象

diff算法如何比較新舊虛擬DOM?

根元素改變 – 刪除當(dāng)前DOM樹重新建
根元素未變, 屬性改變 – 更新屬性
根元素未變, 子元素/內(nèi)容改變
無key – 就地更新 / 有key – 按key比較

1.6_vue基礎(chǔ) 動態(tài)class

目標(biāo): 用v-bind給標(biāo)簽class設(shè)置動態(tài)的值

語法:
- :class="{類名: 布爾值}"

<template><div><p :class="{red_str: bool}">動態(tài)class</p></div> </template><script> export default {data(){return {bool: true}} } </script><style scoped>.red_str{color: red;} </style>

總結(jié): 就是把類名保存在vue變量中賦予給標(biāo)簽

1.7_vue基礎(chǔ)-動態(tài)style

目標(biāo): 給標(biāo)簽動態(tài)設(shè)置style的值

語法
- :style="{css屬性: 值}"

<template><div><p :style="{backgroundColor: colorStr}">動態(tài)style</p></div> </template><script> export default {data(){return {colorStr: 'red'}} } </script><style></style>

總結(jié): 動態(tài)style的key都是css屬性名

2. vue過濾器

2.0_vue過濾器-定義使用

目的: 轉(zhuǎn)換格式, 過濾器就是一個函數(shù), 傳入值返回處理后的值

過濾器只能用在, 插值表達(dá)式和v-bind表達(dá)式

Vue中的過濾器場景

字母轉(zhuǎn)大寫, 輸入"hello", 輸出"HELLO"
字符串翻轉(zhuǎn), “輸入hello, world”, 輸出"dlrow ,olleh"

語法:

Vue.filter(“過濾器名”, (值) => {return “返回處理后的值”})
filters: {過濾器名字: (值) => {return “返回處理后的值”}

例子:

全局定義字母都大寫的過濾器
局部定義字符串翻轉(zhuǎn)的過濾器

<template><div><p>原來的樣子: {{ msg }}</p><p>使用翻轉(zhuǎn)過濾器: {{ msg | reverse }}</p><p :title="msg | toUp">鼠標(biāo)長停</p></div> </template><script> export default {data(){return {msg: 'Hello, Vue'}},// 方式2: 局部 - 過濾器// 只能在當(dāng)前vue文件內(nèi)使用/*語法: filters: {過濾器名字 (val) {return 處理后的值}}*/filters: {toUp (val) {return val.toUpperCase()}} } </script><style></style>

總結(jié): 把值轉(zhuǎn)成另一種形式, 使用過濾器, Vue3用函數(shù)替代了過濾器.

全局注冊最好在main.js中注冊, 一處注冊到處使用

2.1_vue過濾器-傳參和多過濾器

目標(biāo): 可同時使用多個過濾器, 或者給過濾器傳參

語法:
- 過濾器傳參: vue變量 | 過濾器(實(shí)參)
- 多個過濾器: vue變量 | 過濾器1 | 過濾器2

<template><div><p>原來的樣子: {{ msg }}</p><p>使用翻轉(zhuǎn)過濾器: {{ msg | reverse('|') }}</p><p :title="msg | toUp | reverse('|')">鼠標(biāo)長停</p></div> </template><script> export default {data(){return {msg: 'Hello, Vue'}},filters: {toUp (val) {return val.toUpperCase()}} } </script><style></style>

總結(jié): 過濾器可以傳參, 還可以對某個過濾器結(jié)果, 后面在使用一個過濾器

2.2_案例-品牌管理(時間格式化)

目標(biāo): 復(fù)制上個案例, 在此基礎(chǔ)上, 把表格里的時間用過濾器+moment模塊, 格式化成YYYY-MM-DD 格式

圖示:

下載moment處理日期的第三方工具模塊

moment官網(wǎng)文檔: http://momentjs.cn/docs/#/displaying/

yarn add moment

定義過濾器, 把時間用moment模塊格式化, 返回我們想要的格式

// 目標(biāo): 處理時間 // 1. 下載moment模塊 import moment from 'moment'// 2. 定義過濾器, 編寫內(nèi)部代碼 filters: { formatDate (val){return moment(val).format('YYYY-MM-DD')} } <td>{{ obj.time | formatDate }}</td>

3. vue計(jì)算屬性

3.0_vue計(jì)算屬性-computed

目標(biāo): 一個數(shù)據(jù), 依賴另外一些數(shù)據(jù)計(jì)算而來的結(jié)果

語法:

computed: {"計(jì)算屬性名" () {return "值"} }

需求:

需求: 求2個數(shù)的和顯示到頁面上

<template><div><p>{{ num }}</p></div> </template><script> export default {data(){return {a: 10,b: 20}},// 計(jì)算屬性:// 場景: 一個變量的值, 需要用另外變量計(jì)算而得來/*語法:computed: {計(jì)算屬性名 () {return 值}}*/// 注意: 計(jì)算屬性和data屬性都是變量-不能重名// 注意2: 函數(shù)內(nèi)變量變化, 會自動重新計(jì)算結(jié)果返回computed: {num(){return this.a + this.b}} } </script><style></style>

注意: 計(jì)算屬性也是vue數(shù)據(jù)變量, 所以不要和data里重名, 用法和data相同

總結(jié): 一個數(shù)據(jù), 依賴另外一些數(shù)據(jù)計(jì)算而來的結(jié)果

3.1_vue計(jì)算屬性-緩存

目標(biāo): 計(jì)算屬性是基于它們的依賴項(xiàng)的值結(jié)果進(jìn)行緩存的，只要依賴的變量不變, 都直接從緩存取結(jié)果

<template><div><p>{{ reverseMessage }}</p><p>{{ reverseMessage }}</p><p>{{ reverseMessage }}</p><p>{{ getMessage() }}</p><p>{{ getMessage() }}</p><p>{{ getMessage() }}</p></div> </template><script> export default {data(){return {msg: "Hello, Vue"}},// 計(jì)算屬性優(yōu)勢:// 帶緩存// 計(jì)算屬性對應(yīng)函數(shù)執(zhí)行后, 會把return值緩存起來// 依賴項(xiàng)不變, 多次調(diào)用都是從緩存取值// 依賴項(xiàng)值-變化, 函數(shù)會"自動"重新執(zhí)行-并緩存新的值computed: {reverseMessage(){console.log("計(jì)算屬性執(zhí)行了");return this.msg.split("").reverse().join("")}},methods: {getMessage(){console.log("函數(shù)執(zhí)行了");return this.msg.split("").reverse().join("")}} } </script><style></style>

總結(jié): 計(jì)算屬性根據(jù)依賴變量結(jié)果緩存, 依賴變化重新計(jì)算結(jié)果存入緩存, 比普通方法性能更高

3.2_案例-品牌管理(總價和均價)

目標(biāo): 基于之前的案例, 完成總價和均價的計(jì)算效果

此處只修改了變化的代碼

<tr style="background-color: #EEE"><td>統(tǒng)計(jì):</td><td colspan="2">總價錢為: {{ allPrice }}</td><td colspan="2">平均價: {{ svgPrice }}</td> </tr><script> // 目標(biāo): 總價和均價顯示 // 1. 末尾補(bǔ)tr - 顯示總價和均價 export default {// ...源代碼省略// 2. 計(jì)算屬性computed: {allPrice(){// 3. 求總價return this.list.reduce((sum, obj) => sum += obj.price, 0)},avgPrice(){// 4. 求均價 - 保留2位小數(shù)return (this.allPrice / this.list.length).toFixed(2)}} } </script>

總結(jié): 總價來源于所有數(shù)據(jù)計(jì)算而來的結(jié)果, 故采用計(jì)算屬性

3.3_vue計(jì)算屬性-完整寫法

目標(biāo): 計(jì)算屬性也是變量, 如果想要直接賦值, 需要使用完整寫法

語法:

computed: {"屬性名": {set(值){},get() {return "值"}} }

需求:

計(jì)算屬性給v-model使用

頁面準(zhǔn)備輸入框

<template><div><div><span>姓名:</span><input type="text" v-model="full"></div></div> </template><script> // 問題: 給計(jì)算屬性賦值 - 需要setter // 解決: /*完整語法:computed: {"計(jì)算屬性名" (){},"計(jì)算屬性名": {set(值){},get(){return 值}}} */ export default {computed: {full: {// 給full賦值觸發(fā)set方法set(val){console.log(val)},// 使用full的值觸發(fā)get方法get(){return "無名氏"}}} } </script><style></style>

總結(jié): 想要給計(jì)算屬性賦值, 需要使用set方法

3.4_案例-小選影響全選

目標(biāo): 小選框都選中(手選), 全選自動選中

需求: 小選框都選中(手選), 全選自動選中

分析:

① 先靜態(tài)后動態(tài), 從.md拿到靜態(tài)標(biāo)簽和數(shù)據(jù)

② 循環(huán)生成復(fù)選框和文字, 對象的c屬性和小選框的選中狀態(tài), 用v-model雙向綁定

③ 定義isAll計(jì)算屬性, 值通過小選框們統(tǒng)計(jì)c屬性狀態(tài)得來

圖示:

模板標(biāo)簽和數(shù)據(jù)(直接復(fù)制在這基礎(chǔ)上寫vue代碼)

<template><div><span>全選:</span><input type="checkbox"/><button>反選</button><ul><li><input type="checkbox"/><span>任務(wù)名</span></li></ul></div> </template><script> export default {data() {return {arr: [{name: "豬八戒",c: false,},{name: "孫悟空",c: false,},{name: "唐僧",c: false,},{name: "白龍馬",c: false,},],};} }; </script>

正確代碼,不可復(fù)制

<template><div><span>全選:</span><input type="checkbox" v-model="isAll"/><button>反選</button><ul><li v-for="(obj, index) in arr" :key="index"><input type="checkbox" v-model="obj.c"/><span>{{ obj.name }}</span></li></ul></div> </template><script> // 目標(biāo): 小選框 -> 全選 // 1. 標(biāo)簽+樣式+js準(zhǔn)備好 // 2. 把數(shù)據(jù)循環(huán)展示到頁面上 export default {data() {return {arr: [{name: "豬八戒",c: false,},{name: "孫悟空",c: false,},{name: "唐僧",c: false,},{name: "白龍馬",c: false,},],};},// 5. 計(jì)算屬性-isAllcomputed: {isAll () {// 6. 統(tǒng)計(jì)小選框狀態(tài) -> 全選狀態(tài)// every口訣: 查找數(shù)組里"不符合"條件, 直接原地返回falsereturn this.arr.every(obj => obj.c === true)}} }; </script>

3.5_案例-全選影響小選

目標(biāo): 全選影響小選

需求1: 獲取到全選狀態(tài) – 改裝isAll計(jì)算屬性
需求2: 全選狀態(tài)同步給所有小選框

分析:

①: isAll改成完整寫法, set里獲取到全選框, 勾選的狀態(tài)值

②: 遍歷數(shù)據(jù)數(shù)組, 賦給所有小選框v-model關(guān)聯(lián)的屬性

圖示:

正確代碼,不可以復(fù)制

3.6_案例-反選

目標(biāo): 反選功能

需求: 點(diǎn)擊反選, 讓所有小選框, 各自取相反勾選狀態(tài)

分析:

①: 小選框的勾選狀態(tài), 在對象的c屬性

②: 遍歷所有對象, 把對象的c屬性取相反值賦予回去即可

圖示:

正確代碼,不可以復(fù)制

<button @click="btn">反選</button><script> export default {// ...其他代碼省略methods: {btn(){// 8. 讓數(shù)組里對象的c屬性取反再賦予回去this.arr.forEach(obj => obj.c = !obj.c)}} }; </script>

4. vue偵聽器

4.0_vue偵聽器-watch

目標(biāo): 可以偵聽data/computed屬性值改變

語法:

watch: {"被偵聽的屬性名" (newVal, oldVal){} }

完整例子代碼:

<template><div><input type="text" v-model="name"></div> </template><script> export default {data(){return {name: ""}},// 目標(biāo): 偵聽到name值的改變/*語法:watch: {變量名 (newVal, oldVal){// 變量名對應(yīng)值改變這里自動觸發(fā)}}*/watch: {// newVal: 當(dāng)前最新值// oldVal: 上一刻值name(newVal, oldVal){console.log(newVal, oldVal);}} } </script><style></style>

總結(jié): 想要偵聽一個屬性變化, 可使用偵聽屬性watch

4.1_vue偵聽器-深度偵聽和立即執(zhí)行

目標(biāo): 偵聽復(fù)雜類型, 或者立即執(zhí)行偵聽函數(shù)

語法:
watch: {"要偵聽的屬性名": {immediate: true, // 立即執(zhí)行deep: true, // 深度偵聽復(fù)雜類型內(nèi)變化handler (newVal, oldVal) {}} }

完整例子代碼:

<template><div><input type="text" v-model="user.name"><input type="text" v-model="user.age"></div> </template><script> export default {data(){return {user: {name: "",age: 0}}},// 目標(biāo): 偵聽對象/*語法:watch: {變量名 (newVal, oldVal){// 變量名對應(yīng)值改變這里自動觸發(fā)},變量名: {handler(newVal, oldVal){},deep: true, // 深度偵聽(對象里面層的值改變)immediate: true // 立即偵聽(網(wǎng)頁打開handler執(zhí)行一次)}}*/watch: {user: {handler(newVal, oldVal){// user里的對象console.log(newVal, oldVal);},deep: true,immediate: true}} } </script><style></style>

總結(jié): immediate立即偵聽, deep深度偵聽, handler固定方法觸發(fā)

4.2_案例-品牌管理(數(shù)據(jù)緩存)

目標(biāo): 偵聽list變化, 同步到瀏覽器本地

需求: 把品牌管理的數(shù)據(jù)實(shí)時同步到本地緩存

分析:

? ① 在watch偵聽list變化的時候, 把最新的數(shù)組list轉(zhuǎn)成JSON字符串存入到localStorage本地

? ② data里默認(rèn)把list變量從本地取值, 如果取不到給個默認(rèn)的空數(shù)組

效果:

? 新增/刪除 – 刷新頁面 – 數(shù)據(jù)還在

在之前的案例代碼基礎(chǔ)上接著寫

正確代碼,不可復(fù)制

今日總結(jié)

v-for能監(jiān)測到哪些數(shù)組方法變化, 更新頁面
key的作用是什么
虛擬dom好處, diff算法效果
動態(tài)設(shè)置class或style
vue過濾器作用和分類
vue計(jì)算屬性作用
vue偵聽器的作用

面試題

1. Vue 中怎么自定義過濾器

? Vue.js允許自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表達(dá)式

? 全局的用Vue.filter()

? 局部的用filters屬性

2. Vue中:key作用, 為什么不能用索引

? :key是給v-for循環(huán)生成標(biāo)簽頒發(fā)唯一標(biāo)識的, 用于性能的優(yōu)化

? 因?yàn)関-for數(shù)據(jù)項(xiàng)的順序改變，Vue 也不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個元素

? :key如果是索引, 因?yàn)樗饕沁B續(xù)的, 如果刪除其中某一個, 會導(dǎo)致最后一個被刪除

? 當(dāng)我們再刪除的時候, :key再根據(jù)數(shù)據(jù)來把新舊的dom對比時, 刪除:key不存在的對應(yīng)的標(biāo)簽(添加也是一樣的插入到指定位置, 別的都不會動)

3. 數(shù)組更新有的時候v-for不渲染

? 因?yàn)関ue內(nèi)部只能監(jiān)測到數(shù)組順序/位置的改變/數(shù)量的改變, 但是值被重新賦予監(jiān)測不到變更, 可以用 Vue.set() / vm.$set()

寫在最后

? $原創(chuàng)不易，還希望各位大佬支持一下\textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下}$

👍 $點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動力！\textcolor{green}{點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動力！}$

?? $收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}$

?? $評論，你的意見是我進(jìn)步的財(cái)富！\textcolor{green}{評論，你的意見是我進(jìn)步的財(cái)富！}$

總結(jié)

以上是生活随笔為你收集整理的Vue 过滤器、计算属性、侦听器图解版一目了然的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： IT培训机构如何选择？选择IT培训机构3
下一篇： 7大原因告诉你，为什么IT行业发展前景好