美文网首页
从 Vue 1.x 迁移到2.x - vue.js

从 Vue 1.x 迁移到2.x - vue.js

作者: AlisaMfz | 来源:发表于2017-04-05 17:09 被阅读206次

    安装vue migration工具

    npm install -g vue-migration-helper

    vue-migration-helper src //扫描src目录下的所有文件

    https://www.npmjs.com/package/vue-migration-helper

    官方迁移文档

    http://cn.vuejs.org/v2/guide/migration.html

    1. ready生命周期方法被移除(包括组件及页面),替换为:

    mounted: function () {

    this.$nextTick(function () {

    //代码保证this.$el在document中

    })

    }

    2. v-for的变更

    遍历数组:包含index时,之前遍历数组时的参数顺序是(index, value)。现在是(value, index),来和JavaScript的原生数组方法(例如forEach和map)保持一致。

    遍历对象:当包含key时,之前遍历对象的参数顺序是(key, value)。现在是(value, key),来和常见的对象迭代器(例如lodash)保持一致。

    *已经移除了$index和$key

    track-by已经替换为key,原来:

    track-by="id">,现在

    3. v-bind的.once和.sync修饰符移除

    4.Props现在只能单向传递。为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。

    5.修改Props弃用

    组件内修改prop是反模式(不推荐的)的。比如,先声明一个prop,然后在组件中通过this.myProp =

    'someOtherValue'改变prop的值。根据渲染机制,当父组件重新渲染时,子组件的内部prop值也将被覆盖。

    大多数情况下,改变prop值可以用以下选项替代:

    通过data属性,用prop去设置一个data属性的默认值。

    通过computed属性。

    6.用v-on监听原生事件变更

    现在在组件上使用v-on只会监听自定义事件(组件用$emit触发的事件)。如果要监听根元素的原生事件,可以使用.native修饰符,比如:

    7.带有-debounce-的-v-model移除

    http://cn.vuejs.org/v2/guide/migration.html#带有-debounce-的-v-model移除

    8.带有!importantv-bind:style移除

    这样写将失效:

    hello

    如果确实需要覆盖其它的!important,最好用字符串形式去写:

    hello

    9.v-elv-ref替换

    简单起见,v-el和v-ref合并为一个ref属性了,可以在组件实例中通过$refs来调用。这意味着v-el:my-element将写成这样:ref="myElement",v-ref:my-component变成了这样:ref="myComponent"。绑定在一般元素上时,ref指DOM元素,绑定在组件上时,ref为一组件实例。

    因为v-ref不再是一个指令了而是一个特殊的属性,它也可以被动态定义了。这样在和v-for结合的时候是很有用的:

    10.自定义指令简化

    在新版中,指令的使用范围已经大大减小了:现在指令仅仅被用于低级的DOM操作。大多数情况下,最好是把模板作为代码复用的抽象层。

    显要的改变有如下几点:

    指令不再拥有实例。意思是,在指令的钩子函数中不再拥有实例的this。替代的是,你可以在参数中接受你需要的任何数据。如果确实需要,可以通过el来访问实例。

    类似acceptStatement,deep,priority等都已被弃用。为了替换双向指令,见示例。

    现在有些钩子的意义和以前不一样了,并且多了两个钩子函数。

    幸运的是,新钩子更加简单,更加容易掌握。详见自定义指令指南。

    http://cn.vuejs.org/v2/guide/custom-directive.html

    11.指令.literal修饰符移除

    .literal修饰符已经被移除,为了获取一样的功能,可以简单地提供字符串修饰符作为值。

    示例,如下更改:

    只是:

    12.属性内部的计算插值移除

    属性内部的计算插值已经不能再使用了:

    < div class="btn btn-{{ size }}" >

    应该写成行内表达式:

    < div v-bind:class="'btn btn-'+ size " >

    或者计算属性:

    computed: {

    buttonClasses: function () {

    return 'btn btn-' + size

    }

    }

    13.HTML计算插值移除

    HTML的计算插值({{{ foo }}})已经移除,取代的是v-html指令.

    14.替换vm.$data移除

    现在禁止替换实例的$data。这样防止了响应系统的一些极端情况并且让组件状态更加可控可预测(特别是对于存在类型检查的系统)。

    过滤器

    1.过滤器参数符号变更

    现在过滤器参数形式可以更好地与js函数调用方式一致,因此不用再用空格分隔参数:

    {{ date | formatDate 'YY-MM-DD' timeZone }}

    现在用圆括号括起来并用逗号分隔:

    {{ date | formatDate('YY-MM-DD', timeZone) }}

    2.现在过滤器只能用在插入文本中({{ }}tags)。我们发现在指令(如:v-model,v-on等)中使用过滤器使事情变得更复杂。像v-for这样的列表过滤器最好把处理逻辑作为一个计算属性放在js里面,这样就可以在整个模板中复用。

    总之,能在原生js中实现的东西,我们尽量避免引入一个新的符号去重复处理同样的问题。

    3.内置的过滤器被移除:filterBylimitBydebounceorderBycurrencyuppercasejson等

    自己在迁移项目时遇到的坑:

    1.0v-model可以直接加过滤器,2.0里取消了,不可以在v-model里增加过滤

    页面上一些书写错误可能就导致Failed to

    generate render function渲染功能失败,可能是因为一个逗号或者别的书写错误都可能导致渲染失败

    vue2.0不支持vueTouch

    v-for="item in coupons|filterBy 1 in 'isAvailable'"现在写法v-for="item in coupons"

    v-if="item.isAvailable==1"

    如果在组件中定义了this.$emit('close'),在组件外引用的时候一点要@close="showArea

    = false"不然不起作用

    在输入框组件上写v-model无效先聚焦一下才能用

    一定要做空指针判断

    传到组件里的变量不能做运算,帖子详情页评论数增加问题,不能实时增加,在回调里增加

    相关文章

      网友评论

          本文标题:从 Vue 1.x 迁移到2.x - vue.js

          本文链接:https://www.haomeiwen.com/subject/wvlxattx.html