vue中如何實(shí)時(shí)監(jiān)聽(tīng)本地存儲(chǔ)

更新時(shí)間：2022年04月29日 16:00:26 作者：鄉(xiāng)村老師代言人馬云

這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽(tīng)本地存儲(chǔ)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

如何實(shí)時(shí)監(jiān)聽(tīng)本地存儲(chǔ)

在main.js中

Vue.prototype.$addStorageEvent = function (type, key, data) {
  if (type === 1) {
  // 創(chuàng)建一個(gè)StorageEvent事件
  var newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
          localStorage.setItem(k, val);
          // 初始化創(chuàng)建的事件
          newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
          // 派發(fā)對(duì)象
          window.dispatchEvent(newStorageEvent);
      }
  }
  return storage.setItem(key, data);
} else {
  // 創(chuàng)建一個(gè)StorageEvent事件
  var newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
          sessionStorage.setItem(k, val);
          // 初始化創(chuàng)建的事件
          newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
          // 派發(fā)對(duì)象
          window.dispatchEvent(newStorageEvent);
      }
  }
  return storage.setItem(key, data);
}
}

想要的時(shí)候觸發(fā)

this.$addStorageEvent(2, "butCountNum", this.butCount);

在mouted鉤子函數(shù)中進(jìn)行監(jiān)聽(tīng)

window.addEventListener('setItem', (e) => {
? ? ? if(e.key === "butCountNum"){
? ? ? ?? ?//寫(xiě)邏輯
? ? ? }

vue監(jiān)聽(tīng)數(shù)據(jù)變化

監(jiān)聽(tīng)數(shù)據(jù)變化，在Vue中是通過(guò)偵聽(tīng)器來(lái)實(shí)現(xiàn)的，你也可以將它理解為監(jiān)聽(tīng)器，時(shí)刻監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化。

watch的基本用法

在之前我們?cè)趈s中添加了data、methods，這一次我們要添加的是watch屬性。下面我們先來(lái)眼熟一下偵聽(tīng)器的添加位置：

<script>
export default {
? ? name: "app",
? ? // 數(shù)據(jù)
? ? data() {
? ? ? ? return {};
? ? },
? ? // 方法
? ? methods:{},
? ? // 偵聽(tīng)器
? ? watch:{}
};
</script>

一個(gè)簡(jiǎn)單的例子：

<template>
? ? <p>你點(diǎn)擊按鈕的次數(shù)是： {{ count }} </p>
? ? <button @click="add" v-model="count">點(diǎn)擊</button>
</template>

<script>
export default {
? ? name: "app",
? ? data(){
? ? ? ? return {
? ? ? ? ? ? count:0
? ? ? ? }
? ? },
? ? methods:{
? ? ? ? add(){
? ? ? ? ? ? this.count++;
? ? ? ? }
? ? },
? ? watch:{
? ? ? ? // 被偵聽(tīng)的變量count
? ? ? ? count(){
? ? ? ? ? ? console.log('count 發(fā)生了變化');
? ? ? ? }
? ? }
};
</script>

偵聽(tīng)器更多的是用在異步操作中，所謂異步操作就是數(shù)據(jù)返回有所延遲的操作，比如說(shuō)我們要請(qǐng)求后端的接口，接口會(huì)返回給我們數(shù)據(jù)，然后我們?cè)賹?shù)據(jù)渲染在頁(yè)面上。

從請(qǐng)求接口到返回?cái)?shù)據(jù)，這中間需要一定的時(shí)間，此時(shí)我們就可以用偵聽(tīng)器來(lái)偵聽(tīng)返回的數(shù)據(jù)，當(dāng)數(shù)據(jù)返回以后，我們?cè)儆|發(fā)渲染。

模擬一個(gè)偽異步操作：

<template>
? ? <input type="text" v-model="inputValue">
? ? <p>從輸入框中獲取到的數(shù)據(jù)：{{ passedInputValue }}</p>
</template>

<script>
export default {
? ? name: "app",
? ? data(){
? ? ? ? return {
? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? passedInputValue: ''
? ? ? ? }
? ? },
? ? watch:{
? ? ? ? inputValue() {
? ? ? ? ? ? // 當(dāng)inputValue數(shù)據(jù)發(fā)生變化以后，延遲三秒賦值給passedInputValue
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? this.passedInputValue = this.inputValue;
? ? ? ? ? ? }, 3000)
? ? ? ? }
? ? }
};
</script>

此時(shí)你就會(huì)發(fā)現(xiàn)，當(dāng)你在input輸入框中輸入文字以后，p標(biāo)簽內(nèi)的數(shù)據(jù)不是立馬改變，而是過(guò)三秒才會(huì)去渲染。

獲取前一次的值

