最近用vue2.0做了个活动。做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久。。。只能说效率有待提升啊。。。简单总结了一些比较细节的点。

1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉。可以这样写:

         <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有好些地方不一样,写组件的时候可以写一下兼容。如:

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.一些需要在页面打开的时候就作出判断的请求,数据初始化时需要注意处理请求超时的情况。

如BI排序,可以用setInterval 设置一个轮询次数,如果请求还是没有回应则放弃请求,用默认情况处理。
        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渲染模板也是阻塞的过程,下面这段代码可以验证这一点:

       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的路由的时候,不能完全按照官网上的例子。配置好之后,还需要注册一下才可以使用。

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')

  

 最后,别人的框架都是比较易学易用的。打好基础才能创造出让人易学易用的框架。

 

 

vue2.0实践的一些细节的更多相关文章

  1. 《Vue2.0 实践揭秘》终于出版啦!

    不知不觉间在园子开博都两年多了,最近一些园友问最近去哪了为何都没有新的文章了.最近确实发生了很多的事,一是忙工作二就是忙着写书.这还得多些园子的小编,自两年前发表的"架构师修炼"系 ...

  2. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  3. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  4. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

  5. Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统

    最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...

  6. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  7. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  8. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  9. vue2.0 keep-alive最佳实践

    1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- ...

随机推荐

  1. 一步一步使用ABP框架搭建正式项目系列教程

    研究ABP框架好多天了,第一次看到这个框架的名称到现在已经很久了,但由于当时内功有限,看不太懂,所以就只是大概记住了ABP这个名字.最近几天,看到了园友@阳光铭睿的系列ABP教程,又点燃了我内心要研究 ...

  2. ABP文档 - 导航

    文档目录 本节内容: 创建菜单 注册导航供应器 显示菜单 每个web应用都有一些菜单用来在页面/屏幕之间导航,ABP提供了一个通用的基础框架创建并显示菜单给用户. 创建菜单 一个应用可能由不同模块组成 ...

  3. 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. JavaScript 自定义对象

    在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...

  5. 【原】AFNetworking源码阅读(五)

    [原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...

  6. jsp页面无法识别el表达式的解决方案

    今天在写一个springmvc的小demo时,碰到一个问题,在jsp页面中书写为${user.username}的表达式语言,在浏览器页面中仍然显示为${user.username},说明jsp根本不 ...

  7. VB.NET设置控件和窗体的显示级别

    前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...

  8. .Net语言 APP开发平台——Smobiler学习日志:如何快速在手机上实现ContextMenu

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  9. BPM的魅力何在?

    BPM(Business Process Management , 企业流程管理平台) 是带动企业流程自动化的帮 手,也是最能忠实反应出企业作业流程问题症结的系统工具,在管理上,BPM可以让管理者利用 ...

  10. vim的一些常用命令(一)

    先确认在Normal模式下,如不确认,请按几次Esc. :sy on/clear sy表示语法高亮,on是打开.clear是取消. :set go= set表示一般性设置,go是gui option的 ...