端午總結Vue3中computed和watch的使用

明月人倚樓發表於2021-06-14
Vue

1使用計算屬性 computed 實現按鈕是否禁用

我們在有些業務場景的時候，需要將按鈕禁用。
這個時候，我們需要使用(disabled)屬性來實現。
disabled的值是true表示禁用。false表示可以使用。
由於disabled的值是動態變化的。
此時我們就可以使用計算屬性computed 這個方法。
只要值發生變化 他就會重新去計算。
在vue3中，如果需要使用computed需要引入。

<template>
 <div>
    <div>
      <div>
        <input type="txet" v-model="cont"  />
      </div>
      <button @click="func1" :disabled="flag">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let cont=ref();
    function func1(){
      console.log(cont.value)
    }
    //按鈕是否可以使用
    let flag=computed(()=>{
     return ( cont.value ? false : true )
    })
    return {flag,cont,func1}
  },
}
</script>

2 將上面的控制按鈕是否可以點選邏輯抽離出去

<template>
 <div>
    <div>
      <div>
        <input type="txet" v-model="cont"  />
      </div>
      <button @click="func1" :disabled="flag">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let cont=ref();
    function func1(){
      console.log('我可以點選了')
    }
    let {flag}=funFlag(cont);
    return {flag,cont,func1}
  },
}

// 在vue3的computed計算屬性中。我們需要使用的話
// 需要引入computed。
// computed 經常使用在按鈕是否可以點選這樣的場景
// disabled=false;顧名思義可以點選。 disabled=true不可以使用
//按鈕是否可以使用
function funFlag(cont){
  let flag=computed(()=>{
    return ( cont.value ? false : true )
  })
  return {flag}
}
</script>

3 computed實現姓名的拼接

上面那一個案例實現的是按鈕是否可以點選，
這次我們是用 computed 實現姓名的拼接。
其實computed只要是一個資料依賴另外幾個或者一個資料的變化而變化的時候。
我們就可以使用computed 。
vue3中的計算屬性的函式中如果只傳入一個回撥函式，表示的是get

<template>
 <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="請輸入姓" v-model="user.xing"  /> <br>
        名：<input type="text" placeholder="請輸入名" v-model="user.ming">
      </div>
    </div>

    <div>
       計算屬性的使用
        <input type="txet" placeholder="顯示的是姓名" v-model="fullName" />
    </div>

 </div>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let user=reactive({
      xing:"李",
      ming:"自成",
    })
    // vue3中的計算屬性的函式中如果只傳入一個回撥函式，表示的是get
    let fullName=computed(()=>{
      return user.xing+"_"+user.ming
    })
    return {fullName,user}
  },
}
</script>

4 computed中get和set的使用

當我們輸入姓和名的時候，
下面的input框會進行拼接。
當我們改變下面input框的時候，上面姓的input框和名的input框的值，也會對應發生變化
如果我們需要使用computed的get和set方法的話，需要傳遞的是一個物件。
如果不需要使用get和set方法。傳遞的是一個箭頭函式

<template>
 <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="請輸入姓" v-model="user.xing"  /> <br>
        名：<input type="text" placeholder="請輸入名" v-model="user.ming">
      </div>
    </div>

    <div>
       計算屬性的使用
        <input type="txet" placeholder="顯示的是姓名" v-model="fullName" />
    </div>

 </div>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    let user=reactive({
      xing:"李",
      ming:"自成",
    })
    let fullName=computed({
      //取user中值的時候觸發
      get(){
        console.log(1)
        return user.xing+"_"+user.ming
      },
      // 當重新設定fullName值發生變化的時候就會觸發
      set(value){
        // value是fullName中顯示的值
        let names=value.split("_");
        user.xing=names[0];
        user.ming=names[1];
      }
    })
    return {fullName,user}
  },
}
</script>

5.watch屬性中immediate，deep 的用法

immediate:true 表示的是會預設執行一次watch，
這樣介面初次渲染資料才能夠正確的顯示姓和名的拼接。

deep:true,表示的是會進行深度的監聽,
當我們監聽的是一個物件，物件中的任何一個值發生變化的時候。
watch就會監聽到.

<template>
  <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="請輸入姓" v-model="user.xing" />
        <br />
        名：<input type="text" placeholder="請輸入名" v-model="user.ming" />
      </div>
    </div>
    <div>
      計算屬性的使用
      <input type="txet" placeholder="顯示的是姓名" v-model="fullName" />
    </div>
  </div>
</template>
<script>
import { reactive,ref, watch} from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({
      xing: "李",
      ming: "自成",
    });

    let fullName=ref('');

    // 初次渲染的時候，無法自動去拼接姓和名
    // watch(user,({xing,ming })=>{
    //     fullName.value=xing+"_"+ming
    // })

    // 這裡使用瞭解構
    // immediate:true 表示的是會預設執行一次watch，
    // deep:true,表示的是會進行深度的監聽
    // 這樣介面初次渲染資料才能夠正確的顯示姓和名的拼接
    watch(user,({xing,ming })=>{
      fullName.value=xing+"_"+ming
    }, {immediate:true,}
    )
    return { fullName, user };
},
};
</script>

6.watch監聽兩個或者兩個以上的資料監聽

有兩種方式：
第一種：再寫一個watch.
第二種：一個watch.把他們變成一個陣列
我更喜歡在寫一個watch。可能很多人不太喜歡這樣。
但是我覺得很直觀

7. watchEffect 的用法

需要引入watchEffect 這個方法
監視，不需要配置immediate:true，
本身就會被預設執行一次

<template>
  <div>
    <div>
      <div>
        姓：<input type="txet" placeholder="請輸入姓" v-model="user.xing" />
        <br />
        名：<input type="text" placeholder="請輸入名" v-model="user.ming" />
      </div>
    </div>
    <div>
      計算屬性的使用
      <input type="txet" placeholder="顯示的是姓名" v-model="fullName" />
    </div>
  </div>
</template>
<script>
import { reactive,ref, watchEffect} from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({
      xing: "李",
      ming: "自成",
    });
    let fullName=ref('');
    // 監視，不需要配置immediate:true，
    // 本身就會被預設執行一次
    watchEffect(()=>{
        fullName.value=user.xing+"_"+user.ming
    })
    return { fullName, user };
  },
};
</script>

相關文章