摘要：前言在學(xué)習(xí)組件化開發(fā)的時(shí)候，自己雖然也能編碼實(shí)現(xiàn)，但如果不做筆記，只是寫代碼，學(xué)習(xí)的效果還不夠好。為組件準(zhǔn)備好數(shù)據(jù)之后，就可以開始用它了。新增的代碼如下上面是組件新增的代碼，用戶點(diǎn)擊按鈕之后，會(huì)執(zhí)行該組件內(nèi)的函數(shù)。

在學(xué)習(xí) Vue.js 組件化開發(fā) Todo List 的時(shí)候，自己雖然也能編碼實(shí)現(xiàn)，但如果不做筆記，只是寫代碼，學(xué)習(xí)的效果還不夠好。只有把自己的實(shí)現(xiàn)思路記錄下來(lái)，遇到的問題和解決方法也記錄下來(lái)，用文字把這個(gè)過(guò)程梳理清楚，才能對(duì)整個(gè)項(xiàng)目有更加清晰、準(zhǔn)確的認(rèn)識(shí)。

注：該項(xiàng)目通過(guò) vue-cli 搭建，GitHub 上的地址：todo-list。

先寫一個(gè)最簡(jiǎn)單的組件，就是用 v-for 指令顯示待辦事項(xiàng)清單。數(shù)據(jù)也是用的本地的數(shù)據(jù)，這樣在這一步能夠把更多的精力放在學(xué)習(xí)組件的編寫上。

首先，當(dāng)然是在 components 目錄下新建 TodoItem.vue 文件，用來(lái)顯示待辦事項(xiàng)清單，代碼如下：

在 script 中，name 選項(xiàng)定義了組件的名稱 TodoItem，props 選項(xiàng)則定義了組件所接收數(shù)據(jù)的名稱 tasks 和類型：數(shù)組（Array）。

在 template 中，則在根元素 ul 內(nèi)，通過(guò) li 元素顯示待辦事項(xiàng)的名稱 task.title。加了另一條語(yǔ)句 :key="task.id"，是因?yàn)?Vue 建議在用 v-for 遍歷時(shí)，為所遍歷的每一項(xiàng)提供一個(gè)唯一的 key 屬性（參考：key）。這一項(xiàng)不加也完全沒關(guān)系，只不過(guò) vue-cli 附帶的 ESLint 會(huì)有錯(cuò)誤提示，所以我這里就加上了。

另外這里還有個(gè)小知識(shí)點(diǎn)，Vue 規(guī)定組件的 template 中只能有一個(gè)根元素，也就是說(shuō)下面這種寫法是會(huì)報(bào)錯(cuò)的。個(gè)人猜測(cè)，之所以會(huì)有這種規(guī)定，也是為了最終渲染出來(lái)的 HTML 結(jié)構(gòu)能更加清晰。仔細(xì)想想，這個(gè)理念也和組件化是相通的，不是嘛？

這個(gè)組件最基本的內(nèi)容已經(jīng)寫好了，接下來(lái)就在 App.vue 中引入它。

引入組件之后，當(dāng)然還要為它提供數(shù)據(jù)，這樣組件才有內(nèi)容可以顯示。這里也有個(gè)知識(shí)點(diǎn)，組件中的數(shù)據(jù)對(duì)象 data 必須是函數(shù)，因?yàn)檫@樣能夠保證組件實(shí)例不會(huì)修改同一個(gè)數(shù)據(jù)對(duì)象。剛開始寫組件的時(shí)候可能容易忽略這個(gè)知識(shí)點(diǎn)，多寫幾次就記住了。

export default {
  name: "app",
  components: {
    TodoItem
  },
  data() {
    return {
      tasks: [
        {
          id: "6b9a86f6-1d1a-558a-83df-f98d84cd87bd",
          title: "JS",
          content: "Learn JavaScript",
          completed: true,
          createdAt: "2017-08-02"
        },
        {
          id: "1211bb33-a249-5782-bd97-0d5652438476",
          title: "Vue",
          content: "Learn Vue.js and master it!",
          completed: false,
          createdAt: "2018-01-02"
        }
      ]
    };
  }
};

