從 Vue 1.x 遷移到2.x - vue.js

安裝vue migration工具

npm install -g vue-migration-helper

vue-migration-helper src //掃描src目錄下的所有文件

https://www.npmjs.com/package/vue-migration-helper

官方遷移文檔

http://cn.vuejs.org/v2/guide/migration.html

1. ready生命周期方法被移除(包括組件及頁面),替換為:

mounted: function () {

this.$nextTick(function () {

//代碼保證this.$el在document中

})

}

2. v-for的變更

遍歷數組:包含index時,之前遍歷數組時的參數順序是(index, value)。現在是(value, index),來和JavaScript的原生數組方法(例如forEach和map)保持一致。

遍歷對象:當包含key時,之前遍歷對象的參數順序是(key, value)。現在是(value, key),來和常見的對象迭代器(例如lodash)保持一致。

*已經移除了$index和$key

track-by已經替換為key,原來:

track-by="id">,現在

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

4.Props現在只能單向傳遞。為了對父組件產生反向影響,子組件需要顯式地傳遞一個事件而不是依賴于隱式地雙向綁定。

5.修改Props棄用

組件內修改prop是反模式(不推薦的)的。比如,先聲明一個prop,然后在組件中通過this.myProp =

'someOtherValue'改變prop的值。根據渲染機制,當父組件重新渲染時,子組件的內部prop值也將被覆蓋。

大多數情況下,改變prop值可以用以下選項替代:

通過data屬性,用prop去設置一個data屬性的默認值。

通過computed屬性。

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

現在在組件上使用v-on只會監聽自定義事件(組件用$emit觸發的事件)。如果要監聽根元素的原生事件,可以使用.native修飾符,比如:

7.帶有-debounce-的-v-model移除

http://cn.vuejs.org/v2/guide/migration.html#帶有-debounce-的-v-model移除

8.帶有!importantv-bind:style移除

這樣寫將失效:

hello

如果確實需要覆蓋其它的!important,最好用字符串形式去寫:

hello

9.v-elv-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結合的時候是很有用的:

10.自定義指令簡化

在新版中,指令的使用范圍已經大大減小了:現在指令僅僅被用于低級的DOM操作。大多數情況下,最好是把模板作為代碼復用的抽象層。

顯要的改變有如下幾點:

指令不再擁有實例。意思是,在指令的鉤子函數中不再擁有實例的this。替代的是,你可以在參數中接受你需要的任何數據。如果確實需要,可以通過el來訪問實例。

類似acceptStatement,deep,priority等都已被棄用。為了替換雙向指令,見示例。

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

幸運的是,新鉤子更加簡單,更加容易掌握。詳見自定義指令指南。

http://cn.vuejs.org/v2/guide/custom-directive.html

11.指令.literal修飾符移除

.literal修飾符已經被移除,為了獲取一樣的功能,可以簡單地提供字符串修飾符作為值。

示例,如下更改:

只是:

12.屬性內部的計算插值移除

屬性內部的計算插值已經不能再使用了:

< div class="btn btn-{{ size }}" >

應該寫成行內表達式:

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

或者計算屬性:

computed: {

buttonClasses: function () {

return 'btn btn-' + size

}

}

13.HTML計算插值移除

HTML的計算插值({{{ foo }}})已經移除,取代的是v-html指令.

14.替換vm.$data移除

現在禁止替換實例的$data。這樣防止了響應系統的一些極端情況并且讓組件狀態更加可控可預測(特別是對于存在類型檢查的系統)。

過濾器

1.過濾器參數符號變更

現在過濾器參數形式可以更好地與js函數調用方式一致,因此不用再用空格分隔參數:

{{ date | formatDate 'YY-MM-DD' timeZone }}

現在用圓括號括起來并用逗號分隔:

{{ date | formatDate('YY-MM-DD', timeZone) }}

2.現在過濾器只能用在插入文本中({{ }}tags)。我們發現在指令(如:v-model,v-on等)中使用過濾器使事情變得更復雜。像v-for這樣的列表過濾器最好把處理邏輯作為一個計算屬性放在js里面,這樣就可以在整個模板中復用。

總之,能在原生js中實現的東西,我們盡量避免引入一個新的符號去重復處理同樣的問題。

3.內置的過濾器被移除:filterBylimitBydebounceorderBycurrencyuppercasejson等

自己在遷移項目時遇到的坑:

1.0v-model可以直接加過濾器,2.0里取消了,不可以在v-model里增加過濾

頁面上一些書寫錯誤可能就導致Failed to

generate render function渲染功能失敗,可能是因為一個逗號或者別的書寫錯誤都可能導致渲染失敗

vue2.0不支持vueTouch

v-for="item in coupons|filterBy 1 in 'isAvailable'"現在寫法v-for="item in coupons"

v-if="item.isAvailable==1"

如果在組件中定義了this.$emit('close'),在組件外引用的時候一點要@close="showArea

= false"不然不起作用

在輸入框組件上寫v-model無效先聚焦一下才能用

一定要做空指針判斷

傳到組件里的變量不能做運算,帖子詳情頁評論數增加問題,不能實時增加,在回調里增加

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,081評論 0 29
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,107評論 4 129
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,245評論 0 6
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,991評論 19 139
  • 如果你曾經的靈魂住進了現在的身體,她會不會對你失望?看了《二十八歲未成年》之后,我突然想問自己這樣一個問題。 我曾...
    Tractor閱讀 199評論 0 0