VUE的生命周期

vue生命周期是什么？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

1. beforeCreate（创建前）当Vue对象创建之前触发的函数

2. created （创建后）Vue对象创建完成触发的函数

3. beforeMount (载入前) 当Vue对象开始挂载数据的时候触发的函数

4. mounted （载入后）当Vue对象挂载数据的完成的时候触发的函数

5. beforeUpdate （更新前）Vue对象中的data数据发生改变之前触发的函数

6. updated （更新后）Vue对象中的data数据发生改变完成触发的函数

7. beforeDestroy（销毁前）Vue对象销毁之前触发的函数

8. destroyed （销毁后）Vue对象销毁完成触发的函数

vue生命周期的八个阶段

1.beforeCreate：会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点。

2.created：在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。仍然不能获取DOM元素。

3.beforeMount：在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。

4.mounted：在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5.beforeUpdate：数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。

6.updated：数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。

7.beforeUnmount：当 Vue 应用被销毁时，自动执行的函数。

8.unmounted：当 Vue 应用被销毁后，且 dom 完全销毁之后，自动执行的函数。

vue的computed和watch的区别

computed和watch都是vue框架中用于监听数据变化的属性

computed计算属性

如果函数所依赖的属性没有发生变化，从缓存中读取

必须有return返回

使用方法和data中的数据一样，但是类似一个执行方法

watch监听器

watch的函数名必须和data中的数据名一致

watch中的函数有俩个参数，新旧

watch中的函数是不需要调用的

只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用

immediate:true 页面首次加载的时候做一次监听

区别

功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调

是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调

是否调用return：computed必须有；watch可以没有

使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框

是否支持异步：computed函数不能有异步；watch可以

vue 登录流程

Vue登录功能的实现流程详解

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

补充：

创建store是必须的！

token一定要存在storage缓存中，否则刷新一下，store会重新被加载，token就没了；

那存在store是不是多余了，这个也是为了数据统一管理吧，也是数据可视化，因为缓存中的数据代码中是看不见的。（为了代码更容易让别人理解所以加上vuex，不加也不影响做登录）

npm install axios; // 安装axios
npm install vuex  // 安装vuex

创建store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 用Vuex.Store对象用来记录token
const store = new Vuex.Store({
  state: {
    // 存储token
    token:"",
    userName:"" // 可选
  },
  getters: {
    getToken(state){
        return state.token || localStorage.getItem("token") || "";
    }
  },
  mutations: {
    // 修改token，并将token存入localStorage
    setToken(state,token) {
      state.token = token;
      localStorage.setItem('token', token);
      console.log('store、localstorage保存token成功！');
    },
    delToken(state) {
      state.token = "";
      localStorage.removeItem("token");
    },
    // 可选
    setUserInfo(state, userName) {
      state.userName = userName;
    }
  },
 actions: {
   // removeToken: (context) => {
     // context.commit('setToken')
   // }
 },
});
export default store;

引用到main.js

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

封装axios

request.js文件用来封装我们的axios

qs vue 插件

里面有用到qs，这里我门讲解下他的作用：

get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回值，请求失败时reject错误值。最后通过export抛出get函数。

post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们import QS from ‘qs’;的原因。

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

在项目中使用命令行工具输入：npm install qs

安装完成后在需要用到的组件中：import qs from 'qs’

具体使用中我查看了：qs.parse()和qs.stringify()

这两种方法虽然都是序列化，但是还是有区别的。

qs.parse()是将URL解析成对象的形式

qs.stringify()是将对象序列化成URL的形式，以&进行拼接

