從 Vue 1.x 遷移

目錄

• #FAQ
  

• 範本

  • 片段實例

• • 生命週期鉤子函數

  • beforeCompile

  • #attached

  • #detached

  • init

• ready

  • v-for

  • v-for 遍歷陣列時的參數順序

  • #v-for 遍歷物件時的參數順序

  • $index and $key

  • #track-by

• #v-for 範圍值

  • #Props

  • coerce Prop 的參數

  • #twoWay Prop 的參數

  • v-bind 的.once和.sync 修飾符

  • #修改Props

• ##根實例的Props

  • #計算屬性

• cache: false

  • #Built-In 指令

  • v-bind 真/假值

  • 用v-on 監聽原生事件

  • 帶有debounce 的v-model

  • 使用lazy 或number 參數的v-model

  • 使用內聯value的v-model

  • v-model with v-for Iterated Primitive Values

  • #帶有!important 的v-bind:style

    ################v-el 和v-ref####################################################################

  • v-show後面使用v-else

• #自訂指令

  • #.literal 修飾符

• 過渡

  • transition 參數

  • #可重複使用的過渡Vue.transition

  • #可重複使用的過渡Vue.transition

• 過渡的stagger 參數

• • ##events 選項

  • Vue.directive('on').keyCodes

  • #$dispatch 和$broadcast

• #過濾器
  ##插入文字以外的篩選器
  篩選器參數符號
  內建文字過濾器

• 雙向過濾器

  • ##插槽

• 已重名的插槽

  • slot 樣式參數

  • 特殊屬性

  • keep-alive 屬性

• 計算插值

  • #屬性內部的計算插值

  • HTML 計算插值

  • #單次綁定
  • 回應
    ######vm.$watch################## vm.$set##################vm.$delete##################Array.prototype.$set ##################Array.prototype.$remove######

  • Vue 實例上的Vue.set 和Vue.delete

  • 取代vm.$data

  • vm.$get

• # 圍繞DOM 的實例方法

  • vm.$appendTo

  • #vm.$before

• vm.$after
  #vm.$remove
  • ##底層實例方法

  #vm.$eval

• vm.$interpolate

  • vm.$log

• 實例DOM 選項

  • replace: false
  ##全域設定
  Vue.config.debug
  Vue.config.async

• Vue.config.delimiters

  • Vue.config.unsafeDelimiters

  #全域API
  #帶el 的Vue.extend

FAQ

　2. 然後，瀏覽本頁面的側邊欄所列的內容。如果發現有的標題對你的專案有影響，但是遷移工具沒有給予提示，請檢查自己的專案。

　3. 如果你的專案有測試程式碼，運行並查看仍然失敗的地方。如果沒有測試程式碼，在瀏覽器中打開你的程序，透過導航環顧並留意那些報錯或警告訊息。

　4. 現在，你的應用程式應該已徹底完成遷移。如果你渴望了解更多，可以閱讀本頁面剩餘部分 - 或從介紹部分，從頭開始深入新的文件和改進過的指南。由於你已經熟悉一些核心概念，所以許多部分已經被刪除。

將 Vue 1.x 版本的應用程式移轉到 2.0 則要花多久時間？

這取決於幾個因素：

• 取決於你應用程式的規模(中小型的基本上一天內就​​可以搞定) 。

• 取決於你分心和開始 2.0 最酷的新功能的次數。 無法判斷時間，我們建構 2.0 應用程式的時候也常發生這種事！

• 取決於你使用了哪些舊有的特性。大部分可以透過尋找和取代 (find-and-replace) 來實現升級，但有一些可能還是要花點時間。如果你沒有遵循最佳實踐，Vue 2.0 會盡力強迫你去遵循。這有利於專案的長期運行，但也可能意味著重大重構 (儘管有些需要重構的部分可能已經過時)。

如果我升等到 Vue 2 ，我還必須同時升級 Vuex 和 Vue Router？

只有 Vue Router 2 與 Vue 2 保持相容，所以 Vue Router 是需要升級的，你必須遵循 Vue Router 遷移方式來處理。幸運的是，大多數應用程式沒有很多 router 相關程式碼，所以遷移可能不會超過一個小時。

對於 Vuex ，版本 0.8 與 Vue 2 保持相容，所以部分不必強制升級。可以促使你立即升級的唯一理由，是你想要使用那些 Vuex 2 中新的高級特性，例如模組 (modules) 和減少的樣板檔案 (reduced boilerplate)。

範本

片段實例移除

<p>foo</p>
<p>bar</p>

<div>
  <p>foo</p>
  <p>bar</p>
</div>

生命週期鉤子函數

beforeCompile^移除

使用created 鉤子函數替代。

