菜单 学习猿地 - LMONKEY

 vue1和vue2的区别是什么?

vue1和vue2的区别是什么?

Alen profile image Alen ・1 min read

vue1和vue2的区别

模板

v2 每个组件只允许有一个根元素,v1 允许一个组件有多个根元素

生命周期函数

vue1.0

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

vue2.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。

过滤器

vue1.0

  • 自带过滤器。

  • 定义方式:vue.filter('过滤器名字',fn)

  • 调用方式:{{msg | filterName'12' '5'}}

vue2.0

  • 2.0移除了自带过滤器,但是保留了自定义过滤器的功能。

  • 定义方式:vue.filter('过滤器名字',fn)

  • 调用方式:{{msg | filterName('12','5')}}

以下是一个自定义过滤器示例:

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>

props

coerce prop

v1 中可以在 prop 内部定义 coerce 方法,用于将 prop 的值传递给组件前进行一些计算,组件内部得到的 prop 的值是 coerce 方法返回的值。

propG: {
  coerce: function (val) {
    return val + '' // cast the value to string
  }
}

v2 使用 computed 替代

修改 prop

v1 中可以修改 prop,v2 已经弃用了

根实例的 props

v1 中根实例可以有 props 属性,v2 中替代的是 propsData

计算属性

v2 中 computed 计算属性默认会被缓存,v1 中可以为计算属性添加一个 cache 属性,设置为 false,则会关闭缓存验证。

vue 指令

v-bind

v-bind 指令对于真假值的判断,v1 遵循 js 的一般规则,v2 中则只有 null、undefined、false 被看作是假,0 和 '' 则被视为真值。

此规则只限于 v-bind 指令,v-if 和 v-show 仍遵循 js 的规则

v-on

v1 中 v-on 指令可以监听原生事件, v2 中只监听自定义事件,如果需要监听原生事件,需要加上 .native 修饰符。

v-model

  • lazy、number 参数

v2 中的 .lazy、.number 修饰符,在 v1 中以标签属性的形式出现

<input v-model="name" lazy>
<input v-model="age" type="number" number>
  • v-model 的初值

v2 中 v-model 的初值就是所绑定的 data 的值,但是在 v1 中,会用当前标签元素的 value 作为初值。

v-bind:style

v1 中的 v-bind:style 可以添加 !important,v2 中必须写成字符串形式。如下

// v1
<p v-bind:style="{ color: myColor + ' !important' }">hello</p>
// v2
<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

v-el 和 v-ref

v1 中可以分别使用 v-el 为 DOM 元素、v-ref 为 component 指定一个 name,方便调用该元素或组件实例,v2 中弃用了这两个指令,统一使用 ref='name' 的方式。

v-show 与 v-else 一起使用

v1 中允许 v-show 与 v-else 一起使用,如下

// v1
<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>
// v2
<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

评论 (0)