為組件準(zhǔn)備好數(shù)據(jù)之后，就可以開始用它了。組件的基本用法也很簡(jiǎn)單，按照它的要求提供數(shù)據(jù)，然后組件就會(huì)按照自己設(shè)定的樣式把數(shù)據(jù)顯示出來(lái)。

上面的代碼中，調(diào)用了 TodoItem 這個(gè)組件，并且將父組件中的數(shù)據(jù)屬性 tasks 綁定到 TodoItem 這個(gè)組件的 props 選項(xiàng)上。在 :tasks="tasks" 這句代碼中，等號(hào)前的 tasks 是子組件 TodoItem 中定義的名稱，可以近似地理解為“形參”；等號(hào)后面的 tasks 則是父組件中的數(shù)據(jù)屬性，可以近似地理解為“實(shí)參”。所以這種用法也可以理解成 :形參="實(shí)參"，希望這種寫法能夠幫大家更容易地理解組件傳入數(shù)據(jù)的語(yǔ)法。而父組件的數(shù)據(jù)屬性和子組件的 props 選項(xiàng)都用 tasks 這個(gè)名稱，是為了保持代碼上的一致性，剛接觸組件的時(shí)候可能覺得分不清誰(shuí)是誰(shuí)，但是代碼寫多了之后就能體會(huì)到這種寫法的好處了，父組件只負(fù)責(zé)提供數(shù)據(jù)，子組件只負(fù)責(zé)使用數(shù)據(jù)，保持一致的命名，閱讀和修改代碼的時(shí)候就能很容易看出來(lái)互相之間的關(guān)系。

保存代碼，然后在終端中執(zhí)行 npm run serve，構(gòu)建工具就會(huì)自動(dòng)編譯，然后在瀏覽器中打開頁(yè)面，如果能夠看到類似下圖中的效果，就說(shuō)明已經(jīng)寫好了一個(gè)最簡(jiǎn)單的組件了，接下來(lái)就要豐富這個(gè) Todo List 的各項(xiàng)功能了。

要使用 Bootstrap 的樣式，首先需要把它的 CSS 文件引入進(jìn)來(lái)，編輯 public 目錄下的 index.html 文件，在 head 中加入下面的 CSS。后面需要引入 CSS 或者 JS 的時(shí)候，都可以在這里引入。當(dāng)然了，也可以通過(guò) npm install xxx 指令以后端庫(kù)的形式引入，不過(guò)這樣只能引入 JS，沒法引入 CSS。不過(guò)有一天在火車上擼代碼的時(shí)候，發(fā)現(xiàn)了以后端形式引入庫(kù)的一個(gè)便利之處，就是它一旦安裝好了，沒有網(wǎng)絡(luò)的情況下也完全可以正常用。

接下來(lái)就是搭框架，先修改 App.vue，確定整體框架：

在根 div 中加上 class="container"，這樣子元素就可以應(yīng)用 col-md-8 這樣的網(wǎng)格樣式了。然后在子元素中加上 class="col-md-8 offset-md-2 mt-5"，col-md-8 表示待辦事項(xiàng)占12列寬度的網(wǎng)格中的8列，offset-md-2 表示往右偏移2列之后顯示待辦事項(xiàng)，這樣就能夠居中顯示了。mt-5 則表示待辦事項(xiàng)距離上方有一定空白，留白了才好看。

每個(gè)待辦事項(xiàng)要顯示標(biāo)題、內(nèi)容、日期，可以用 Bootstrap 的 Custom Content 列表。