##取代 使用mounted 鉤子函數取代。 升級方式

在程式碼庫中執行

使用其他鉤子函數內建的DOM 偵測(DOM check) 方法。例如，替換如下：

attached: function () {
  doSomething()
}

mounted: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

遷移工具

detached: function () {
  doSomething()
}

destroyed: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

init ^重新命名

##使用新的

ready 取代

使用新的mounted 鉤子函數取代。應該注意的是，使用 mounted 並不能保證鉤子函數中的 this.$el 在 document 中。為此也應該引入 Vue.nextTick/

mounted: function () {
  this.$nextTick(function () {
    // 代码保证 this.$el 在 document 中
  })
}

v-for

v-for# 遍歷陣列時的參數順序變更

當包含index 時，之前遍歷陣列時的參數順序是(index, value)。現在是 (value, index) ，來和 JavaScript 的原生陣列方法 (例如 forEach 和

v-for# 遍歷物件時的參數順序^變更

當包含property 名稱/key 時，先前遍歷物件的參數順序是(name, value)。現在是 (value, name)，來和常見的物件迭代器 (例如 lodash) 保持一致。

$index 和 $key ^移除

已經移除了$index 和$key 這兩個隱式聲明變量，以便在v-for 中明確定義。這可以使沒有太多 Vue 開發經驗的開發者更好地閱讀程式碼，並且在處理巢狀循環時也能產生更清晰的行為。

track-bytrack-by

##取代track-by 已經被替換為

，它的工作方式與其他屬性一樣，沒有

<div v-for="item in items" track-by="id">

<div v-for="item in items" v-bind:key="item.id">

v-for# 範圍值^變更##在

v-for="number in 10" 的number 從0 開始到9 結束，現在從1 開始，到10 結束。

Props

Prop 的參數

如果需要檢查prop 的值，建立一個內部的computed 值，而不再在props 內部去定義，例如：

• props: {
    username: {
      type: String,
      coerce: function (value) {
        return value
          .toLowerCase()
          .replace(/\s+/, '-')
      }
    }
  }

  現在應該寫為：

  props: {
    username: String,
  },
  computed: {
    normalizedUsername: function () {
      return this.username
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }

這樣有一些好處：

#執行遷移工具找出包含  coerce 選項的實例。

• Prop 的參數移除

• Props 現在只能單向傳遞。為了對父元件產生反向影響，子元件需要明確地傳遞一個事件而不是依賴隱式地雙向綁定。詳見：

• 自訂元件事件

v-bind# 的.once和.sync 修飾符^移除

Props 現在只能單向傳遞。為了對父元件產生反向影響，子元件需要明確地傳遞一個事件而不是依賴隱式地雙向綁定。詳見：

• 自訂元件事件

• #自訂輸入元件 (使用元件事件)

• 全域狀態管理

修改Props ^棄用

元件內修改prop是反模式(不建議的) 的。例如，先宣告一個 prop ，然後在元件中透過 this.myProp = 'someOtherValue' 改變 prop 的值。根據渲染機制，當父元件重新渲染時，子元件的內部 prop 值也會被覆寫。

大多數情況下，改變 prop 值可以用以下選項取代：

• #透過 data 屬性，用 prop 去設定一個 data 屬性的預設值。

• 透過 computed 屬性。

根實例的Props ^替換

對於一個根實例來說(例如：用new Vue({ ... }) 建立的實例)，只能用propsData 而不是props 。

計算屬性

#cache: false ^棄用

在Vue 未來的大版本中，計算屬性的快取驗證將會被移除。把不緩存的計算屬性轉換成方法可以得到和之前相同的結果。

範例：

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

或使用元件方法：

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

##執行遷移工具找到 cache: false

Built-In 指令
##v-bind

真/假值變更在2.0中使用v-bind 時，只有null,

，和false 被視為假。這意味著，0 和空字串將被當作真值渲染。例如

將會被渲染為

draggable="true"。 對於枚舉屬性，除了上述假值之外，字串 "false"

也會被渲染為

升級方式#執行端對端測試，如果你app 的任何部分有可能會被這個升級影響到，將會彈出failed tests

#用v-on 監聽原生事件變更

<my-component v-on:click.native="doSomething"></my-component>

有debounce 的v-model^移除

Debouncing 曾經被用來控制Ajax 請求及其它高耗任務的頻率。 Vue 中v-model的 debounce 屬性參數使得在一些簡單情況下非常容易實現這種控制。但實際上，這是控制了狀態更新的頻率，而不是控制高耗時任務本身。這是個微小的差別，但是會隨著應用成長而顯現出限制。

例如設計搜尋提示時的限制：

使用 debounce 參數，便無法觀察「Typing」 的狀態。因為無法對輸入狀態進行即時檢測。然而，透過將 debounce 與Vue 解耦，可以只延遲我們想要控制的操作，從而避開這些限制：

<!--
通过使用 lodash 或者其它库的 debounce 函数，
我们相信 debounce 实现是一流的，
并且可以随处使用它，不仅仅是在模板中。
-->
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false
  },
  computed: {
    searchIndicator: function () {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // 这是 debounce 实现的地方。
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }.bind(this), 1000)
    }, 500)
  }
})

