vue for webapp 中的总结&&填坑

Myth丶恋晨 2022-06-17 12:44 177阅读 0赞

GitHub：[https://github.com/liu9183/vue-for-sellApp][https_github.com_liu9183_vue-for-sellApp]

历时三个星期，在教程和文档的抽丝剥茧中敲完，中间体会以此为记

本项目使用的vue-cli脚手架，安装过程简单交代， 如想详细了解，请参考[官方文档][Link 1]

1.新建工程文件vue-for-sellapp

2.cd vue-for-sellapp

3.npm install vue-cli

4.vue init webpack //项目基于webpack模板

5.npm install //安装依赖

6.npm run dev //启动服务器，默认端口8080

现在挑几个重点难点说一说

## 一、[vue-router][]    ##

vuejs将多个组件组合为一个应用，却没有解决不同页面的切换问题，也就是说同一个页面区域内，可能需要根据用户的手动切换进行不同的渲染，展示不同的内容。

vue-router提供了很好的路由指向功能，看如下代码

代码中的<router-link to=""></router-link>标签提供了路由指向功能，当我们点击“商品”时便会把定义好的**goods组件**渲染到

<router-view :seller="seller"></router-view>

之中，同时将seller对象传入到匹配到的组件中（这里称其为子组件 ），在此子组件中通过props接收到父组件传入的seller对象，一个很巧妙的数据流动方式。

<router-link to="/goods">商品</router-link>默认的渲染结果是<a href="/goods">商品<a>

当我们点击了“商品”时， `<router-link>` 对应的路由匹配成功，将自动设置 class 属性值 `.router-link-active`,我们便可通过此类名为点击事件添加样式。

到此为止，我们都在讲vue-router的原理和使用，那么它是如何引入到项目中的呢，我们看项目的入口文件main.js

import Vue from 'vue';
    import VueRouter from 'vue-router'; //首先引入依赖，命名为VueRouter
    import VueResource from 'vue-resource';
    import App from './App.vue';
    import goods from './components/goods/goods.vue';
    import ratings from './components/ratings/ratings.vue';
    import seller from './components/seller/seller.vue';
    
    
    Vue.use(VueRouter);//插件注册
    Vue.use(VueResource);
    
    
    const router = new VueRouter({
    	routes:[
    	  {
    	  	path:'/goods',//为每个组件定义路由路径，使用此路径便可以调用对应组件
    	    component:goods
    	  },
    	  {
    	  	path:'/ratings',
    	    component:ratings
    	  },
    	  {
    	  	path:'/seller',
    	    component:seller
    	  }
    	]
    });
    
    let sellapp=new Vue({
    	el:'#app',
    	template: '<App/>',
    	components:{ App },
    	router    //为实例注入路由，从而让整个应用都有路由功能
    
    })

在这里有的开发者对Vue.use()函数抱有很多幻想，这里推荐一篇文章 [Vue.use源码分析][Vue.use]

至于vue-resource先不做讨论

## 二、生命周期钩子 ##

![20170427161646459][]

生命周期分八个状态对应八个函数，自始至终分别是

***1.beforeCreate()***

***2.created()*****-------实例已经被创建完成并调用，数据观测（data observer），属性和方法的运算，watch/event事件回调已准备就绪，但是实例尚未挂载，没有进行DOM树构建 和渲染**

***3.beforeMount()***

***4.mounted()**\-------***`el` 被新创建的`vm.$el` 替换，组件挂载成功**

***5.beforeUpdate()**\-------***数据更新时调用，此时还没发生DOM重新渲染以及打补丁，可以在这个钩子中进一步更改状态，这不会触发附加的重渲染过程**

***6.updated()**\-------***数据更改导致DOM重新渲染和打补丁，在这之后调用该钩子，当这个钩子被调用时，组件DOM已经更新，所以可以执行依赖更新后的DOM节点的操作**

***7.beforeDestroy()***

***8.destroyed()***

## 三、[深入响应式原理][Link 2] ##

基于本项目所涉及，这里只提一下**vm.$nextTick()**

看如下代码

_initScroll() {
    				this.$nextTick(() => {
    					if(!this.scroll) {
    						this.scroll = new BScroll(this.$refs.seller, { 
    							click: true
    						});
    					} else {
    						this.scroll.refresh();
    					}
    
    				})
    			}

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 `this` 自动绑定到调用它的实例上。

### 此处有坑，看下面代码（seller.vue组件中）    ###

watch: {
    			'seller' () {
    				this._initScroll();
    				//console.log("watch执行了"); 
    				//console.log(this.$refs.info);
    				//console.log(this.seller.infos);				
    				//this._initPics();
    			}
    		},
    		mounted() {
    			this._initScroll();  
    			//console.log("mounted执行了");
    			//console.log(this.$refs.info);
    			//console.log(this.seller.infos);
    			
    			//this._initPics();
    		}

\_initScroll()

_initScroll() {
    				this.$nextTick(() => { 
    					if(!this.scroll) {
    						this.scroll = new BScroll(this.$refs.seller, { 
    							click: true
    						});
    					} else {
    						this.scroll.refresh();
    						
    				}
    
    				})
    			}

很明显，我要在seller组件中实现页面滚动，为什么需要mounted钩子以及watch监视seller对象共用呢，宝宝心里苦啊，原本以为vue生命周期中mounted钩子调用阶段页面DOM早已构建渲染好，直接滑动便可，确实，我在主页面http://localhost:8080/\#/到点击进入http://localhost:8080/\#/seller中确实实现了seller页的滚动，可当我再次刷新seller页面（http://localhost:8080/\#/seller）时，页面又不能滚动了……

查看控制台输出，发现this.seller.infos获取不到，也就是seller对象并没有传进来，但是this.$refs.info却获取到了，不明白为什么seller对象得不到页面数据渲染却成功了。

然后经过一番纠结困恼，我添加了seller对象监视，在监视到seller对象变化时，再次调用\_initScroll()，如此这般，问题竟然奇迹般解决了，不管是seller页面刷新还是从主页面进入seller页，滚动都没问题，我尝试将this.$nextTick方法弃用，发现又不行了……

**总结一下:刷新seller页面时，seller对象异步获取，在还没有获取成功便执行了\_initScroll()，此时页面依赖seller对象提供的数据撑开，子元素没有超出父元素的界限，自然不会触发滚动，而使用watch监控seller变化，在seller变化完成后又执行\_initSrcoll()，便可以触发滚动。**

## 四、父子组件通信 ##

我们知道子组件想获取父组件的对象，可以用props进行传递，那么父组件要获取子组件传递的信息该如何实现呢？？

本项目为例，在ratings组件中嵌入了ratingselect子组件，而子组件获取用户的点击信息要传递到父组件进行条件展示，比如客户点击了“满意”按钮，那么父组件要响应展示评论中好评的部分。

看下面代码

<div class="rating-type">
    			<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{
       {desc.all}}<span
              class="count">{
       {ratings.length}}</span></span>
    			<span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{
       {desc.positive}}<span
              class="count">{
       {positives.length}}</span></span>
    			<span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{
       {desc.negative}}<span
              class="count">{
       {negatives.length}}</span></span>
    		</div>

select方法

select(type, event) {
    				if(!event._constructed) {
    					return;
    				}
    				this.$emit('select', type);
    			}

vue为我们提供了$emit方法，将type绑定到指定的方法（第一个参数指定方法名）上，在这里是select

好了，我们来看父组件如何拿到select方法。

很清楚，在ratingselect组件挂载到父组件ratings时就已经通过v-on传了进来，@select便是将子组件的select方法传到父组件，后面的字符串便是在父组件中对应的函数名，这里还是用select。

最后，看一下在父组件中的函数使用

select(type){
    				this.selectType = type;
    				this.$nextTick(() => {
    				
    					this.scroll.refresh();
    				});
    			}

## 五、web存储 ##

参见我的另一篇博客[web storage][]

## 六、解析url ##

项目在部署使用过程中，难免遇到与个人信息绑定的东西，比如id为1234的用户点击收藏后，再次刷新http://localhost:8080/?id=1234\#/seller，则依然显示已收藏，这就需要计算机得到用户id，并且缓存相关信息，再次刷新后读取缓存

那么如何从URL中得到用户信息呢

见我一篇博文[解析url,生成对应JSON对象][url_JSON]

## 七、初涉Express框架 ##

在本项目中express来获取data.json中的数据，并向客户端传送JSON响应

![20170524161505011][]

我已在另一篇博客比较细致地介绍了Express的基本原理和使用方法，请参见——[Express框架学习笔记][Express]

未完待续……………………………………………………

[  
][vue-router]

[https_github.com_liu9183_vue-for-sellApp]: https://github.com/liu9183/vue-for-sellApp
[Link 1]: https://cn.vuejs.org/v2/guide/installation.html
[vue-router]: https://router.vuejs.org/zh-cn/essentials/getting-started.html
[Vue.use]: http://www.cnblogs.com/dupd/p/6716386.html
[20170427161646459]: /images/20220617/99f11926cc7d4639859d1ef022c2bd71.png
[Link 2]: https://cn.vuejs.org/v2/guide/reactivity.html
[web storage]: http://blog.csdn.net/u013344815/article/details/71742639
[url_JSON]: http://blog.csdn.net/u013344815/article/details/72609249
[20170524161505011]: /images/20220617/bc7496fd72e84a52a06fe3f3a6c02db6.png
[Express]: http://blog.csdn.net/u013344815/article/details/72630369