vue1.x 迁移策略

 

vue1.x

大部分可以通过查找和替换 (find-and-replace) 来实现升级

只有 Vue Router 2 与 Vue 2 保持兼容，所以 Vue Router 是需要升级的

对于 Vuex ，版本 0.8+ 与 Vue 2 保持兼容，所以部分不必强制升级

 

 

 

区别

模板/view

每个组件必须只有一个根元素。不再允许片段实例

 

v-for 

现在是 (value, index) ，来和 JavaScript 的原生数组方法 (例如 forEach 和 map) 保持一致

现在是 (value, name)，来和常见的对象迭代器 (例如 lodash) 保持一致。

移除了 $index 和 $key 这两个隐式声明变量

track-by 已经替换为 key，它的工作方式与其他属性一样

v-for(val in 10 )取值范围现在从 1 开始，到 10 结束

 

 

 

v-bind

Props 现在只能单向传递。为了对父组件产生反向影响。

子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。

只有 null, undefined，空字符串和 false 被看作是假。

对于其它钩子函数 (如 v-if 和 v-show)，他们依然遵循 js 对真假值判断的一般规则。

 

监听root

//如果要监听根元素的原生事件，可以使用 .native 修饰符
<my-component v-on:click.native="doSomething"></my-component>

 

 

Vue 选项参数

如果需要检查 prop 的值，创建一个内部的 computed 值，而不再在 props 内部去定义

//vue1.x

props: {

  username: {

    type: String,

    coerce: function (value) {

      return value

        .toLowerCase()

        .replace(/\s+/, '-')

    }

  }

}



//vue2.x

props: {

  username: String,

},

computed: {

  normalizedUsername: function () {

    return this.username

      .toLowerCase()

      .replace(/\s+/, '-')

  }

}

生命周期函数

使用 beforeCreate 钩子函数替代 init

使用 created 钩子函数替代 beforeCompile

使用 mounted 钩子函数替代 compiled

使用其他钩子函数内置的 DOM 检测 (DOM check) 方法

// vue1.x

attached: function () {

  doSomething()

}

//vue2.x

mounted: function () {

  this.$nextTick(function () {

    doSomething()

  })

}

// vue1.x

detached: function () {

  doSomething()

}

//vue2.x

destroyed: function () {

  this.$nextTick(function () {

    doSomething()

  })

}