這種方式的另一個優點是：當包裹函數執行時間與延遲時間相當時，將會等待較長時間。例如，當給予搜尋建議時，要等待使用者輸入停止一段時間後才給予建議，這個體驗非常差。其實，這時候比較適合用 throttling 函數。因為現在你可以自由的使用類似 lodash 之類的函式庫，所以很快就可以用 throttling 重構項目。

使用lazy 或number 參數的v-model 。 ^替換

lazy 和number 參數現在以修飾符的形式使用，看起來更清晰，而不是這樣：

<input v-model="name" lazy>
<input v-model="age" type="number" number>

現在寫成這樣：

<input v-model.lazy="name">
<input v-model.number="age" type="number">

使用內嵌value 的v-model ^移除

v-model 不再以內嵌value 方式初始化的初步值了，顯然他將以實例的data 對應的屬性作為真正的初值。

這表示以下元素：

<input v-model="text" value="foo">

在 data 選項中有下面寫法的：

data: {
  text: 'bar'
}

將渲染 model 為 ‘bar’ 而不是 ‘foo’ 。同樣，對<textarea> 已有的值來說：

<textarea v-model="text">
  hello world
</textarea>

必須保證text 初值為「hello world」

v-model# with v-for Iterated Primitive Values ^移除

#像這樣的寫法將會失效：

<input v-for="str in strings" v-model="str">

因為< ;input> 將會被編譯成類似下面的js 程式碼：

strings.map(function (str) {
  return createElement('input', ...)
})

這樣，v-model 的雙向綁定在這裡就失效了。把 str 賦值給迭代器裡的另一個值也沒有用，因為它只是函數內部的一個變數。

替代方案是，你可以使用物件數組，這樣v-model 就可以同步更新物件裡面的欄位了，例如：

<input v-for="obj in objects" v-model="obj.str">

#有!important 的v-bind:style ^移除

這樣寫將失效：

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

如果確實需要覆寫其它的!important，最好用字串形式去寫入：

<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el# 和v-ref 替換

簡單起見，v-el 和v-ref 合併為一個ref 屬性了，可以在元件實例中透過$refs 來呼叫。這意味著v-el:my-element 將寫成這樣：ref="myElement"，v-ref:my-component 變成這樣： ref="myComponent"。綁定在一般元素上時，ref 指 DOM 元素，綁定在元件上時，ref 為一元件實例。

因為 v-ref 不再是一個指令了而是一個特殊的屬性，它也可以被動態定義了。這樣在和v-for 結合的時候是很有用的：

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

以前v-el/v-ref 和v-for 一起使用將產生一個DOM 陣列或元件數組，因為沒辦法給每個元素一個特定名字。現在你還仍然可以這樣做，給每個元素一個相同的ref：

<p v-for="item in items" ref="items"></p>

和1.x 中不同，$refs 不是回應的，因為它們在渲染過程中註冊/更新。只有監聽變化並重複渲染才能使它們響應。

另一方面，設計$refs主要是提供給 js 程式存取的，並不建議在模板中過度依賴使用它。因為這意味著在實例之外去存取實例狀態，違背了 Vue 資料驅動的想法。

v-show後面使用 v-else ^移除

v-else 不能再跟在v-show#後面使用。請在v-if的否定分支中使用v-show來取代。例如：

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

現在應該寫出這樣：

<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

自訂指令^簡化

#在新版中，指令的使用範圍已經大大減小了：現在指令僅僅被用於低階的DOM 操作。大多數情況下，最好是使用元件作為程式碼重複使用的抽象層。

顯要的改變有以下幾點：

• 指令不再擁有實例。意思是，在指令的鉤子函數中不再擁有實例的 this 。替代的是，你可以在參數中接受你需要的任何資料。如果確實需要，可以透過 el 來存取實例。

• 類似 acceptStatement ，deep ，priority 等都已被棄用。為了替換雙向指令，請參閱 範例。

• 現在有些鉤子的意義和以前不一樣了，並且多了兩個鉤子函數。

幸運的是，新鉤子更簡單，更容易掌握。詳見 自訂指令指南。

指令.literal 修飾符^移除

.literal 修飾符已經被移除，為了取得相同的功能，可以簡單地提供字串修飾符作為值。

