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

原文地址：https://www.cnblogs.com/hplwc/p/11370654.html