最近面试中有被问到说用的是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
的新特性更重要吧