觀察上圖對(duì)應(yīng)的代碼可以知道，a 標(biāo)簽內(nèi)的 h5 標(biāo)簽可用于顯示待辦事項(xiàng)的標(biāo)題，相鄰的 small 標(biāo)簽可用于顯示時(shí)間，a 標(biāo)簽內(nèi)最后的 small 標(biāo)簽則可用顯示于事項(xiàng)的具體內(nèi)容，因此 TodoItem.vue 組件中可以改成如下內(nèi)容。

在瀏覽器中看看頁(yè)面效果，怎么樣，還不錯(cuò)吧？

在實(shí)際業(yè)務(wù)中，數(shù)據(jù)都是放在服務(wù)器上，往往會(huì)在前端頁(yè)面加載完成之后，再向服務(wù)器請(qǐng)求數(shù)據(jù)。這樣前后端分離，讓前端頁(yè)面只關(guān)注界面部分，數(shù)據(jù)由后端負(fù)責(zé)提供，將前后端解耦，就降低了互相之間的依賴性。

要向服務(wù)器請(qǐng)求數(shù)據(jù)，可以用 axios 這個(gè)庫(kù)，和前面引入 Bootstrap 的 CSS 一樣，編輯 public 目錄下的 index.html 文件，將 axios 這個(gè)庫(kù)的鏈接加進(jìn)來(lái)。

然后再編輯父組件 App.vue，將數(shù)據(jù)屬性 tasks 的初始值設(shè)置為空數(shù)組，在 Vue 實(shí)例的 created 這個(gè)生命周期鉤子中獲取數(shù)據(jù)。數(shù)據(jù)方面參考一個(gè)簡(jiǎn)單的 JSON 存儲(chǔ)服務(wù)這篇文章的建議 ，放在 myjson 上。

const tasksUrl = "https://api.myjson.com/bins/xxxxx";

export default {
  name: "app",
  components: {
    TodoItem
  },
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    fetchData(jsonUrl, obj) {
      axios
        .get(jsonUrl)
        .then(response => response.data)
        .then(data => {
          data.forEach(ele => {
            obj.push(ele);
          });
        })
        .catch(console.log());
    },
  },
  created() {
    this.fetchData(tasksUrl, this.tasks);
  }
};

從上面的代碼可以看到，數(shù)據(jù)屬性的值保存在 tasksUrl 這個(gè) URL 中，通過(guò) axios 獲取數(shù)據(jù)。在 Vue 中更新數(shù)組，需要用特定的變異方法，才能觸發(fā)視圖的更新，也就是上面代碼中的 obj.push(ele)。

另外，上面將更新數(shù)據(jù)部分的代碼抽離成一個(gè)多帶帶的函數(shù) fetchData，這樣能夠提高代碼的可讀性。否則如果 created 這個(gè)鉤子中需要執(zhí)行五六個(gè)操作的時(shí)候，把具體的代碼全放到這里面，那代碼就亂得沒法看了。

為了優(yōu)化用戶體驗(yàn)，可以用 v-cloak 指令，實(shí)現(xiàn)組件在數(shù)據(jù)加載完成之后才顯示的功能。

具體的測(cè)試結(jié)果，可以看視頻：http://7xq4gx.com1.z0.glb.clouddn.com/v-cloak_fast-3g.mp4。

在上面這個(gè)視頻中，通過(guò) Chrome 開發(fā)者工具將網(wǎng)速限制為 "Fast 3G" 模式，以便更清楚地展示這個(gè)過(guò)程。然后點(diǎn)擊刷新按鈕加載頁(yè)面，能夠看到頁(yè)面在成功獲取到服務(wù)器上的數(shù)據(jù)之后，才會(huì)渲染組件內(nèi)容并顯示出來(lái)，在這之前頁(yè)面則一直是空白狀態(tài)。

前面知道怎么用組件顯示待辦事項(xiàng)清單了，那么顯示一個(gè)菜單列表也很容易了，照葫蘆畫瓢就行。

首先在父組件 App.vue 中準(zhǔn)備數(shù)據(jù) menus。

