一、生命周期

（一）vue生命周期

从创建到销毁的整个过程就是vue实例的生命周期
vue的生命周期是从vue实例创建到销毁的过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。

二、钩子函数

（一）钩子函数

• 目标：vue框架内置函数，随着组件的生命周期阶段，自动执行
• 作用：特定的时间点，执行特定的操作
• 场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据

（二）4大阶段8个方法

（1）如何知道vue生命周期到达了什么阶段？

使用钩子函数

（2）钩子函数有哪些

8个方法
初始化、挂载、更新、销毁

（三）初始化

初始化vue的实例，并不是初始化页面

（1）new Vue()

Vue实例化（组件也是一个小的Vue实例）
new Vue()以后，vue内部给实例对象添加一些属性和方法，data和methods初始化之前

（2）Init Events & Lifecycle

初始化事件和生命周期函数

（3）beforeCreate

生命周期钩子函数被执行（还没有data）

（4）Init injections & reactivity

Vue内部添加data和methods等挂载到vm实例对象上

（5）created

生命周期钩子函数被执行，实例创建（可以访问data）
场景：网络请求： 能拿到后台返回的数据，能访问data的变量，把后台返回的数据可以挂载到变量上；注册全局事件：例如eventbus 给窗口绑定滚动事件

（6）编译模板

编译模板阶段—开始分析

（7）Has el option?

是否有el选项—检查要挂到哪里
1.没有，调用$mount()方法
2.有，继续检查template选项

问题

1.vue实例从创建到编译模板执行了哪些钩子函数
beforeCreated/created
2.created函数触发能获取data吗？
能获取data,不能获取真实DOM

（四）挂载

（1）template选项检查