在某些場(chǎng)景中，我們會(huì)需要上一次的數(shù)據(jù)，此時(shí)，偵聽(tīng)器就可以給我們兩個(gè)值，舊值和新值。

在上一個(gè)案例的基礎(chǔ)上，我們只需要添加一個(gè)參數(shù)，即可獲取舊值，代碼如下：

watch:{
? ? inputValue(value,oldValue) {
? ? ? ? // 第一個(gè)參數(shù)為新值，第二個(gè)參數(shù)為舊值，不能調(diào)換順序
? ? ? ? console.log(`新值：${value}`);
? ? ? ? console.log(`舊值：${oldValue}`);
? ? }
}

handler方法和immediate屬性

前面我們已經(jīng)知道，當(dāng)我們偵聽(tīng)的值沒(méi)有發(fā)生改變的時(shí)候，是不會(huì)觸發(fā)偵聽(tīng)器的，并且，頁(yè)面第一次渲染的時(shí)候也不會(huì)觸發(fā)偵聽(tīng)器。

但是現(xiàn)在我有個(gè)需求就是要讓頁(yè)面第一次渲染的時(shí)候就去觸發(fā)偵聽(tīng)器呢？

此時(shí)就要用到一個(gè)方法和一個(gè)屬性。

<template>
? ? <p>FullName: {{fullName}}</p>
? ? <p>FirstName: <input type="text" v-model="firstName"></p>
</template>

<script>
export default {
? ? name: "app",
? ? data(){
? ? ? ? return {
? ? ? ? ? ? firstName: 'Su',
? ? ? ? ? ? lastName: 'Junyang',
? ? ? ? ? ? fullName: ''
? ? ? ? }
? ? },
? ? watch:{
? ? ? ? firstName: {
? ? ? ? ? ? handler(newName, oldName) {
? ? ? ? ? ? ? ? this.fullName = newName + ' ' + this.lastName;
? ? ? ? ? ? },
? ? ? ? ? ? // 如果設(shè)置了false，那么在頁(yè)面第一次渲染以后不會(huì)觸發(fā)偵聽(tīng)器
? ? ? ? ? ? immediate: true
? ? ? ? }
? ? }
};
</script>

deep 深度偵聽(tīng)

所謂深度偵聽(tīng)就是偵聽(tīng)對(duì)象內(nèi)部屬性的值。

我們之前用的偵聽(tīng)器都只能偵聽(tīng)一個(gè)變量的變化，（重點(diǎn)看一下代碼中的注釋?zhuān)├纾?/p>

data:{
? ? return {
? ? ? ? // 字符串發(fā)生變化，可以偵聽(tīng)
? ? ? ? firstName: 'Su',
? ? ? ? room:{
? ? ? ? ? ? name:"大床房",
? ? ? ? ? ? // 當(dāng)房號(hào)發(fā)生變化的時(shí)候，偵聽(tīng)器并不能偵聽(tīng)到。
? ? ? ? ? ? // 因?yàn)閭陕?tīng)器只偵聽(tīng)到room，不能偵聽(tīng)number或者name
? ? ? ? ? ? number: 302
? ? ? ? }
? ? }
},

此時(shí)我們就需要深度偵聽(tīng)。

深度偵聽(tīng)在代碼上并不難實(shí)現(xiàn)，只需要在handler的基礎(chǔ)上添加一個(gè)deep屬性，代碼如下：

watch:{
? ? room:{
? ? ? ? handler(newRoom,oldRoom){
? ? ? ? ? ? console.log("房間號(hào)發(fā)生了變化")
? ? ? ? },
? ? ? ? deep: true
? ? }
}

案例：使用偵聽(tīng)器和定時(shí)器實(shí)現(xiàn)偽模糊搜索

<template>
? <div class="search">
? ? <input type="text" v-model="inputValue" />
? ? <div class="search-block" v-for="(element, index) in results" :key="index">
? ? ? {{ element }}
? ? </div>
? </div>
</template>

<script>
export default {
? name: 'app',
? data() {
? ? return {
? ? ? results: [],
? ? ? mockData: [
? ? ? ? '浙江大學(xué)',
? ? ? ? '中國(guó)人民大學(xué)',
? ? ? ? '清華大學(xué)',
? ? ? ? '清華大學(xué)附屬中學(xué)',
? ? ? ? '浙江理工大學(xué)',
? ? ? ? '浙江工業(yè)大學(xué)'
? ? ? ],
? ? ? inputValue: ''
? ? };
? },
? watch: {
? ? inputValue(value) {
? ? ? if (!!value) {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.results = this.mockData.filter(el => {
? ? ? ? ? ? console.log(value);
? ? ? ? ? ? return el.indexOf(value) !== -1;
? ? ? ? ? });
? ? ? ? }, 300);
? ? ? }
? ? }
? }
};
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: