vue2.0实践的一些细节
最近用vue2.0做了个活动。做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久。。。只能说效率有待提升啊。。。简单总结了一些比较细节的点。
1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉。可以这样写:
1
2
3
4
5
|
<div class = "yhq_inner" > //占位元素 <template v- if = "true" > //加template则页面加载时就不会显示待编译符号如:{{}} <couponlist :params= "{coupons:ppms.discountModule}" ></couponlist> //请求到数据才会有的一个组件,并把数据传进组件中 </template> </div> |
2.注意使用一些全部的API。
①当数据是后来被更新的(如ajax请求回调),在数据更新后,用nextTick方法更新dom。
②对象不能是 Vue 实例,或者 Vue 实例的根数据对象。所以用对象装载数据时,需要在初始化之前就设好改对象的默认属性。或者,用Vue.set方法后来更新。
更多参考这里~
3.vue2.0和1.0有好些地方不一样,写组件的时候可以写一下兼容。如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
Vue.component( "Infolist" , { props: /^2\./.test(Vue.version) ? { params: { coupons: [], showNum: 2 } } : [ "data" , "sub-data" ], template: "#couponlistTpl" , data: function () { return { data: { itemList: {} } }; }, created: function () { if (/^2\./.test(Vue.version)) { ... } else { ... } }) |
4.调用子组件的方法时,记得为子组件的ref赋值。然后可以在父组件中,类似this.$refs['interestlist'].loadData()这样调用。
5.一些需要在页面打开的时候就作出判断的请求,数据初始化时需要注意处理请求超时的情况。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
if (window._SORT_DATA) { //请求已成功,执行处理 } else { var intvaltime = 0; var sortInterval = setInterval( function () { intvaltime++; if (window._SORT_DATA) { clearInterval(sortInterval); //请求已成功,执行处理 } else if (intvaltime == 4) { clearInterval(sortInterval); //请求达到上限,执行默认处理 } },50); } |
6.vue模板绑定数据时,若改数据不存在的话,一报错就是整个页面死掉。所以一定要将相关数据做默认赋值处理,提高页面容错性。
7.渲染的vue根节点内容过多,比如一个非常长的页面上只有一个大vuewrap,这肯定也会长时间阻塞,因为vue渲染模板也是阻塞的过程,下面这段代码可以验证这一点:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
new Vue({ el: "#vue-wrap" , data: vueData, methods:{ ... }, created: function (){ console.log( 'created' ) }, mounted: function (){ console.log( 'mounted' ) } }); console.log( 'next' ) } //输出顺序 created mounted next ,完全是同步的过程 |
各个钩子的意义可参考这里~.
所以,对于巨大的vuewrap,可以拆成小块并异步执行。否则,性能很可能会降低。
8.如果用vue开发项目,又想引入css框架的话,最好引入一些vue推荐的css框架,如element。如果引入类似semantic这种依赖于jquery或者其他第三方框架库的,又要配置好几个文件,比较麻烦。而且也让项目变得更重。
9.使用vue的路由的时候,不能完全按照官网上的例子。配置好之后,还需要注册一下才可以使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import VueRouter from 'vue-router' Vue.use(ElementUI) Vue.use(VueRouter) const routes = [ { path: '/' , component: Index } ] const router = new VueRouter({ routes }) const app = new Vue({ router, ...App }).$mount( '#app' ) |
最后,别人的框架都是比较易学易用的。打好基础才能创造出让人易学易用的框架。