vue1升级vue2

最近将vue1项目升级到vue2，在升级过程中踩过不少坑，在此记录下来，不当之处欢迎指正。

body空白(router-view未显示)

• 在 webpack 配置中添加下面的别名，如果不想使用独立构建即不添加下述别名，则记得使用vue-loader或vueify(注意其版本是支持vue2的)。具体可参阅官网(安装->NPM下的独立构建vs运行时构建）https://cn.vuejs.org/v2/guide/：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

router.push失效

• 使用router.push未跳转到指定路径，经排查发现router.push在new Vue({el: '#app', router: router, render: h => h(App)})前是不起作用的，移到后面就ok了。

计算属性中$refs未定义

• 在计算属性中引用到 refs却是undefined，这是因为 refs只在组件渲染完成后才填充且是非响应式的。建议避免在模版或计算属性中使用 $refs，采用watch或在mounted方法中显示调用。参考https://cn.vuejs.org/v2/guide/components.html#子组件索引

.sync修饰符

• 在vue2.0中移除了.sync，只是单向数据流。在vue2.3.0中重新引入了.sync作为一个编译时语法糖存在，在子组件中需要更新父组件foo的值式需要显式触发一个更新事件：this.$emit(‘update:foo’, newValue)。

子组件调用父组件方法

• 在父组件中使用@click=”clicked”，在子组件中显式调用this.$emit(‘click’)。

最后建议查阅官网https://cn.vuejs.org/，可以对比一下不同语言版本，或许一些微小差异就是解决issue的方法。