欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

vue1.0与2.0有什么区别

发布时间:2019-05-29  编辑:杨雨个人博客网站   点击:   

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。那么它的1.0和2.0有什么区别呢?让我们来看一下。

vue1.0与2.0有什么区别

一、生命周期

1、1.0的生命周期:

周期解释
init组件刚刚被创建,但Data、method等属性还没被计算出来
created组件创建已经完成,但DOM还没被生成出来
beforeCompile模板编译之前
compiled模板编译之后
ready组件准备(平时用得较多)
attached在 vm.$el 插入到DOM时调用
detached在 vm.$el 从 DOM 中删除时调用
beforeDestory组件销毁之前
destoryed组件销毁之后

2、2.0的生命周期

周期解释
beforeCreate组件刚刚被创建,但Data、method等属性还没被计算出来
created组件创建已经完成,但DOM还没被生成出来
beforeMount模板编译之前
mounted模板编译之后,组件准备
beforeUpdate组件更新之前(数据等变动的时候)
updated组件更新之后(数据等变动的时候)
activatedfor keep-alive,组件被激活时调用
deactivatedfor keep-alive,组件被移除时调用
beforeDestory组件销毁之前
destoryed组件销毁之后

2.0生命生命周期变化感觉变得更加语义化一点(有规律可寻,更好记了),而且增加了beforeUpdate、updated、activated、deactivated,删除了attached、detached。

二:过滤器

2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我们自己编写,以下是一个自定义过滤器示例,

Vue.filter('toDou',function(n,a,b){
    return n<10?n+a+b:''+n;
});

三:循环

关于整数循环,1.0的整数循环是从0开始的,2.0的整数循环是从1开始的,下面对比:

//HTML代码<ul id='box'>
    <li v-for='val in 5' v-text='val'></li></ul>

四、片段代码

编写template的时候,2.0必须要用一个根元素(如div)将代码片段包裹起来,否则报错。

之前:   在1.0使用时完全没问题
    <template>
        <h3>我是组件</h3><strong>我是加粗标签</strong>
    </template>
现在:  必须有根元素,包裹住所有的代码
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>

以上只是列举了部分变化,总体来说vue升级到2.0的变化还是没辣么大的,还有一些新变化等爬完坑再来补充

( ω )

以上就是vue1.0与2.0有什么区别的详细内容,更多请关注杨雨个人博客其它相关文章!

本文地址:http://itbyc.com/web/javascript/21157.html
转载请注明出处。
分享是一种快乐,也是一种美德:

上一篇:vue的优点是什么

下一篇:vue-router是什么

博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1