面試歷程——vue1.0和2.0的區別和優點

最近面試中有被問到說用的是vue的那個版本，答曰vue2，然后面試官繼續問了vue2.0與vue1.0的區別，以及其具有哪些優點......最怕空氣突然安靜~~

好的，學習整理記錄如下

一、組件模塊中，需要有一個根元素包裹

vue1.0中，組件可以支持片段式的代碼，如：

<template>
	<h1>標題標題</h1>
	<section>我就是所謂文章了</section>
</template>

而在vue2.0中，組件必須要有着一個根元素來包裹我們的代碼，如：

<template>
	<div>
        <h1>標題標題</h1>
		<section>我就是所謂文章了</section>
    </div>
</template>

二、生命周期

vue1.0的生命周期：

init			// 初始化
created			// 實例創建，dom未生成
beforeCompile	// 編譯之前
compiled		// 編譯完成
ready			// 准備 mounted
beforeDestroy	// 銷毀前
destroyed		// 銷毀完成

vue2.0的生命周期：

beforeCreate	// 創建前 -> init
created			// 實例創建后
beforeMount		// 裝載前 -> beforeMount
mounted			// 裝載后 -> ready
beforeUpdate	// 組件更新前
updated			// 組件更新后
beforeDestroy	// 組件銷毀前
destroyed		// 組件銷毀后

三、循環

vue1.0是無法添加重復數據，vue2.0是默認就支持的。

vue1.0需要添加重復數據時，需要添加track-by="$index"，這與vue2.0中的:key="index"類似。vue2.0去掉了其中$index和$key，直接換成循環定義。

四、過濾器

vue1.0中自帶過濾器json、 currency等，vue2.0將其全部刪除，讓開發者自定義需要的過濾器，如下：

// 局部
filters: {
	capitalize: function (value) {
		if (!value) return ''
		value = value.toString()
		return value.charAt(0).toUpperCase() + value.slice(1)
	}
}


// 全局
Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})

五、prop

vue1.0中prop是支持雙向數據傳遞的，vue2.0只允許父向子單向傳遞（子向父傳遞值用emit）

vue1.0中，對prop數據進行檢查修改使用coerce，vue2.0改成使用computed，如下：

// vue1.0
prop: {
	price: {
		type: String,
		coerce: function(val){
			return '$' + val
		}
	}
}

// vue2.0
prop: {
	price: String
},
computed: {
	newPrice () {
		return '$' + this.price
	}
}

六、實例方法

vue2.0還刪除了一些實例化方法，如下：

vm.$appendTo
vm.$before
vm.$after
vm.$remove
vm.$eval
vm.$interpolate
vm.$log

暫時看了這么多，確實對1.0的版本沒什么了解。而且，個人覺得看vue3.0的新特性更重要吧