VUE2.0不可忽视的很多变化

news/2024/7/9 23:45:38 标签: vue

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急。然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本。马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了。看了下vue2.0的英文的英文文档,发现相对于vue1.0有很多变化,而且变化不是一般的大。。。。如果一旦项目要升级到vue2.0,那么很多页面要整改,很多组件都不能用了,所以目前的项目打死不能升级。可以通过vue init webpack-simple#1.0安装基于vue1.0版本的vue-cli。

下边来分析下vue2.0几个重要的与自己目前项目相关的变化,纯粹是个人理解,权当了解.

  详细变化请见官方文档分析https://github.com/vuejs/vue/issues/2873

  vue2.0中文官方文档已发布:http://vuefe.cn/guide/

1.目前的项目几乎每个页面都用到了1.0的ready钩子函数,然而2.0已废弃不用,进而使用mounted替换,同时还新增了beforeMount、beforeUpdate、updated等,私以为越来越向react看齐了有木有。。

beforeUpdate的作用是在页面初始渲染视图之后,一旦监测到data发生变化,在变化的数据重新渲染视图之前会触发beforeUpdate钩子函数,这也是重新渲染之前最后修改数据的机会

updated的作用则是在data发生变化渲染更新视图之后触发。

2.同时废弃的还有events、$dispatch、$broadcast,官方推荐使用vuex或者全局的事件驱动,然而废弃的这些方法在vux UI框架中很多地方都有使用,无疑在项目中用到它的地方在2.0版本都会不起作用,甚至会报错。

3.v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记,然后通过this.$refs获取

例如<p ref="a"></p>   获取方法为this.$refs.a 对于自定义组件同样适用

4.$els 是用来获取元素DOM对象,这个也废弃不用,$refs可以起到替代性作用。

5.v-for循环中常用的$index、$key也已不支持使用,trackby被key属性替换。

6.自定义组件中的partial,弃用,这个一直没用到

7.新增 v-once指令

8.新增 propsData

9.新增 render


转载自:http://www.cnblogs.com/dupd/p/5904109.html

因为刚好用到v-el失效,搜索后看到这篇文章,认为很有用,所以记一下,方便以后深入学习查用


http://www.niftyadmin.cn/n/1732654.html

相关文章

如何自定义博客园样式

苦恼 每次看到别人的博客样式都感觉很舒服&#xff0c;很好看。 当自己开通博客后&#xff0c;使用了预置的样式也无法达到自己想要的页面效果&#xff0c;怎么办&#xff1f; 废话不多说&#xff0c;直奔主题 如何设置博客园自定义的样式 还有这样的功能&#xff0c;我怎…

用canvas编写表白动画

<!DOCTYPE html><html><head lang"en"> <meta charset"UTF-8"> <title></title> <script> /*我不相信有天堂&#xff0c;因为我被困在这个地狱的时间太长了*/ </script></head> <body style&…

RocketMQ集群部署配置

https://mp.weixin.qq.com/s?__bizMzU2NjIzNDk5NQ&mid2247483770&idx1&sn854b4ec0982b91a6b7587c1cc71716c3&scene21#wechat_redirect 目标&#xff0c;使用2台机器部署RocketMQ多Master多Slave模式&#xff0c;异步复制集群模式。 第一步&#xff0c;修改/et…

多页和单页模式区别

多页和单页模式区别 webx5 单页模式打开方式&#xff1a;justep.shell.showpage(); 多页模式打开方式&#xff1a;window.loacation.href require.tourl(); 转载自&#xff1a;http://www.cnblogs.com/zw-shi/p/6006827.html

vue2 饿了吗视频实战总结

vue饿了吗实战总结 1、v-el &#xff0c;v-ref 最后都转化为了 ref ref"xxx" a、ref在官网上的解释简单来说就是用来绑定某个dom元素&#xff0c;或者来说用来绑定某个组件&#xff0c;然后在$refs里面调用, b、如果在普通的 DOM 元素上使用&#xff0c;引用指向…

一步步优化JVM四:决定Java堆的大小以及内存占用

到目前为止&#xff0c;还没有做明确的优化工作。只是做了初始化选择工作&#xff0c;比如说&#xff1a;JVM部署模型、JVM运行环境、收集哪些垃圾回收器的信息以及需要遵守垃圾回收原则。这一步将介绍如何评估应用需要的内存大小以及Java堆大小。首先需要判断出应用存活的数据…

tabindex属性

1. tabindex的用法&#xff1a; 可以设置tab键在控件中的移动顺序。 以下元素支持tabindex属性&#xff1a;<a> <input> <textarea> <area> <select> <button> <select>。 tabindex的值可以设置为0到32767之间的整数值。默认的tabin…

HTML dl 标签

<html><body><h2>一个定义列表&#xff1a;</h2><dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd></dl><…