1.有—编译template返回render渲染函数
2.无—编译el选项对应标签作为template(要渲染的模板）

（2）虚拟DOM挂载成真实DOM之前

（3）beforeMount

生命周期钩子函数被执行（拿不到真实的DOM）
场景：预处理data,不会触发updated钩子函数

（4）Create…

把虚拟DOM和渲染的数据一并挂到真实DOM上

（5）真实DOM挂载完毕

（6）mounted

生命周期钩子函数被执行（能拿到真实DOM）
场景：挂载后真实DOM

问题

vue实例从创建到显示都经历了哪些钩子函数？
beforeCreate\created\before\mounted

（五）更新

（1）当data里数据改变，更新DOM之前

（2）beforeUpdate

生命周期钩子函数被执行（拿不到更新后的DOM）

（3）virtual DOM…

虚拟DOM重新渲染，打补丁到真实DOM

（4）updated

生命周期钩子函数被执行
场景：获取更新后的真实DOM
当数据发生变化并更新页面后，执行updated钩子函数

（5）当有data数据改变—重复这个循环

（六）销毁

前提：v-if=“false” 销毁Vue实例
场景：移除全局事件，移除当前组件，计时器，定时器，eventBus移除事件$off方法

（1）当$destroy()被调用—比如组件DOM被移除（例v-if）

（2）beforeDestroy

生命周期钩子函数被执行

（3）拆卸数据监视器，子组件和事件侦听器

（4）实例销毁后，最后触发一个钩子函数

（5）destroyed

生命周期钩子函数被执行

问题

一般在beforeDestroy/destroyed里面干什么？
移除全局事件，移除当前组件，定时器

三、路由

1.什么是路由？ 路由是一种映射关系
2.vue中的路由是什么？ 路径和组件的映射关系
3.生活中的路由：目标：设备和ip的映射关系
4.nodejs路由：目标：接口和服务的映射关系
5.前端路由：目标：路径和组件的映射关系

（一）为什么要使用路由呢？

（1）单页面应用（SPA）

所有功能在一个html页面上实现

（2）前端路由作用

实现业务场景切换

（3）优点

整体不刷新页面，用户体验更好
数据传递更容易，开发效率更高

（4）缺点

开发成本高（需要学习专门知识）
首次加载会比较慢，不利于seo搜索引擎排名

（5）vue-router

使用vue-router集成包在vue中使用路由
vue-router本质是一个第三方包

vue-router模块包

• 它和Vue.js深度集成
• 可以定义视图表（映射规则）
• 模块化
• 提供2个内置全局组件
• 声明式导航自动激活的CSS,class的链接

（二）组件分类

（1）目标

vue文件分2类（方便理解和使用），一个是页面组件，一个是复用组件
src/views文件夹：页面组件–页面展示，配合路由使用，切换页面
src/components文件夹：复用组件–展示数据、常用于复用，重复渲染结构一样的标签

（2）vue-router模块

目标：学会vue-router路由系统使用

步骤

1. 下载vue-router模块到当前工程
2. 在main.js中引入VueRouter函数
3. 添加到Vue.use()身上—注册全局RouterLink和RouterView组件
4. 创建路由规则数组—路径和组件名对应关系
5. 用规则生成路由对象
6. 把路由对象注入new Vue实例中
7. 用router-view作为挂载点切换不同的路由页面

规则如何生效？
切换url上hash值，开始匹配规则，对应组件展示到router-view位置

（三）声明式导航

（1）目标

可用router-link来代替a标签
vue-router提供了一个全局组件router-link
router-link实质上最终会渲染成a链接， to属性等价于提供href属性（to无需#）
router-link提供了声明式导航高亮的功能（自带类名）
添加class类名：router-link-exact-active router-link-active 可对激活的类名进行样式编写

（2）问题

1.router-link是什么？ VueRouter在全局注册的组件，本质是a标签
2.router-link怎么用？ 当标签使用，必须传入to属性，指定路由路径值
3.router-link好处？自带激活时的类名，可以做高亮

（3）跳转传参

a.目标

在跳转路由时，可以给路由对应的组件内传值

b.方法

方法一
在router-link上的to属性传值，语法格式如下： /path?参数名=值
对应页面组件接收传递过来的值： $route.query.参数名
方法二
在router-link上的to属性传值，语法格式如下： /path/值—需要路由对象提前配置path（/path/参数名）
对应页面组件接收传递过来的值： $route.params.参数名

（四）路由重定向

（1）目标

匹配path后，强制跳转path路径
网页打开url默认hash值是/路径（localhost:8080/#/）
redirect是设置要重定向到哪个路由路径

（2）问题

1.如何监测默认路由？ 规则里定义path:'/'
2.如何重定向路由路径？ redirect配置项，值为要强制切换的路由路径

（五）路由404设置

（1）目标

找不到路径，给个提示页面
路由最后，path匹配*（任意路径）—当前面不匹配就命中最后这个

（2）问题

如何给路由体系设置404页面？
在数组最后一个位置，插入匹配*的规则，展示404页面

（六）路由模式修改

（1）目标

修改路由在地址栏的模式
hash路由：例如，http://localhost:8080/#/home
history路由：例如，http://localhost:8080/home （以后上线需要服务器端支持，否则找的是文件夹）

（2）问题

如何修改路由模式呢？
在实例化路由对象时，传入mode选项和值修改

（七）编程式导航

（1）目标

用JS代码来进行跳转
语法：path或者name任选一个
this.$router.push({path:"路由路径"，name:"路由名" }）

path

name

（2）问题

JS如何切换路由路径？
this.$router.push()配置path/name；要和路由规则数组里对应

（3）跳转传参

目标：JS跳转路由，传参
语法：query或者params任选一个（使用path会忽略params;推荐使用name+query方式传参）
this.$router.push({path:"路由路径",name:"路由名",query:{"参数名":值},params:{"参数名":值},})
注意：如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致，爆出冗余导航的问题，不会跳转路由

JS切换路由如何传值，如何接收值
query传， r o u t e . q u e r y 接 p a r a m s 传， route.query接 params传， route.query接params传，route.params接

（八）路由嵌套

（1）目标

在现有的一级路由下，再嵌套二级路由

1. 创建所有的组件
   

2. main.js—继续配置二级路由

一级路由path从/开始
二级路由往后path直接写名字，无需开头
嵌套路由在上级路由的children数组里编写路由信息对象

1. 说明

App.vue的router-view负责发现音乐和我的音乐页面切换
Find.vue的router-view负责发现音乐下的三个页面切换

Ranking.vue

Recommend.vue

SongList.vue

Main.js

（2）问题

1.二级路由如何配置？
创建需要的二级页面组件
路由规则里children中配置二级路由规则对象
一级页面设置router-view显示二级路由页面
2.二级路由注意什么？
二级路由path一般不写根路径/
跳转时路径要从/开始写全

（九）激活类名的区别

（1）声明式导航----类名区别

观察路由嵌套导航的样式
router-link-exact-active（精确匹配）url中的hash值路径，与href属性值完全相同，设置此类名
router-link-active（模糊匹配）url中hash值，包含href属性值这个路径

（2）自动添加2个类的区别

router-link-exact-active-----url的hash值和href完全匹配
router-link-active----url的hash值包含href路径值匹配

（十）路由守卫

（1）全局前置守卫

目标：路由跳转之前，会触发一个函数
语法： router.beforeEach((to,from,next)=>{路由跳转之前先执行这里，决定是否跳转})
to:目标 from:来源 next:函数体
一定要调用next(),才会跳转到下一页

（2）问题

什么是路由守卫？
路由在真正跳转之前，会执行一次beforeEach函数，next调用则跳转，也可以强制修改跳转的路由

vue知识（四）生命周期、钩子函数、路由相关推荐

1. vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数

   目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...

2. Vue的生命周期钩子函数介绍

   感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段 一:实例创建 二:DOM渲染 三:数据更新 四:销毁实例 共有八个基本钩子函数 1.beforeC ...

3. Vue的生命周期钩子函数

   Vue的生命周期钩子函数 一.Vue的生命周期共分为四个阶段 1.创建实例 2.DOM渲染 3.数据更新 4.销毁实例 二.共有八个基本钩子函数 1.beforeCreate -创建前 触发的行为:V ...

4. 教女朋友学习 vue的生命周期钩子函数

   写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...

5. 不来看看这些 VUE 的生命周期钩子函数？ | 原力计划

   作者 | huangfuyk 责编 | 王晓曼 出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...

6. vue生命周期钩子函数的正确使用方式

   对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...

7. 史上最全的Vue生命周期钩子函数11个

   什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...

8. 详解Vue八大生命周期钩子函数

   摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...

9. 实战 Vue 之生命周期钩子函数执行顺序

   实战 Vue 之生命周期钩子函数执行顺序 生命周期钩子函数 父组件与子组件执行顺序 生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...

10. vue生命周期 钩子函数

    vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行 使用钩子函数 可以知道vue生命周期到达了什么阶段 作用:在特定的时间点执行特定的操作 ...

最新文章

1. 如何用javasript对Gridview的项目进行汇总统计？
2. WebForm 【上传图片--添加水印】
3. nedc和epa续航里程什么意思_景区电动观光车的续航里程为什么会逐渐变短？
4. Android简易实战教程--第四十四话《ScrollView和HorizontalScrollView简单使用》
5. python基础教程：3种控制流语句（if，for，while）
6. MAC地址如何在windows与unix下查看?
7. GPU Gems1 - 24 高质量的过滤
8. 重磅 ｜ 边缘计算核心技术辨析
9. linux系统编程 传智播客,传智播客王保明Linux培训系列教程全120集
10. golang延时,在golang中使用延迟
11. IDEA/Pycharm 插件与主题切换
12. KDD2021 | 推荐系统中利用深度哈希方法学习类别特征表示
13. OkHttp 3.x 源码解析之Dispatcher分发器
14. 《Lucene in Action》 MoreLikeThis 实例
15. 如何防止盗号 使用windows自带的 屏幕键盘 OSK
16. 一个二本本科生如何才能进入腾讯，阿里，百度这些大厂？
17. SpringBoot 默认数据库连接池 HikariCP
18. 遇人不淑之逗比程序员
19. 【京东】商品评价数据采集+买家评论数据+卖家评论数据采集+行业数据分析+行业数据质检分析
20. Mac 开启局域网smb文件共享(附全平台连接方法)

热门文章

1. 边角地“变废为宝” 重庆首批社区体育文化公园交付使用
2. 封面文章：寻找技术中国——渴望不再被扼住喉咙！
3. 摩根大通提交分散式虚拟收据系统新专利
4. 三维渲染 体照明模型
5. win10解决 netstart -ano|findstr “8080“出现netstart不适内部或外部命令
6. 端午节送点话费给大家，千万别错过！
7. 怎么从Apache maven 官网下载旧版本
8. 【CSS3】CSS3动画——我离前端的炫酷又近了一步
9. 设计模式 -- 访问者模式(Visitor)
10. 2014.03.31_一年很快过去了