vue系列之踩坑之旅

zhouzhou發表於2018-07-11
Vue

vue router

router.push

// 字串
router.push(`home`)

// 物件
router.push({ path: `home` })

// 命名的路由
router.push({ name: `user`, params: { userId: 123 }})

// 帶查詢引數，變成 /register?plan=private
router.push({ path: `register`, query: { plan: `private` }})

當帶有params時，必須用name
一定要注意取資料的時候是route，不是router

v-if

Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。
用 key 管理可複用的元素。

只需新增一個具有唯一值的 key 屬性即可：

<template v-if="loginType === `username`">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-for key

理想的 key 值是每項都有的唯一 id。
參考連結： 為什麼使用v-for時必須新增唯一的key?

使用v-for渲染元素時，使用元素自身的id屬性去指定渲染元素的key值有利於單個元素的重新渲染，若採用其他如v-for提供的index, key等值，在改變渲染出來的DOM結構時，會觸發所有元素的重新渲染，當資料過大時，可能會造成效能負擔。

陣列更新檢測

觸發檢視更新:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
  1. 由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：
  • 當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
  • 當你修改陣列的長度時，例如：vm.items.length = newLength
  1. 由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除

解決方法：

  • Vue.set(object, key, value) 方法
  • 替換舊物件

vuex

vuex中的變數是響應式的。

頁面重新整理後資料無法儲存

解決方法：存sessionStorage、localStorage

如果變數狀態不需要頻繁變化，則存sessionStorage或localStorage較為合適。
如果變數狀態需要頻繁變化，或者在元件之間相互引用，則用vuex較為合適。

相關文章