export default {
  name: "app",
  components: {
    TodoItem,
    TodoMenu
  },
  data() {
    return {
      tasks: [],
      menus: [
        { tag: "all", text: "全部" },
        { tag: "doing", text: "未完成" },
        { tag: "done", text: "已完成" }
      ]
    };
  }
}

然后選擇按鈕的樣式，自己選用了 Outline buttons，組件代碼如下：

與之前編寫 TodoItem 組件時(shí)相比，代碼上主要的區(qū)別在于 props 的定義更加詳細(xì)了，理由參見 Vue.js 官方文檔中的風(fēng)格指南：Prop 定義。

下面是當(dāng)前的頁(yè)面效果：

基本的功能做出來(lái)了，接著來(lái)調(diào)整一下 TodoMenu 組件的樣式，讓它更好看一些。

首先是要給按鈕之間加上間距，也是前面提到過(guò)的留白，就跟設(shè)計(jì) PPT 一樣，把頁(yè)面塞得滿滿的其實(shí)很難看。查看 Bootstrap 的文檔 Margin and padding，知道了可以用 mr-x 這樣的類來(lái)設(shè)置右邊距，測(cè)試了幾個(gè)值之后，最終確定為 mr-2。

然后還要給上面的一排按鈕和下面的待辦事項(xiàng)清單之間也加上間距，這里就用 mb-3 設(shè)置按鈕的下邊距，之前在 TodoItem 組件中設(shè)置的 mt-5 則刪掉。

現(xiàn)在的頁(yè)面效果就是這個(gè)樣子的了：

查看 Bootstrap 的文檔可以知道，給按鈕添加一個(gè) active 類，按鈕就會(huì)處于被點(diǎn)擊的狀態(tài)。這樣一來(lái)，只需要修改 menus 的數(shù)據(jù)結(jié)構(gòu)，給每個(gè)對(duì)象添加一個(gè)名為 active 的布爾型變量，然后給 TodoMenu 組件動(dòng)態(tài)綁定 active 類，就能實(shí)現(xiàn)頁(yè)面加載完成后突出顯示第一個(gè)按鈕的功能了。

// App.vue
menus: [
  { tag: "all", text: "全部", active: true },
  { tag: "doing", text: "未完成", active: false },
  { tag: "done", text: "已完成", active: false }
]

除了要在網(wǎng)頁(yè)加載完成后突出顯示第一個(gè)按鈕，還需要在用戶點(diǎn)擊各個(gè)按鈕之后，突出顯示用戶所點(diǎn)擊的按鈕，這樣能夠讓用戶很清楚地看到自己所選中的是哪個(gè)按鈕。

實(shí)現(xiàn)這個(gè)需求的流程如下（用了庫(kù) ramda）：

查找 menus 中 active 屬性為 true 的對(duì)象，也就是之前被點(diǎn)擊的按鈕對(duì)應(yīng)的數(shù)據(jù)。

查找 menus 中當(dāng)前被點(diǎn)擊的按鈕對(duì)應(yīng)的對(duì)象：這個(gè)需要在子組件 TodoMenu.vue 中觸發(fā)事件，將被點(diǎn)擊的按鈕所對(duì)應(yīng)的數(shù)據(jù)（menu.tag）傳遞給父組件 App.vue，然后在父組件中查找該數(shù)據(jù)所對(duì)應(yīng)的對(duì)象，如果和第一次查找的對(duì)象相同，說(shuō)明前后兩次點(diǎn)擊了同一個(gè)按鈕，那么就不用重復(fù)操作了。否則就需要把前一次點(diǎn)擊的按鈕的 active 屬性設(shè)置為 false，然后將當(dāng)前被點(diǎn)擊的按鈕的 active 屬性設(shè)置為 true，這樣就能夠突出顯示被點(diǎn)擊的按鈕了。

新增的代碼如下：

