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

      

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

     

     

  • 相关阅读:
    文件参数Python读取wav格式文件
    电子工程术语和定义列表,按字母顺序排列
    MAC地址加减1算法
    uboot通过kernel command line 动态分区 CONFIG_MTD_CMDLINE_PARTS
    c调用shell脚本
    busybox提示can't access tty.job control turned off
    cut命令如何截取以空格隔开的字段
    DS28E01100
    busybox 中的ntpd使用
    Debugfs
  • 原文地址:https://www.cnblogs.com/LuckyWinty/p/6246698.html
Copyright © 2011-2022 走看看