vue2.0实践的一些细节  

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

如BI排序，可以用setInterval 设置一个轮询次数，如果请求还是没有回应则放弃请求，用默认情况处理。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

if(window._SORT_DATA) {

    //请求已成功，执行处理

} else{

    varintvaltime = 0;

    varsortInterval = setInterval(function() {

        intvaltime++;

        if(window._SORT_DATA) {

            clearInterval(sortInterval);

            //请求已成功，执行处理

        } elseif(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

    newVue({

              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

importVueRouter from 'vue-router'

 

Vue.use(ElementUI)

Vue.use(VueRouter)

 

const routes = [

  { path: '/', component: Index }

]

 

const router = newVueRouter({

  routes

})

 

const app = newVue({

  router,

  ...App

}).$mount('#app')

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

转载

以上是 vue2.0实践的一些细节   的全部内容， 来源链接： utcz.com/z/380575.html

回到顶部