生命周期，路由

目录

1.什么是生命周期

2.生命周期的3个阶段及函数

1.初始化阶段

1.beforeCreate

2.created

3.beforeMount

4.mounted

2.运行中阶段

1.beforeUpdate

2.updated

3.销毁阶段

1.beforeDestory

2.destoryed

2.路由的使用

1.路由创建

1.创建路由组件

2.配置路由映射

3.使用路由通过

2.路由操作

1.让页面默认显示首页

2.router-link 属性

 3.另一种指定路由路径的方法

1.什么是生命周期

vue实例从创建到销毁的一系列过程在每个周期中被自动调用的函数叫做生命周期函数，也叫
钩子函数

2.生命周期的3个阶段及函数

1.初始化阶段

1.beforeCreate

1. 在这个钩子函数中，不能获取data中的数据

2.这个函数不能操作DOM；

在实例初始化之后，数据观测和event事件配置之前被调用

2.created

1. 可以获取到data中的数据

2.不能操作DOM的 console.log(this.msg); console.log(document.getElementsByTagName("li"))

3.beforeMount

1.挂载开始之前被调用，相关渲染函数首次被调用

data data选项中的数据获到了 DOM 拿不到

4.mounted

以获取最终的DOM元素,挂载成功

data: 可以获得数据 DOM: 拿到了

2.运行中阶段

1.beforeUpdate

更新数据之前执行

这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用

2.updated

数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数

3.销毁阶段

1.beforeDestory

销毁之前，清除定时器

2.destoryed

销毁子组件，销毁观察者，事件监听者

 

 

2.路由的使用

1.路由创建

1.创建路由组件

2.配置路由映射

3.使用路由通过<router-view>

router-link 标签是内置的组件，它会被渲染成为一个a标签

与其他标签同级

而 <router-view>会根据当前的路径，动态渲染出来不同的组件

在路由切换的时候，切换的是router-view挂载的组件，其他内容不会发生不变化

2.路由操作

1.让页面默认显示首页

3.router-link 属性

tag属性：不想用a标签渲染成为button按钮

tag="button"

replace属性：没有值，加上这个属性之后，返回按钮没有效果只能通过点击执行

被选中的元素都会增加一个标签

 4.另一种指定路由路径的方法

this.$router.push('/home')