vue1.0和vue2.0的区别 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue1.0和vue2.0的区别

2019-9-3 释然 前端及开发文章及欣赏


一、生命周期钩子的差别

    vue1.0的生命周期如下:

    

    

    vue2.0的生命周期如下:

    

    

    用一张表格来做对比:

    

二、代码片段

    在vue1.0中可以在template编写时出现:

<template>
   <div>第一行</div>
   <div>第二行</div>
</template>
    在vue2.0中在template编写时,必须只有一个根元素,否则会报错。

<template>
   <div id='root'>
      <div>这是第一行</div>
      <div>这是第二行</div>
   </div>
</template>
三、for循环遍历数组、对象时的参数顺序的变更,遍历数组之前是(index,value),现在是(value,index);对象的之前是(key,value),现在是(value,key).

    移除了$index和$key两个隐式声明变量,以便在v-for中显式声明。

    之前的track-by已经替换为key来代替

    v-for的循环范围也发生了改变,之前v-for='item in 10',范围为0-9,现在是:1-10。



四、Props 的参数

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

    之前是:

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }
}
    现在改成用computed来代替:
props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, '-')
  }
}
    这样有一些好处:

        可以对保持原始 prop 值的操作权限。

        通过给予验证后的值一个不同的命名,强制开发者使用显式申明。

    2、twoWay参数的移除,v-bind 的 .once和.sync 修饰符 移除

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

    3、

五、计算属性

cache: false 弃用,在 Vue 未来的大版本中,计算属性的缓存验证将会被移除。把不缓存的计算属性转换为方法可以得到和之前相同的结果。    
六、Built-In 指令

v-bind 真/假值 变更;在2.0中使用 v-bind 时,只有 null, undefined,和 false 被看作是假。这意味着,0 和空字符串将被作为真值渲染。比如 v-bind:draggable="''" 将被渲染为 draggable="true";
用 v-on 监听原生事件 变更,现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符;
带有 debounce 的 v-model移除;
使用 lazy 或者 number 参数的 v-model ,替换;
使用内联 value的v-model 移除;
v-model with v-for Iterated Primitive Values 移除;
带有 !important 的v-bind:style 移除;
v-el 和v-ref 替换,简单起见,v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用;
v-show后面使用v-else 移除。    
七、自定义指令

自定义指令 简化;    
八、过渡

transition 参数 替换,Vue 的过渡系统有了彻底的改变,现在通过使用 <transition> 和 <transition-group> 来包裹元素实现过渡效果,而不再使用 transition 属性;
可复用的过渡 Vue.transition 替换,在新的过渡系统中,可以通过模板复用过渡效果;
过渡的 stagger 参数 移除。    
九、事件

events 选项 移除,事件处理器现在在created钩子中被注册;
events 选项 移除Vue.directive('on').keyCodes 替换,新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes;
$dispatch 和 $broadcast 替换,可使用Vuex。    
十、过滤器

插入文本之外的过滤器 移除;
过滤器参数符号 变更   现在过滤器参数形式可以更好地与 js 函数调用方式一致,因此不用再用空格分隔参数,现在用圆括号括起来并用逗号分隔。
内置文本过滤器 移除,替换 json 过滤器;替换 capitalize 过滤器;替换 uppercase 过滤器;替换 lowercase 过滤器;替换 pluralize 过滤器。
双向过滤器 替换。
十一、插槽

重名的插槽 移除;
通过具名 <slot> 插入的片段不再保持 slot 的参数。请用一个包裹元素来控制样式    
十二、特殊属性

keep-alive 属性替换,不再是一个特殊属性,而是一个包裹组件。    
十三、计算插值

 属性内部的计算插值 移除;
HTML计算插值 移除,取代的是v-html指令;
单次绑定替换成v-once。  
十四、响应

vm.$watch   换成    update生命周期钩子;
Array.prototype.$set弃用,用Vue.set代替
Array.prototype.$remove 移除  用 Array.prototype.splice 替代;
Vue.set 和 Vue.delete 移除;
替换vm.$data 移除;
vm.$get 移除,可以直接取回响应数据。
十五、围绕DOM的实例方法

vm.$appendTo 移除;
vm.$before 移除;
vm.$after 移除;
vm.$remove 移除。    
十六、底层实例方法

vm.$eval 移除;
vm.$interpolate 移除;
vm.$log 移除    
十七、实例DOM选项