上面是組件 TodoMenu.vue 新增的代碼，用戶點(diǎn)擊按鈕之后，會(huì)執(zhí)行該組件內(nèi)的 activeButton 函數(shù)。在函數(shù)中會(huì)觸發(fā) active 事件，并將當(dāng)前按鈕所對(duì)應(yīng)對(duì)象的 tag 屬性的值傳給父組件。

而上面的這段代碼則是父組件 App.vue 中新增的代碼，父組件監(jiān)聽到了子組件觸發(fā)的 active 事件，就會(huì)執(zhí)行父組件中的 activeButton 函數(shù)，對(duì)比兩次點(diǎn)擊的是否為同一按鈕，然后根據(jù)結(jié)果執(zhí)行對(duì)應(yīng)的操作：如果點(diǎn)擊的是不同的按鈕，則將之前所點(diǎn)擊的按鈕對(duì)應(yīng)的對(duì)象屬性 active 值設(shè)置為 false，并將當(dāng)前點(diǎn)擊的按鈕對(duì)應(yīng)的對(duì)象屬性的 active 的值設(shè)置為 true，Vue 監(jiān)聽到對(duì)象屬性的變化，從而將類名動(dòng)態(tài)綁定到 HTML 標(biāo)簽上，實(shí)現(xiàn)按鈕的突出顯示。

PS：自己之前的實(shí)現(xiàn)方案，是通過(guò) jQuery 先將 menus 中所有對(duì)象的 active 屬性設(shè)置為 false，然后用原生 JS 將觸發(fā)了監(jiān)聽事件對(duì)象的 active 屬性設(shè)置為 true，雖然代碼也很簡(jiǎn)潔，但是代碼的邏輯還是不如用 ramda 這個(gè)庫(kù)的實(shí)現(xiàn)方式清晰。

這個(gè)需求可以在上一個(gè)需求的流程里完成，就是頁(yè)面加載完成時(shí)，顯示全部的待辦事項(xiàng)；之后每次用戶點(diǎn)擊按鈕，和前一次突出顯示的按鈕進(jìn)行對(duì)比，如果相同，說(shuō)明顯示的還是那些待辦事項(xiàng)，自然不用做什么操作；如果不同，那就顯示按鈕所對(duì)應(yīng)分類的待辦事項(xiàng)。

export default {
  data() {
    return {
      currTag: ""
    }
  },
  computed: {
    filteredTasks() {
      if (this.currTag === "all") {
        return JSON.parse(JSON.stringify(this.tasks));
      } else if (this.currTag === "doing") {
        return R.filter(task => task.completed === false)(this.tasks);
      } else if (this.currTag === "done") {
        return R.filter(task => task.completed === true)(this.tasks);
      } else {
        return null;
      }
    }
  },
  methods: {
    fetchData(jsonUrl, obj) {
      axios
        .get(jsonUrl)
        .then(response => response.data)
        .then(data => {
          data.forEach(ele => {
            obj.push(ele);
          });
        })
        .then((this.currTag = "all"))
        .catch(console.log());
    }
  }
}

在上面的代碼中，通過(guò)字符串屬性 currTag 標(biāo)記當(dāng)前所點(diǎn)擊的按鈕，計(jì)算屬性 filteredTaks 則根據(jù) currTag 的值篩選出所要顯示的待辦事項(xiàng)。而在 fetchData 方法中，新增的 .then((this.currTag = "all")) 會(huì)在獲取到數(shù)據(jù)之后設(shè)置所要顯示的事項(xiàng)類別，這樣整個(gè)流程就完整了。

上面這些只是功能上的變動(dòng)，在界面部分也要對(duì)應(yīng)調(diào)整，這樣才能有更好的用戶體驗(yàn)。具體來(lái)說(shuō)，就是對(duì)于已完成的待辦事項(xiàng)，復(fù)選框應(yīng)為選中狀態(tài)，并且文字的顏色要淡一些，這樣才能和未完成的待辦事項(xiàng)區(qū)分開來(lái)。

而實(shí)際的代碼其實(shí)很簡(jiǎn)單，就是將傳入組件的數(shù)據(jù)與 HTML 元素動(dòng)態(tài)綁定：

