Vue結(jié)合computed實(shí)現(xiàn)搜索和排序Demo效果圖
一、什么是computed計(jì)算屬性?
1.1 computed 和 watch 的區(qū)別 和 使用場(chǎng)景
1.1.1 computed 計(jì)算屬性
- 可以在里面聲明一些函數(shù) 必須有
return值 - 計(jì)算屬性函數(shù)中如果用到了Vue實(shí)例data中的數(shù)據(jù) 這些數(shù)據(jù)發(fā)生改變后就會(huì)重新執(zhí)行這個(gè)計(jì)算屬性函數(shù) 將最新的計(jì)算屬性結(jié)果返回出去
- 執(zhí)行時(shí)機(jī): 初始化顯示執(zhí)行，函數(shù)中用到了Vue實(shí)例data中的數(shù)據(jù)發(fā)生改變后會(huì)重新執(zhí)行計(jì)算
-
頁(yè)面中使用計(jì)算屬性: 在頁(yè)面中直接用插值表達(dá)式(八字胡語(yǔ)法||胡子語(yǔ)法)使用計(jì)算屬性(
{{計(jì)算屬性函數(shù)名}}) - 本質(zhì): 計(jì)算屬性本質(zhì)就是一個(gè)方法 但是使用的時(shí)候這些方法的方法名當(dāng)作屬性名使用 計(jì)算屬性的值就是方法中return出來(lái)的值
- getter 和 setter :
使用 get 和 set 函數(shù)需要把原先的計(jì)算屬性函數(shù)改成計(jì)算屬性對(duì)象
計(jì)算屬性默認(rèn)執(zhí)行get方法(需要return計(jì)算屬性的結(jié)果) (根據(jù)相關(guān)的數(shù)據(jù)計(jì)算并返回當(dāng)前屬性的值)
當(dāng)計(jì)算屬性值自身發(fā)生改變后執(zhí)行set方法
可以用get和set方法來(lái)實(shí)現(xiàn)一些計(jì)算稅前和稅后的互推算
-
計(jì)算屬性緩存: 計(jì)算屬性存在緩存 多次讀取計(jì)算屬性的值只執(zhí)行一次getter計(jì)算
緩存機(jī)制 => {計(jì)算屬性名:數(shù)據(jù)結(jié)果} 以鍵值對(duì)的數(shù)據(jù)格式進(jìn)行緩存
1.1.2 watch 監(jiān)聽屬性
- 可以監(jiān)聽data中的屬性和一些非DOM元素的改變
- 可以獲取數(shù)據(jù)改變前的值和改變后的值
形參(newVal,oldVal)=>(改變后的值,改變前的值) - 監(jiān)聽路由 hash
watch: {
// watch里面的 $router 這些對(duì)象前面不要帶this
"$route.path"(newVal, oldVal) {
if (newVal.indexOf("/login") >= 0) {
this.welcom = "歡迎登陸";
}
if (newVal.indexOf("/register") >= 0) {
this.welcom = "歡迎注冊(cè)";
}
}
}
1.1.3 watch和computed的區(qū)別
- watch里面的方法只能對(duì)那個(gè)方法名的屬性名做監(jiān)聽
- computed里面可以對(duì)那個(gè)方法中所有使用到了的data中的屬性名做監(jiān)聽
- watch里面無(wú)須return
- computed需要return
一般computed比watch用的更多
![]()
Xmind圖例
Xmind圖例
二、Vue結(jié)合computed實(shí)現(xiàn)搜索和排序
從不廢話的小藍(lán)直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="搜索姓名" /> <br />
<ul>
<li v-for="(item, index) in fillNameList" :key="index">
{{ index }} -- {{ item.name }} -- {{ item.age }}
</li>
</ul>
<button @click="sorting=1">年齡升序</button>
<button @click="sorting=2">年齡降序</button>
<button @click="sorting=0">原本順序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
name: "",
nameList: [
{ name: "Tom", age: 18 },
{ name: "Bob", age: 19 },
{ name: "Rose", age: 17 },
{ name: "Bem", age: 20 }
],
// 排序
sorting: 0 // 0 原本順序 ， 1 升序 ， 2 降序
},
computed: {
fillNameList: {
get() {
const { nameList, name, sorting } = this;
// 新數(shù)組
let fillList = nameList.filter(
val => val.name.indexOf(name) != -1
);
// 排序
if (sorting !== 0) {
fillList.sort((a, b) => {
// 如果返回負(fù)數(shù) a在前(降序) 如果返回正數(shù) b在前(升序)
// 升序
if (sorting === 1) {
return b.age - a.age;
}
// 降序
if (sorting === 2) {
return a.age - b.age;
}
});
}
return fillList;
}
}
}
});
</script>
</body>
</html>