replace: false 移除,现在组件总是会替换掉他们被绑定的元素。为了模仿,可以用一个将要替换元素类似的元素将根组件包裹起来。    
十八、全局配置

Vue.config.debug移除,因为警告信息将默认在堆栈信息里输出;
Vue.config.async移除,异步操作现在需要渲染性能的支持;
Vue.config.delimiters移除,可以在使用自定义分隔符时避免影响第三方模板;
Vue.config.unsafeDelimiters移除,HTML的插值替换为v-html。    
十九、全局API

带el的Vue.extend移除;
Vue.elementDirective移除;
Vue.partial移除。

标签: vue1.0和vue2.0的区别 « 图解WWDC 设计分会:映射与可供性 | 帝皇彩票官网佐藤可士和的设计思路大揭秘»


蓝蓝 http://www.bjhbys.com

  1. 2019年11月(3)
  2. 2019年10月(53)
  3. 2019年9月(48)
  4. 2019年8月(63)
  5. 2019年7月(59)
  6. 2019年6月(59)
  7. 2019年5月(31)
  8. 2019年4月(37)
  9. 2019年3月(43)
  10. 2019年2月(26)
  11. 2019年1月(45)
  12. 2018年12月(41)
  13. 2018年11月(40)
  14. 2018年10月(29)
  15. 帝皇彩票官网2018年9月(40)
  16. 2018年8月(87)
  17. 2018年7月(107)
  18. 2018年6月(86)
  19. 帝皇彩票官网2018年5月(110)
  20. 帝皇彩票官网2018年4月(40)
  21. 2018年3月(35)
  22. 2017年8月(35)
  23. 帝皇彩票官网2017年7月(45)
  24. 2017年6月(7)
  25. 2017年5月(27)
  26. 帝皇彩票官网2017年4月(51)
  27. 2017年3月(70)
  28. 2017年2月(65)
  29. 2017年1月(69)
  30. 2016年12月(55)
  31. 2016年11月(111)
  32. 2016年10月(92)
  33. 2016年9月(53)
  34. 2016年8月(9)
  35. 2016年7月(4)
  36. 2016年6月(9)
  37. 2016年3月(19)
  38. 帝皇彩票官网2016年2月(26)
  39. 2016年1月(30)
  40. 2015年12月(33)
  41. 2015年11月(35)
  42. 2015年10月(46)
  43. 2015年9月(43)
  44. 2015年8月(40)
  45. 帝皇彩票官网2015年7月(33)
  46. 2015年6月(46)
  47. 2015年5月(58)
  48. 2015年4月(70)
  49. 帝皇彩票官网2015年3月(55)
  50. 2015年2月(17)
  51. 2015年1月(33)
  52. 2014年12月(21)
  53. 2014年11月(84)
  54. 2014年10月(94)
  55. 2014年9月(6)
  56. 2014年8月(1)
  57. 2014年7月(13)
  58. 2014年6月(66)
  59. 2014年5月(99)
  60. 2014年4月(88)
  61. 2014年3月(102)
  62. 2014年2月(68)
  63. 帝皇彩票官网2014年1月(83)
  64. 帝皇彩票官网2013年12月(106)
  65. 2013年11月(112)
  66. 2013年10月(61)
  67. 2013年9月(20)
  68. 帝皇彩票官网2013年7月(13)
  69. 2013年6月(27)
  70. 2013年5月(48)
  71. 2013年4月(39)
  72. 2013年3月(8)
  73. 2013年2月(20)
  74. 2013年1月(31)
  75. 2012年12月(33)
  76. 2012年11月(31)
  77. 2012年10月(23)
  78. 2012年9月(8)
  79. 2012年7月(14)
  80. 2012年6月(15)
  81. 2012年5月(31)
  82. 2012年4月(24)
  83. 2012年2月(4)
  84. 2012年1月(8)
  85. 帝皇彩票官网2011年12月(35)
  86. 2011年11月(32)
  87. 帝皇彩票官网2011年10月(13)
  88. 2011年8月(1)
  89. 2011年6月(1)
订阅Rss
帝皇彩票官网 迪士尼彩乐园 帝皇彩票平台 迪士尼彩乐园网址 状元彩票开奖 吉利彩票登陆 迪士尼彩乐园官方网址 桔子彩票平台 桔子彩票平台 吉利彩票开户