下面是調(diào)整好界面之后的效果圖：

首先設(shè)計(jì)編輯界面的基本樣式，在這里用的是 Bootstrap 中的 Card 這個(gè)組件，這樣可以把內(nèi)部的元素都包裹到 card 中。待辦事項(xiàng)的標(biāo)題和內(nèi)容顯示在 textarea 元素中，待辦事項(xiàng)的創(chuàng)建時(shí)間則顯示在 card-footer 中。這個(gè)組件的代碼如下所示：

從上面的代碼中可以看到，將 id 為 title 的 textarea 與 task.title 屬性進(jìn)行了雙向綁定，id 為 content 的 textarea 則與 task.content 屬性進(jìn)行了雙向綁定，分別用來(lái)顯示待辦事項(xiàng)的標(biāo)題和內(nèi)容。

在父組件 App.vue 中，對(duì)象類型的數(shù)據(jù)屬性 currTask 保存子組件 TodoEdit.vue 中所要顯示的待辦事項(xiàng)，并通過(guò)布爾類型的計(jì)算屬性 renderEdit 決定是否要渲染子組件 TodoEdit.vue。在用戶還沒有點(diǎn)擊待辦事項(xiàng)的時(shí)候，還不需要渲染編輯界面，數(shù)據(jù)屬性 currTask 還是個(gè)空對(duì)象，計(jì)算屬性 renderEdit 為 false。在用戶點(diǎn)擊了某個(gè)待辦事項(xiàng)之后，需要在編輯界面中顯示數(shù)據(jù)屬性 currTask 中的內(nèi)容，計(jì)算屬性 renderEdit 為 true，這樣才會(huì)渲染子組件 TodoEdit.vue。

父組件 App.vue 中新增的代碼如下所示：

從上面的代碼可以看到，在頁(yè)面及數(shù)據(jù)加載完成之后，用戶點(diǎn)擊待辦事項(xiàng)之前，不會(huì)顯示編輯界面。用戶點(diǎn)擊待辦事項(xiàng)之后，將當(dāng)前事項(xiàng)的信息保存至數(shù)據(jù)屬性 currTask 中，計(jì)算屬性 renderEdit 此時(shí)的值也為 true，便會(huì)渲染子組件 TodoEdit.vue，并將數(shù)據(jù)屬性 currTask 的內(nèi)容顯示在子組件中。

完成之后的效果如下圖所示：

按照上面的方法完善代碼之后，現(xiàn)在可以顯示待辦事項(xiàng)的編輯界面了。但是點(diǎn)擊待辦事項(xiàng)的話，瀏覽器地址欄中的地址會(huì)在最后附加上一個(gè) # 字符：http://localhost:8080/#。如果不想有這種變化，那么就可以去掉 TodoItem.vue 組件的 href 屬性，然后設(shè)置鼠標(biāo)懸浮至該組件的 a 標(biāo)簽時(shí)顯示手型指針即可：

此外，由于 TodoEdit.vue 組件中，顯示待辦事項(xiàng)標(biāo)題和內(nèi)容用的都是 textarea 標(biāo)簽，而這個(gè)標(biāo)簽是可以通過(guò)拖動(dòng)其右下角的標(biāo)記來(lái)改變其大小的。但是對(duì)于待辦事項(xiàng)而言，標(biāo)題的文字?jǐn)?shù)量一般都不多，不希望改變其大小，那么就要為這個(gè)標(biāo)簽進(jìn)行多帶帶的設(shè)置，設(shè)置其 resize 屬性為 none 即可。

此時(shí)的效果如下所示：

這個(gè)功能所要實(shí)現(xiàn)的效果，就是用戶連續(xù)多次點(diǎn)擊同一個(gè)待辦事項(xiàng)時(shí)，編輯界面會(huì)在顯示/隱藏兩種狀態(tài)之間來(lái)回切換，給用戶以更好的使用體驗(yàn)。

