zoukankan      html  css  js  c++  java
  • vue2.0实践的一些细节

    最近用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')
    

      

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

     

     

  • 相关阅读:
    out/host/linuxx86/obj/EXECUTABLES/aapt_intermediates/aapt 64 32 操作系统
    linux 查看路由器 电脑主机 端口号 占用
    linux proc进程 pid stat statm status id 目录 解析 内存使用
    linux vim 设置大全详解
    ubuntu subclipse svn no libsvnjavahl1 in java.library.path no svnjavahl1 in java.library.path no s
    win7 安装 ubuntu 双系统 详解 easybcd 工具 不能进入 ubuntu 界面
    Atitit.json xml 序列化循环引用解决方案json
    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
    Atitit.跨语言  文件夹与文件的io操作集合  草案
    Atitit.atijson 类库的新特性设计与实现 v3 q31
  • 原文地址:https://www.cnblogs.com/LuckyWinty/p/6246698.html
Copyright © 2011-2022 走看看