独立完成一个移动点餐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用于将在文本域中设置的内容以回车符进行换行展示。