最開始的思路：

新建數(shù)據(jù)屬性 prevId 用于保存用戶上一次點(diǎn)擊的待辦事項(xiàng)的 id 屬性，并且將用戶本次點(diǎn)擊的待辦事項(xiàng)的 id 屬性與之進(jìn)行對(duì)比。

如果兩個(gè)屬性值不同，說(shuō)明前后兩次點(diǎn)擊的是不同的待辦事項(xiàng)，就不需要隱藏編輯界面，并且將用戶本次所點(diǎn)擊的待辦事項(xiàng)的 id 屬性保存在 prevId 中，這樣用戶下一次再點(diǎn)擊待辦事項(xiàng)，就能與更新后的 prevId 屬性進(jìn)行對(duì)比。

如果兩個(gè)屬性值相同，說(shuō)明兩次點(diǎn)擊的是同一個(gè)待辦事項(xiàng)，那么 prevId 屬性就沒必要更新了，同時(shí)要切換編輯界面的顯示狀態(tài)。

從前面的代碼可以知道，計(jì)算屬性 renderEdit 的值決定了是否要渲染組件 TodoEdit.vue，數(shù)據(jù)屬性 currTask 非空就會(huì)渲染。而用戶首次點(diǎn)擊待辦事項(xiàng)之后，currTask 就永遠(yuǎn)都是非空的了，也就意味著編輯界面一直會(huì)被渲染。而這里需要實(shí)現(xiàn)的功能，是要讓這個(gè)組件在顯示/隱藏兩種狀態(tài)之間來(lái)回切換，需要注意的是，組件的“渲染”和“顯示”是兩回事，被渲染出來(lái)的組件，可以通過(guò)設(shè)置其 display 這個(gè) CSS 屬性的值為 false 來(lái)把它隱藏了。那么 Vue.js 中有沒有類似的方式實(shí)現(xiàn)這個(gè)功能呢？當(dāng)然有！那就是 v-show 指令。該指令后跟的表達(dá)式只要為真值，就會(huì)顯示該元素，否則就會(huì)隱藏該元素。這不剛好就是我們需要的功能嗎？這樣一來(lái)，就可以通過(guò)優(yōu)化代碼邏輯，讓上面新建的數(shù)據(jù)屬性 prevId 來(lái)完成兩件事：一方面這個(gè)數(shù)據(jù)屬性可以用來(lái)保存每次點(diǎn)擊的待辦事項(xiàng)的 id 屬性，另一方面還可以用它來(lái)決定是否要顯示編輯界面。啊哈，一舉兩得，是不是很爽？另外，prevId 這個(gè)名稱只是表示了它最原始的含義，其實(shí)可以重命名為 showEdit，用來(lái)表示它最終的業(yè)務(wù)邏輯，這樣在閱讀代碼的時(shí)候就更容易理解了。下面就是優(yōu)化后的代碼邏輯：

頁(yè)面加載完成，showEdit 為空。

首次點(diǎn)擊某個(gè)事項(xiàng)，保存 id 至 showEdit。

之后再點(diǎn)擊同一個(gè)事項(xiàng)，id 與 showEdit 相同，則清空 showEdit。

點(diǎn)擊不同的事項(xiàng)，id 與 showEdit 不同，則更新至 showEdit 中。

流程已經(jīng)很清楚了，代碼自然也是水到渠成：

俗話說(shuō)優(yōu)化無(wú)止境，上面的 editTask 方法中新增的代碼，其實(shí)還可以進(jìn)一步優(yōu)化，不知道你有沒有想到該如何優(yōu)化呢？快動(dòng)手試試吧！

Collapsible contents (code block) in comments / spoiler tag · Issue #166 · dear-github/dear-github：用 Markdown 語(yǔ)法，實(shí)現(xiàn)內(nèi)容的折疊效果。不過(guò)最后呈現(xiàn)出來(lái)的效果不好，就沒有用上。