vuejs1.0與2.0的差別是什麼-前端問答-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是:　

<template>
  <h3>我是组件</h3><strong>我是加粗标签</strong>
</template>

登入後複製

VUE2. 0:必須有根元素,包覆所有的程式碼

<template id="aaa">
  <div>
    <h3>我是组件</h3>
      <strong>我是加粗标签</strong>
   </div>
</template>

登入後複製

二、元件定義方式不同

VUE1.0定義元件的方式有:

Vue.extend 這種方式，在2.0裡面有，但是有一些改動

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

登入後複製

VUE2.0定義組件的方式則更為簡單

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

登入後複製

三、生命週期的變化

1、1.0的生命週期:

##週期解釋init元件剛剛被創建，但Data、method等屬性還沒被計算出來created元件建立已經完成，但DOM還沒被產生出來beforeCompile範本編譯之前compiled模板編譯之後#ready元件準備（平常用得較多）attached在vm.$el 插入DOM時呼叫##detachedbeforeDestory##destoryed#元件銷毀之後下圖是官方關於1.0生命週期的流程圖：








在vm.$el從DOM 刪除時呼叫
#元件銷毀之前

# #2、2.0的生命週期

vuejs1.0與2.0的差別是什麼

#解釋##beforeCreate元件剛剛被創建，但Data、method等屬性還沒被計算出來#created元件建立已經完成，但DOM還沒被生成出來beforeMount模板編譯之前mounted模板編譯之後,元件準備beforeUpdate元件更新之前（資料等變動的時候）updated元件更新之後（資料等變動的時候）activatedfor keep-alive,元件被啟動時呼叫deactivatedfor keep-alive,元件被移除時呼叫beforeDestory元件銷毀之前 destoryed元件銷毀之後

下图是官方关于2.0生命周期的流程图：
vuejs1.0與2.0的差別是什麼

借用一位大神的图来总结他们的变化：
vuejs1.0與2.0的差別是什麼

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

四、过滤器

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

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

登入後複製

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

之前调用:       {{msg | mimi &#39;12&#39; &#39;5&#39;}}
现在调用:   {{msg | mimi(&#39;12&#39;,&#39;5&#39;)}}

登入後複製

五、循环

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

vuejs1.0與2.0的差別是什麼

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

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

登入後複製

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

//HTML代码
<ul id=&#39;box&#39;>
    <li v-for=&#39;val in 5&#39; v-text=&#39;val&#39;></li>
</ul>

登入後複製

运行结果：
vuejs1.0與2.0的差別是什麼

vuejs1.0與2.0的差別是什麼

四、片段代码

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

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

登入後複製