独立完成一个移动点餐wap后的小结

1.技术栈:vue  vue-router  vuex  Mint-ui  better-scroll;

2.实践总结:

   a.单页应用不重新渲染组件问题:组件在初次渲染后不会重新渲染,此时当从某个路径返回到此组件对应的路径时,不会执行created或者mounted,也就不会发请求获取新数据。解决方法是监听$route。代码示例:

    watch: {

      $route(to, from) {

        if(to.path.indexOf("xxxxxx")) {

        }

        if(from.path.indexOf("xxxxxx")) {

        }

      }

              } 

to.path为将要到达的路径,from.path为来自的路径。当匹配到具体路径时调用获取数据的方法更新组件数据。

  b.页面间必要参数的传递: 建议使用router的query来传递页面间的必要参数,用vuex的话当用户点刷新后会丢失,用storage不会丢失但是调试也会不方便

  c.用vue.set(obj,'key', 'value')设置obj的属性值将会直接改变obj在堆中的状态,是永久性的。

  d.使用watch监听数组或者对象时,常常需要深度监听。代码示例:

    watch: {

      goods: {

        handler(newVal, oldVal) {

          if(newVal) {

          }

        },

          deep: true

      }

              } 

   监听的goods是一个对象数组,当某一个对象的属性发生变化时,watch就能监听到,此时的newVal即为最新的值。

3.布局样式方面总结:

  a.页面容器高度自适应:  类似需求是在页面内容高度不固定的情况下,给容器设置一个背景色。以前的解决方法是用媒体查询给出不同的高度,给的高度比所内容都加载完需要的高度还高一点,能解决问题但是不完美而且代码量大。本次的解决方案是直接设置容器的position为relative,设置top:0,bottom:0。完美解决问题。

       b.文本换行:使用css3的word-wrap属性来控制文本的换行显示,取值有normal(默认)和break-word(在空格、标点符号处换行)。

        对比css3的word-break来适应不同的场景,取值normal(默认)、break-all(遇到容器边界就换行,会折断单词)、keep-all(遇到容器边界换行,但连续的单词不会折断)

       c.文本识别回车符:white-space: pre-line用于将在文本域中设置的内容以回车符进行换行展示。

原文地址:https://www.cnblogs.com/zifayin/p/7762080.html