面试历程——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的新特性更重要吧