0

0

vuejs1.0与2.0的区别是什么

青灯夜游

青灯夜游

发布时间:2021-09-22 19:16:02

|

2923人浏览过

|

来源于php中文网

原创

区别:1、VUE2.0中必须用根元素包裹住所有的代码,VUE1.0中不用。2、组件定义方式不同。3、生命周期函数不同。4、vue2.0将vue1.0中所有自带的过滤器都删除了,vue2.0要使用过滤器需要自定义,而vue1.0不用。

vuejs1.0与2.0的区别是什么

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

一、在每个组件模板,不在支持片段代码

VUE1.0是: 

VUE2.0:必须有根元素,包裹住所有的代码

立即学习前端免费学习笔记(深入)”;

二、组件定义方式不同

VUE1.0定义组件的方式有:

Vue.extend            这种方式,在2.0里面有,但是有一些改动

Vue.component(组件名称,{  在2.0继续能用
  data(){}
  methods:{}
  template:
});

VUE2.0定义组件的方式则更为简单

var Home={
    template:''    ->  相当于Vue.extend()
};

三、生命周期的变化

1、1.0的生命周期:

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

下图是官方关于1.0生命周期的流程图:

vue1.0生命周期

2、2.0的生命周期

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

下图是官方关于2.0生命周期的流程图:
vue2.0生命周期

借用一位大神的图来总结他们的变化:
生命周期区别

牛NIUCMS本地O2O系统
牛NIUCMS本地O2O系统

牛NIUCMS本地O2O系统是一个以php+mysql进行开发的o2o网站系统。NIUCMS是一款强大的网站管理系统。支持智慧城市、智慧小区、智慧乡村、本地生活门户、本地O2O平台的构建。请注意以下几点:1、这套源码必须要服务器支持伪静态,是支持.htaccess规则的伪静态,一般Apache服务器支持,别搞的下载回去以后说什么缺 少文件,其实源码并非缺少文件。2、这套源码请在php 5.4环境下

下载

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;
});

如果想展示JSON数据,不需要调用过滤器了,框架会自动帮我们解析出来;
2.0过滤器的传参方式不是以前的方式,是以函数传参的方式,下面示例:

之前调用:       {{msg | mimi '12' '5'}}
现在调用:   {{msg | mimi('12','5')}}

五、循环

刚学vue1.0的人可能会碰到一个错误信息: 

重复数据错误

这里提示我们要使用tranck-by=”$index”,这个属性也可以帮我们提高for循环的性能,而在2.0,使用重复数据将不会报错,同时也去掉了一些隐式变量如:index、key,那我们如果要用到这些数据则可以通过ES6的语法来获取

v-for="(val,index) in array"

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

//HTML代码

运行结果:
1.0运行结果

2.0运行结果

四、片段代码

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

之前:   在1.0使用时完全没问题
    
现在:  必须有根元素,包裹住所有的代码
    

相关推荐:《vue.js教程

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 6.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号