Vue 实战入门部分细节

前言

此次的系统分析期末项目，我负责的部分是搭建前端，选择了 vue 框架进行代码编写和搭建，接下来说一下自己实战中收获的一东西。（前端项目地址）

1. 为什么采用 vue.js 进行开发

• 官方文档详细（且有中文文档），学习成本较低，有利于项目其他成员迅速投入开发。
• github 已经有许多 vue 开发的项目，架构易参考，配合 element-ui 很容易开发出一套相应的前端界面。
• 该框架的开发可以把前后台完全分离，前端人员只负责前端开发，服务端人员负责服务端开发。vue有自己的请求处理方式，现在前后端都是用rest风格，前后台只在接口上有交集，代码上完全独立。
• 采用MVC的方式，区分出model，controller and view层，代码做到更好的控制和流畅。

2. 路由拦截

有些页面需要登陆才能开放，这时候需要用上路由拦截

router.beforeEach((to, from, next) => {
  const user = store.state.user
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (user) { // 通过vuex state获取当前的用户名是否存在
      next()
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})

3. Vuex 配合 localStorage 使用

因为使用 vuex 来管理状态，但是 store 的东西是存储在浏览器内存中的，一刷新就消失了，需要存储在 localStorage 中进行持久化保存，这里我利用 vuex-persistedstate 插件

• 安装
  npm install vuex-persistedstate --save
• 引入及配置
  在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

这样我们 store 的代码便无需改变，会默认存储到 localStorage 中，只需要在 logout 时手动清理一下 localStorage 就行了。

4. 返回的实现

用了 vue-router 作为路由跳转和管理，使用 this.$router.go(-1)就可以回到上一页。history.go(-1)则是回到浏览器上一页，二者存在差别。

5. 路由转场动画

路由转场动画的设置其实很简单，官方文档里写的很清楚了

<keep-alive>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</keep-alive>
      
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

6. watch和computed的用法区别是什么？

1. 首先从字面意思来看,computed是一个计算的属性,类似过滤器,对数据进行处理后return一个新的state,并且可以监听该返回值的变化,而watch是观察是一个动作;
2. computed用法,贴上代码:

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

3. watch用法,分为深度和普通监听

简单监听
 data(){
   return{
     'first':2
   }
 },
 watch:{
   first(){
     console.log(this.first)
   }
 },
        
深度监听:利用handler函数
data(){
  return{
    'first':{
      second:0
    }
  }
},
watch:{
  secondChange:{
    handler(oldVal,newVal){
      console.log(oldVal)
      console.log(newVal)
    },
    deep:true
  }
},

4. computed可以对数据处理得到一个新的state,而watch可以对state做异步改变;