// 封装axios
import axios from 'axios'
// 序列化
import QS from 'qs';
// vuex
import store from '../store/index'
//这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
// if(process.env.NODE_ENV=="development"){
//   baseURL=''
// }else{
//   baseURL=''
// }
// 使用自定义的配置文件发送请求
const instance = axios.create({
    baseURL: '',
    timeout: 80000,
    headers: {
        // 'Content-Type': 'application/json;charset=UTF-8',
        // 'custome-header':'tianliangjiaoyu'
    }
});
// post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 每次发送请求之前判断vuex中是否存在token        
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
    const token = store.getters.getToken;
    if (token) {
        // 已经登录成功，统一添加token
        config.headers.Authorization = `Bearer ${token}`
    }
    // token && (config.headers.Authorization = token);
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，
// 然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，
// 则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，
// 后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
}, function (error) {
    // 对响应错误做点什么
    if (error.response.status) {
        switch (error.response.status) {
            // 401: 未登录
            // 未登录则跳转登录页面，并携带当前页面的路径
            // 在登录成功后返回当前页面，这一步需要在登录页操作。                
            case 401:
                router.replace({
                    path: '/login',
                    query: {
                        redirect: router.currentRoute.fullPath
                    }
                });
                break;
            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面                
            case 403:
                this.$message({
                    message: '登录过期，请重新登录',
                    duration: 1000,
                    type: 'success'
                });
                // 清除token
                localStorage.removeItem('token');
                store.commit('loginSuccess', null);
                // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                setTimeout(() => {
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                }, 1000);
                break;
            // 404请求不存在
            case 404:
                this.$message({
                    message: '网络请求不存在',
                    duration: 1500,
                    type: 'success'
                });
                break;
            // 其他错误，直接抛出错误提示
            default:
                this.$message({
                    message: error.response.data.message,
                    duration: 1500,
                    type: 'success'
                });
        }
        return Promise.reject(error.response);
    }
});
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params, headers) {
    return new Promise((resolve, reject) => {
        instance.post(url, QS.stringify(params), headers)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

要注意的是，上面的this.$message方法，是引入的element库中的轻提示组件，你根据你的ui库，对应使用你的一个提示组件。

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。

axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦

api.js的作用

这里我们补充一个知识点：

api文件的作用就是接口统一管理

这里我们定义了一个postLogin方法，这个方法有一个参数p，p是我们请求接口时携带的参数对象。而后调用了我们封装的post方法，post方法的第一个参数是我们的接口地址，第二个参数是postLogin的p参数，即请求接口时携带的参数对象。最后通过export统一导出apiFun对象

import {get,post} from './request'
let apiFun = null;
apiFun.postLogin = p => post('api/v1/users/my_address/address_edit_before', p)
export default apiFun;

然后在我们的mian.js文件中定义成全局变量，方便调用

import apiFun from "./network/api";
Vue.prototype.$apiFun = apiFun;//请求接口api

然后在我们的页面中可以这样调用我们的api接口：

// 调用api接口，并且提供了两个参数                
           this.$apiFun.postLogin({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 获取数据成功后的其他操作
                ………………                
            })

api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦.

路由拦截

import Vue from "vue"
import Router from "vue-router"
import Home from '../views/Home.vue'
import store from '../store/index'
Vue.use(Router)
let routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        // 重定向
        redirect: '/publiccloud',
        children: [
            {
                path: '/publiccloud',
                name: '公有云用户管理',
                component: () => import('../views/publicCloud/PublicCloud.vue')
            },
            {
                path: '/admin',
                name: '管理员管理',
                component: () => import('../views/admin/Admin.vue')
            }
        ]
    },
    // 登陆页面
    {
        path: "/Login",
        name: "登录页面",
        component: () => import('../views/login/Login.vue')
    },
];
let router = new Router({
    routes,
    mode: 'history',
    // 全局配置激活路由的class类名，处与活跃（动态）就会用上这个类名
    linkActiveClass: 'active'
})
// 设置路由守卫，在进页面之前，判断有token，才进入页面，否则返回登录页面
if (storage.get("token")) {
    store.commit("setToken", localStorage.getItem("token"));
  }
router.beforeEach((to, from, next) => {
    // 设置路由守卫，在进页面之前，判断有token，才进入页面
        if (token) {
            next('/')
        } else {
            // 没有token就调用后端接口，跳转地址
            getAddress().then((res) => {
              if (res.data.code === 200) {
                location.href = res.data.data.redirectUri
              }
            })
        }
});
export default router

登录页面实际使用

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let that = this;
          // console.log('username',this.loginForm.username)
          // 通过校验规则后进入校验用户名密码是否正确
          // 没有后台接口可以自定义一个函数来模拟，替换postLogin
          this.$apiFun.postLogin(this.loginForm.username, this.loginForm.password)
            .then(res => {
              console.log(res);
               that.$store.commit("setToken", res.data.token);
               that.$store.commit("setUserInfo", res.data.account);
              this.$notify({
                title: "登录成功",
                type: "success",
                showClose: false,
                duration: 1000
              });
              setTimeout(() => {
                // 此时要判断/login后面的参数redirect，若无参数，进入主页；
                this.$router.push("/index");
                // 若有参数则参数为未有权限的那个路由，跳转到那个路由
                // this.$router.push(***); -- 具体要自己在这实现
              }, 1000);
            })
            .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
              this.$message.error(error);
              console.log(error);
            });
        } else {
        // 不符合前端校验
          this.$message.error('format error：'+error);
          console.log('format error：',error);
          return false;
        }
      });
    }

Vue+Vux实现登录功能

准备工作

安装 NodeJS

安装 vue-cli

1.vue-cli 2.x 升级到 3.x

（1）卸载 2.x 版本

npm uninstall -g vue-cli

（2）安装

npm install-g @vue/cli

（3）查看版本

vue -V

vue -V@vue/cli5.0.8

创建项目

1.vue-cli 2.x 项目

（1）创建

vue init webpack test2.0

创建完成后，项目目录结构如下：

（2）启动

cd test2.0
npm install
npm run dev

（3）安装 vux ①不使用模板安装

npm install vux --save
npm install vux-loader --save-dev
npm install less less-loader --save-dev

