前言 在 上一小節 我介紹了我學習vue入門 插值語法 的過程。 在本篇，我將記錄我對vue的 計算屬性和偵聽器 的學習記錄 註：本篇對於”偵聽“和”監聽“是一個意思 一、計算屬性 在官網上，可以看到這樣一個例子： <div id="example"> {{ message.split('').re ...
前言
在本篇，我將記錄我對vue的 計算屬性和偵聽器 的學習記錄
註：本篇對於”偵聽“和”監聽“是一個意思
一、計算屬性
在官網上，可以看到這樣一個例子：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
Vue官方預判到了某些人學了Vue，會在{{}}寫複雜的語句，而這些語句會大大降低可讀性，但有時候又不得不去寫這麼複雜的邏輯來滿足業務需求
因此Vue提供了新的配置項：computed
在面對每當我們讀取變數時需要對變數進行處理後再現實的情況
1.1 計算屬性的基本用法
看代碼：
computedcomputed<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div id="root">
輸入b站視頻連接: <input v-model="bUrl"><br>
該視頻的id為: {{id}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //綁定元素，el的屬性值可以是dom節點也可以是css選擇器
data:{
bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click", //這是可以存放用於展示的數據
},
computed:{
id(){
if(this.bUrl.includes("?")){
return this.bUrl.split("/").slice(-2,-1)[0];
}
return this.bUrl.split("/").slice(-1)[0];
}
}
})
</script>
</html>
在這個例子中，在input框輸入b站url鏈接，computed配置的方法會立刻計算，在dom節點可以當成屬性來獲取
為什麼每次修改input的內容computed相關方法會重新執行一次呢？因為v-model對bUrl和input框的內容進行了雙向綁定，一旦改變了其中一個另外一個也會跟著變化，變化的時候就會觸發computed配置裡面的相關方法
1.2 計算屬性添加setter
除此之外，如果我要對計算屬性的方法添加一個setter，那麼就需要寫成這樣子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div id="root">
輸入b站視頻連接: <input v-model="bUrl"><br>
該視頻的id為: {{id}} <br>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", //綁定元素，el的屬性值可以是dom節點也可以是css選擇器
data:{
bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click",
},
computed:{
id:{
get(){
if(this.bUrl.includes("?")){
return this.bUrl.split("/").slice(-2,-1)[0];
}
return this.bUrl.split("/").slice(-1)[0];
},
set(){
/* show your code. */
}
}
}
})
</script>
</html>
二、偵聽器
在Vue中提供了單獨的配置去監聽變數的變化，這個配置項就是：watch
2.1 監聽器的基本用法
對於watch來說，當被監聽對象發生改變時會調用監聽的回調函數（handler）：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
輸入b站視頻連接: <input v-model="msg"><br>
變化: {{info}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root", 、
data:{
msg:"hello",
info:"沒變化"
},
watch:{
msg:{
handler(oldValue,newValue){
this.info = `之前是${oldValue}，現在是${newValue}。`;
}
}
}
})
</script>
</html>
除此之外，你還可以用vm去創建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
輸入b站視頻連接: <input v-model="msg"><br>
變化: {{info}}
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#root",
data:{
msg:"hello",
info:"沒變化"
},
});
vm.$watch('msg',function(oldValue,newValue){
this.info = `之前是${oldValue}，現在是${newValue}。`;
});
</script>
</html>
2.2 監聽器的各種配置
- deep
- immediate
deepimmediate:true,<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 50px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
<h1>{{mark.subject}}</h1>
當前學習進度：{{mark.process}} % <br>
輸入要修改的值：<input type="text" v-model="newValue"> <button @click="changeProcess">確認</button>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#root",
data:{
newValue:0,
mark:{
subject:"Vue課程學習進度",
process:30
}
},
watch:{
mark:{
deep:true, //開啟深度監聽，即遇到對象時對象成員變化也會觸發handler
immediate:true, //開啟立即執行，即剛一開始dom渲染也會被調用一次
handler(oldV,newV){
if(!newV){
return; //把這個註釋掉可以體會下有無immediate的區別
}
alert("老師修改進度為："+ newV.process);
}
}
},
methods: {
changeProcess(){
this.mark.process = this.newValue;
}
},
});
</script>
</html>
2.3 監聽的兩種簡寫方式
如果要使用監聽的簡寫方式意味著你放棄了配置 immediate 和 deep 屬性
就是將，原本配置對象的地方，改為一個函數，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>夢開始的地方</title>
<style>
input{
width: 200px;
height: 20px;
}
</style>
</head>
<body>
<div id="root">
輸入b站視頻連接: <input v-model="msg"><br>
變化: {{info}}
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
msg:"hello",
info:"沒變化"
},
watch:{
msg(oldValue,newValue){
this.info = `之前是${oldValue}，現在是${newValue}。`;
}
}
})
</script>
</html>
The More
本節完~~~~
