前言

此篇博客为之前使用vue-elementui-webpack-vuecli进行的项目相关知识的总结，即个人的项目实战学习笔记，经查阅相关资料以及自我总结得出此篇文章。（如有错误之处，请大佬指出，共同学习研究）
项目源码地址：点击链接

1. Vue的生命周期

图片来自：Vue.js生命周期

名词解释

beforeCreate（创建前）

在数据观测和初始化事件还未开始

created（创建后）

完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前）

在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后）

在el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前）

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前）

在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后）

在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

Q & A

1.什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？

答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM渲染在哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了。

2. Vue的优点

低耦合

视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性

你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发

开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

可测试

界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3. Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

4. 路由之间跳转

声明式（标签跳转） 编程式（ js跳转）

5. Vue如何自定义一个过滤器

html部分代码

<el-table-column label="创建时间" prop="add_time" width="140px"><template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
</el-table-column>

在此次项目中，html页面中使用element-ui组件和template进行操作，使用|进行调用过滤器。其中add_time为后台进行传递。

data() {return {// 查询参数对象queryInfo: {query: '',pagenum: 1,pagesize: 10},// 商品列表  从后台获得goodslist: [],total: 0}}

在全局进行过滤器的定义

Vue.filter('dateFormat', function (originVal) {const dt = new Date(originVal)     //获取数据const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0') //不足两位，进行补0const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`         //返回结果
})

过滤器接收表达式的值 (scope.row.add_time) 作为第一个参数。dateFormat过滤器将会收到 msg的值作为第一个参数。

6. Vue中v-for的key值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

7. vue-router是用来做什么的

vue-router路由，通俗来讲主要是来实现页面的跳转，通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。
主要组件：router-view、router-link

8. vue.cli中怎样使用自定义的组件

9. 如何从零写出一个Vue路由

在此次项目中，由于使用的是全局定义。

1. 在components目录中创建文件，如图：

2. 在router.js中进行全局路由信息的定义

摘取部分（以goods文件夹目录下为例）

1.首先进行vue和cue-router的导入

import Vue from 'vue'
import VueRouter from 'vue-router'

2. 在需要用到的页面中进行导入

// import Cate from './components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ './components/goods/Cate.vue')
// import Params from './components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ './components/goods/Params.vue')// import GoodsList from './components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ './components/goods/List.vue')
// import Add from './components/goods/Add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ './components/goods/Add.vue')

3. 注册VueRouter

Vue.use(VueRouter)

4. 编写路由信息

const router = new VueRouter({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome},......

5.导出模块

export default router

10. Vue-router钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

全局的：beforeEach、beforeResolve、afterEach
路由的：beforeEnter
组件的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

例如，项目中使用到的：

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {// to 将要访问的路径// from 代表从哪个路径跳转而来// next 是一个函数，表示放行//     next()  放行    next('/login')  强制跳转if (to.path === '/login' || to.path === '/') return next()// 如果用户访问非登录路径，则判断有无登录凭证tokenconst loginToken = sessionStorage.getItem('token')// 没有token，直接跳转登录页面if (!loginToken) return next('/login')// 有token，放行next()
})

11. Vue实现数据双向绑定的原理：Object.defineProperty（）

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty将它们转为getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

js实现简单的双向绑定

<body><div id="app"><input type="text" id="txt"><p id="show"></p>
</div>
</body>
<script type="text/javascript">var obj = {}Object.defineProperty(obj, 'txt', {get: function () {return obj},set: function (newValue) {document.getElementById('txt').value = newValuedocument.getElementById('show').innerHTML = newValue}})document.addEventListener('keyup', function (e) {obj.txt = e.target.value})
</script>

12. ElementUI是怎么做表单验证的

在此项目中的实例:

进行用户表单的验证

html - demo:

 <!-- 添加用户 --><el-dialog title="添加用户信息" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><!-- 内容主题区域 --><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px"><el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addForm.password" type="password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机号" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form><!-- 底部区域 --><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">确 定</el-button></span></el-dialog>

model绑定表单数据

通过调用后台接口和数据库，获取数据（editForm）：

const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {return this.$message.error('查询用户信息失败！')}this.editForm = res.data      //获取数据

通过prop取表单数值

如下代码：

<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>

通过编写ref进行后台API验证

this.$refs.addFormRef.validate(async valid => {// console.log(valid)if (!valid) return// 可以发起添加用户的网络请求const { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用户信息失败')} else {this.$message.success('添加用户信息成功')}// 隐藏添加用户的对话框this.addDialogVisible = false// 刷新用户列表this.getUserList()})}

根据rules进行表单内容验证

项目中的rules为addFormRules，例如以下代码(其中checkMobile，checkEmail为自己编写的验证方法)：

// 添加表单验证规则对象addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min: 3,max: 10,message: '用户名的长度在3~10个字符之间',trigger: 'blur'}],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 6,max: 15,message: '用户名的长度在6~15个字符之间',trigger: 'blur'}],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' }]}

13. vue-router怎么重定向页面?

export default {path: '',name: '',meta: {  //元信息（非必填）icon: '',  //路由图标title: '',   //路由名称light: '',    //高亮显示那个路由nameshow: true,   //是否显示},redirect: {   name: '',    //重定向，指向哪个路由的name},component: '',    //当前路由时要显示的组件children: [],    //嵌套子路由
}

项目中实际应用：

14. ajax、fetch、axios三者区别

ajax是最早出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话，容易产生回调地狱。

fetch号称可以代替ajax的技术，是基于ES6中的Promise对象设计的，参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。

axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截，基于Promise对象。

15. 如何使css只在当前组件起作用

在style标签中写入scoped即可 例如：

<style lang="less" scoped></style>

参考资料

Vue面试中，经常会被问到的面试题/Vue知识点整理（来源：简书）
vue 248个知识点（面试题）为你保驾护航（来源：掘金）

你真的会用Vue-cli脚手架和Element-ui进行项目创建吗？相关推荐

1. Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）

   1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...

2. 猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目

   目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...

3. 如何查看vue版本号以及vue/cli脚手架版本号

   查看vue版本号 方法一:直接在项目的package.json文件,找到dependencies就能看到了 方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...

4. vue学习笔记-关于element ui 安装失败的问题解决

   今天学习vue时,对element ui进行安装,运行npm install element-ui -S 命令,出现报错: npm ERR! code ERESOLVE npm ERR! ERESOL ...

5. Windows PowerShell安装指定版本vue/cli脚手架失效解决办法；vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue

   mac搭建vue项目看这篇 打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...

6. 1. Vue CLI脚手架

   1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...

7. 前端框架vue04~~vue.cli脚手架的基本使用

   文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...

8. Vue学习（十一）Vue CLI脚手架

   文章目录 初始化脚手架 说明 步骤 Vue 脚手架创建项目文件说明 render函数 脚手架中不同版本的Vue 脚手架启动注意 vue.config.js配置文件 初始化脚手架 说明 Vue脚手架是V ...

9. Vue 全家桶之 vue cli (脚手架)

   一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口 命令 ...

10. vue CLI脚手架搭项目

    1.安装 node.js环境 官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到 安装完成后cmd打开终端,输入node -v ,npm - ...

最新文章

1. 资源下载 | 历年 AAAI 最佳论文（since 1996）
2. iOS进阶之底层原理-weak实现原理
3. 使用navicat for mysql 创建外键foreign keys时，总会自动创建索引indexs
4. 甜甜用计算机1050除以一个数,上册四年级数学期末试卷带答案
5. AlertDialog源码解析之一
6. mysql5.6设置日志路径_mysql5.6.12切换binlog二进制日志路径_MySQL
7. 解决SVN403问题
8. mysql对库授权alter_mysql 权限 alter update insert
9. 游戏框架设计【各大管理系统篇】
10. 根轨迹法和频率响应法设计PI控制器学习笔记
11. Studio3T连接远程服务器上的mongo数据库
12. 2022第十七届巴拿马春晚-113万海内外观众欢聚迎新春
13. 「图像处理」使用Python+Openface实现人脸识别与关键点（landmarks）检测
14. IDEA mybatisplus 代码生成器的配置
15. 知识图谱与KBQA——槽填充
16. dic={key:“字典”}
17. java兔子字符画,兔子的字符画
18. 红米路由器ac2100怎样设置ipv6_红米（Redmi）路由器AC2100怎么设置
19. CreateJS神坑之旅
20. tomcat7介绍（一）

热门文章

1. IoU-aware的目标检测，显著提高定位精度
2. 万万没想到，EfficientNet居然这么火！
3. 机器学习降维-深度AI科普团队
4. 机器学习（二）逻辑回归
5. 如何使用OSQP-Eigen
6. 自动驾驶汽车自主决策与规划技术（一）:里程定位于全局定位简介
7. 构思解决问题的一般范式
8. python中函数startswith的用法_Python中用startswith()函数判断字符串开头的教程
9. 鸿蒙adb调试权限,真机ro.debuggable全局调试权限修改为1（Nexus 6为例）
10. Nginx服务器之负载均衡策略（6种）