範例，如下變更：

<p v-my-directive.literal="foo bar baz"></p>

只是：

<p v-my-directive="'foo bar baz'"></p>

過渡

transition 參數取代

#Vue 的過渡系統有了徹底的改變，現在透過使用<transition> 和<transition-group> 來包裹元素實現過渡效果，而不再使用transition

 屬性的地方。

^{可重複使用的過渡}Vue.transition 取代

 屬性的地方。

^過渡的stagger 參數移除

如果希望在清單渲染中使用漸近過渡，可以透過設定元素的data-index

事件

events 選項移除

#events 選項被棄用。事件處理器現在在 created 鉤子中被註冊。參考詳細範例$dispatch and

遷移指南

##Vue.directive('on').keyCodes#取代

新的簡明配置keyCodes 的方式是透過

// v-on:keyup.f1 不可用
Vue.config.keyCodes.f1 = 112

$dispatch# 和$broadcast ^替換

$dispatch 和$broadcast 已經被棄用。請使用更多簡潔清晰的元件間通訊和更好的狀態管理方案，如：Vuex。

因為基於元件樹結構的事件流方式實在是讓人難以理解，並且在元件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以後讓開發者太痛苦。且$dispatch 和 $broadcast 也沒有解決兄弟組件間的通訊問題。

對於$dispatch 和$broadcast最簡單的升級方式就是：透過使用事件中心，允許元件自由交流，無論元件處於元件樹的哪一層。由於 Vue 實例實作了一個事件分發接口，你可以透過實例化一個空的 Vue 實例來實現這個目的。

這些方法最常見的用途之一是父子元件的相互通訊。在這些情況下，你可以使用 v-on 監聽子元件上 $emit 的變化。這可以允許你很方便的添加事件顯性。

然而，如果是跨多層父子元件溝通的話，$emit 並沒有什麼用。相反，用集中式的事件中間件可以做到簡單的升級。這會讓組件之間的通訊非常順利，即使是兄弟組件。因為 Vue 透過事件發射器介面執行實例，實際上你可以使用一個空的 Vue 實例。

例如，假設我們有todo 的應用結構如下：

Todos
├─ NewTodoInput
└─ Todo
   └─ DeleteTodoButton

可以透過單獨的事件中心管理元件間的通訊：

// 将在各处使用该事件中心
// 组件通过它来通信
var eventHub = new Vue()

然後在元件中，可以使用$emit, $on, $off 分別來分發、監聽、取消監聽事件：

// NewTodoInput
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// DeleteTodoButton
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}

// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

在簡單的情況下這樣做可以替代$dispatch 和$broadcast，但是對於大多數複雜情況，更推薦使用一個專用的狀態管理層如：Vuex。

過濾器

#插入文字以外的篩選器移除

{{ }}
tags)。我們發現在指令 (如：

，v-on等) 中使用篩選器使事情變得更複雜。像 v-for 這樣的列表過濾器最好把處理邏輯當作一個計算屬性放在 js 裡面，這樣就可以在整個模板中重複使用。

總之，能在原生 js 中實現的東西，我們盡量避免引入一個新的符號去重複處理同樣的問題。以下是如何取代Vue 內建過濾器：

取代debounce 過濾器

<input v-on:keyup="doStuff | debounce 500">

methods: {
  doStuff: function () {
    // ...
  }
}

# (也有可能是

throttle) 來直接控制高耗任務。可以這樣來實現上面的功能：

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

範例。

取代

篩選器

就不再這樣寫：

<p v-for="item in items | limitBy 10">{{ item }}</p>

：

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

#取代filterBy

不再這樣寫：

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

在computed 屬性中使用js 內建方法

method：

<p v-for="user in filteredUsers">{{ user.name }}</p>

computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

#取代orderBy 過濾器不這樣寫：

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

而是在computed 屬性中使用

<p v-for="user in orderedUsers">{{ user.name }}</p>

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

篩選器參數符號^變更

#現在篩選器參數形式可以更好地與js 函數呼叫方式一致，因此不用再用空格分隔參數：

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

現在用圓括號括起來並用逗號分隔：

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

text[0].toUpperCase() + text.slice(1)

text.toUpperCase()

text.toLowerCase()

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

'$' + price.toFixed(2)

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

<button class="btn btn-{{ size }}"></button>

<button v-bind:class="'btn btn-' + size"></button>

<button v-bind:class="buttonClasses"></button>

computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}

methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

myElement.appendChild(vm.$el)

myElement.parentNode.insertBefore(vm.$el, myElement)

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

myElement.parentNode.appendChild(vm.$el)

vm.$el.remove()

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

new Vue({
  el: '#app',
  render: function (h) {
    h('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})