修改 build\webpack.base.conf.js ：

const vuxLoader = require('vux-loader')
 
const originalConfig = {
...
 
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

src 下创建 views 目录，新建 test.vue 文件：

<template>
  <div style="padding: 15px;">
    <button-tab>
      <button-tab-item selected>{
    
    { today }}</button-tab-item>
      <button-tab-item>{
    
    { week }}</button-tab-item>
      <button-tab-item>{
    
    { month }}</button-tab-item>
    </button-tab>
  </div>
</template>

<script>
  import {ButtonTab, ButtonTabItem} from 'vux'
  export default {
    components: {
      ButtonTab,
      ButtonTabItem
    },
    data () {
      return {
        today: '今天',
        week: '本周',
        month: '本月'
      }
    }
  }
</script>

<style scoped>

</style>

配置路由 router\index.js ：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/views/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})

常见错误：

Module build failed: TypeError: this.getOptions is not a function

解决方法：

less 和 less-loader 版本过高，安装低版本：

npm install [email protected] [email protected] --save-dev

You may use special comments to disable some warnings.

Use // eslint-disable-next-line to ignore the next line.

Use /* eslint-disable */ to ignore all warnings in a file.

解决方法：

原因是开启了 eslint 编码规范检查，修改 build\webpack.base.conf.js ，注释掉以下一行代码：

//...(config.dev.useEslint ? [createLintingRule()] : []),

②使用模板安装

vue init airyland/vux2 test-t2.0

官网模板的路由是以常量的形式写在 main.js 中，我们改造到 router/index.js 中去：

修改 main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import router from './router'
// import VueRouter from 'vue-router'
import App from './App'
// import Home from './components/HelloFromVux'
//
// Vue.use(VueRouter)
//
// const routes = [{
//   path: '/',
//   component: Home
// }]
//
// const router = new VueRouter({
//   routes
// })

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

修改 index.js：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/HelloFromVux'
import Test from '@/views/test'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})

启动：

cd test-t2.0
npm install
npm run dev

（4）安装 axios

npm install axios --save-dev

（5）安装 vuex

npm install vuex --save-dev

vue-cli 3.x 项目

（1）创建

vue create test

创建登录页

main.js 中引入全局 ToastPlugin、LoadingPlugin 插件

import  { ToastPlugin, LoadingPlugin } from 'vux'
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)

views 下创建 login\login.vue

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/views/test'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})

localstorage和sessionstorage的区别

localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

作用域：相同浏览器的不同标签在同源情况下可以共享localStorage

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

作用域：只在当前标签可用，当前标签的iframe中且同源可以共享

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

常用的四个 API 也很简单：

JavaScript 代码:
// 增加了一个 localStorage ‘myCat’ 数据项
localStorage.setItem('myCat', 'Tom');
 
// 读取 localStorage ‘myCat’ 数据项
let cat = localStorage.getItem('myCat');
 
// 移除 localStorage ‘myCat’ 数据项
localStorage.removeItem('myCat');
 
// 移除所有的 localStorage 数据项
localStorage.clear();

关于vue知识整理

VUE的生命周期

vue生命周期是什么？

vue生命周期的八个阶段

1.beforeCreate：会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点。

2.created：在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。仍然不能获取DOM元素。

3.beforeMount：在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。

4.mounted：在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5.beforeUpdate：数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。

6.updated：数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。

7.beforeUnmount：当 Vue 应用被销毁时，自动执行的函数。

8.unmounted：当 Vue 应用被销毁后，且 dom 完全销毁之后，自动执行的函数。

vue的computed和watch的区别

computed计算属性

watch监听器

区别

vue 登录流程

创建store

封装axios

qs vue 插件

api.js的作用

路由拦截

登录页面实际使用

Vue+Vux实现登录功能

准备工作

创建项目

创建登录页

localstorage和sessionstorage的区别

猜你喜欢

关于vue知识整理

VUE的生命周期

vue生命周期是什么？

vue生命周期的八个阶段

1.beforeCreate：会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点。

2.created：在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。仍然不能获取DOM元素。

3.beforeMount：在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。

4.mounted：在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5.beforeUpdate：数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。

6.updated： 数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。

7.beforeUnmount： 当 Vue 应用被销毁时，自动执行的函数。

8.unmounted：当 Vue 应用被销毁后，且 dom 完全销毁之后，自动执行的函数。

vue的computed和watch的区别

computed计算属性

watch监听器

区别

vue 登录流程

创建store

封装axios

qs vue 插件

api.js的作用

路由拦截

登录页面实际使用

Vue+Vux实现登录功能

准备工作

创建项目

创建登录页

localstorage和sessionstorage的区别

猜你喜欢

6.updated：数据变化之后自动执行的函数，此时变化后的数据已经渲染到页面之上。

7.beforeUnmount：当 Vue 应用被销毁时，自动执行的函数。