--Vue1.0 course of the interview and the difference between 2.0 and advantages

Asked about recent interview, said there is used vuethat version, the answer vue2, then ask the interviewer continued vue2.0with vue1.0a difference, and it has the advantage of ...... fear which suddenly quiet air ~

Well, learning documenting follows

First, the component modules, it is necessary to have a root element package

vue1.0, The support assembly may be fragmented code, such as:

<template>
    <h1>标题标题</h1>
    <section>我就是所谓文章了</section>
</template>

In vue2.0, the component must have a single root element to wrap our code, such as:

<template>
    <div>
        <h1>标题标题</h1>
        <section>我就是所谓文章了</section>
    </div>
</template>

Second, the life cycle

vue1.0Life cycle:

init            // 初始化
created         // 实例创建，dom未生成
beforeCompile   // 编译之前
compiled        // 编译完成
ready           // 准备 mounted
beforeDestroy   // 销毁前
destroyed       // 销毁完成

vue2.0Life cycle:

beforeCreate    // 创建前 -> init
created         // 实例创建后
beforeMount     // 装载前 -> beforeMount
mounted         // 装载后 -> ready
beforeUpdate    // 组件更新前
updated         // 组件更新后
beforeDestroy   // 组件销毁前
destroyed       // 组件销毁后

Third, circulation

vue1.0You can not add duplicate data, vue2.0the default on the supports.

vue1.0Duplicate data needs to be added, be added track-by="$index", which vue2.0are :key="index"similar. vue2.0And wherein the removed $ index $ key, directly replaced cycle definition.

Fourth, the filter

vue1.0Built-in filter json、 currency, etc., vue2.0all delete it allows developers to defined filters need, as follows:

// 局部
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)
})

Five, prop

vue1.0The prop supports two-way data transfer, vue2.0only one-way transmission allows the parent to the child (sub emit a value passed to the parent)

vue1.0, The inspection data modified to use prop coerce, vue2.0changed using computed, as follows:

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

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

Sixth, instance methods

vue2.0Also removed some examples of the method, as follows:

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

We are read so many, indeed no understanding of version 1.0. Moreover, personal feel to see vue3.0the new features it is more important