【无标题】

最新推荐文章于 2025-06-08 20:10:18 发布

小臂宰治

最新推荐文章于 2025-06-08 20:10:18 发布

阅读量111

点赞数

文章标签： vue.js javascript 前端前端框架 vue

本文链接：https://blog.youkuaiyun.com/m0_74076766/article/details/128219633

版权

vue的生命周期钩子分为四大阶段,8个方法

初始化

挂载

更新

销毁

执行顺序	钩子函数	执行时机
1	`beforeCreate(){}`	vue实例创建了，但是el和data还没有创建（准备创建data）底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	`created() {}`	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3	`beforeMount() {}`	el挂载点创建了，但是data数据还没有渲染（准备渲染中）底层：创建el挂载点，并且生成虚拟DOM
4	`mounted() {}`	data数据第一次渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5	`beforeUpdate() {}`	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) `会执行多次`
6	`updated() {}`	变化后的data数据，完成渲染到页面（完成重新渲染）`会执行多次`
7	`beforeDestroy() {}`	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染底层：解除事件绑定、侦听器、组件
8	`destroyed() {}`	vue实例已经销毁

<template>
  <div>
    <button @click=" name='李四' ">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
/* 

1. vue生命周期钩子 : vue从初始化到销毁的过程中会执行的函数

2. 四个阶段8个钩子 : 8个 
  (1)初始化阶段:  beforeCreate、 created
  (2)挂载阶段 : beforeMount、mounted
  (3)更新阶段 : beforeUpdate、updated
  (4)销毁阶段:  beforeDestroy、destroyed

3. vue初始渲染会执行哪些钩子 : 4个
  beforeCreate`    
  created
  beforeMount
  mounted

4. 两个常用
    created() :  一般用于发送ajax（页面一加载需要发送ajax在这个勾子）
    mounted() :  一般用于操作DOM（页面一加载需要操作DOM在这个勾子）

5. 有两个钩子会执行多次，其他钩子都是执行一次
    beforeUpdate、
    updated
*/
export default {
  data() {
    return {
      name: "张三",
      age: 20
    };
  },
  methods: {
    doClick() {
      console.log(1111);
    }
  },
  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例，但是还没有创建data
  beforeCreate() {
    console.log(1);
    console.log(this);
    console.log(this.name);
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log(2);
    console.log(this);
    console.log(this.$el);
    console.log(this.name);
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log(3);
    console.log(this);
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); //null 没有渲染,所以无法获取dom
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log(4);
    console.log(this);
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); // p标签 完成渲染
  },
  // 5.beforeUpdate() : 检测到data数据发生变化,但是还没有更新el
  beforeUpdate() {
    console.log(5);
    console.log(this);// 获取的是变化后的数据, 但是页面还是显示之前的数据
  },
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6);
    console.log(this);
  },
  // 7.beforeDestroy(): 正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
  /*触发销毁钩子的两个条件 
  (1)对组件使用v-if
  (2)调用组件的 this.$destroy() 
  */
  beforeDestroy() {
    console.log(7);
    console.log(this);
  },
  //8.destroyed(): 完成销毁
  destroyed() {
    console.log(8);
    console.log(this);
  }
};
</script>

<style>
</style>

路由概念及工作原理介绍

1.路由概念

1.路由是什么？
- URL 与页面之间的对应规则（如下图所示）
  - /home 对应首页
  - /comment 对应评论列表页
  - /search 对应搜索列表页
- 路由中的url : 主要指url的hash值
  
  路由中的页面：主要指vue的组件（在vue中页面和盒子都是组件）
2.为什么要学习vue中的路由
- vue是一个渐进式框架，一个网页由很多个页面组成，那我页面之间如何跳转呢？
  - 在vue中，页面跳转主要由 路由 来实现

2.路由工作原理

1.路由的工作原理： 监听网页hash值变化

(1)修改网页的hash值
- hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转

(2)给window注册onhashchange事件，监听hash值变化

当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面
单页面应用SPA介绍
SPA(singal page application): 单页面应用:,所有功能在一个页面上实现
- SPA
经典单页面应用案例：网易云音乐

对比部分	单页应用	多页面应用
组成	一个html文件多个组件组成	多个html文件
静态资源共用	共用，一次性加载完毕	不共用，每个页面都加载一遍
刷新方式	页面局部刷新	整页加载
url模式	itcast.com/#/pageone	itcast.com/pageone.html
用户体验	用户体验良好	页面切换加载缓慢体验较差
数据传递	容易	依赖url传参，cookie,localStorage
搜索引擎优化	不利于seo优化，需要ssr优化(服务端渲染)	支持良好
使用场景	追求高体验不要求seo	高度要求seo
开发成本	较高需要依赖专业的框架, 开发效率高	较低重复代码多, 开发效率低

单页面-多页面对比

vue路由使用流程(手动)

目标：从0开始搭建网易云页面路由效果

vue是一个渐进式框架，自己的功能主要是数据驱动。vue本身不提供路由功能，而是由vue团队提供的Vue Router插件完成，因此Vue Router也称之为vue全家桶中的一员

Vue Router3官网（好入门）：起步 | Vue Router

Vue Router4官网（入门之后和3基本没区别）：入门 | Vue Router

路由完整配置六个流程
- 0.下载与导入vue-router
- 1.导入组件
- 2.创建routes路由规则（路径和页面一一对应）
- 3.创建路由对象
- 4.把路由对象挂载到App.vue
- 5.在页面写路由导航router-link （生成a标签）
- 6.在页面写路由出口router-view (生成占位盒子，用于显示页面内容)

路由模式

官网介绍：不同的历史模式 | Vue Router
路由有两种模式
- hash路由例如: http://localhost:8080/#/home
- history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

- - 

```javascript
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
```

路由重定向

路由重定向官方文档：重定向和别名 | Vue Router
- 重定向应用场景：页面输入根路径/ , 自动跳转到首页
- 注意点 : 重定向只是修改路径，还需要单独去设置路由匹配规则

const routes = [
  {
    path: '/',
    /* 
    (1)重定向只是修改页面路径。  输入 / 会重定向到 /find
    (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
    */
    redirect: "/find"
  },
  {
    path: '/find',
    name: 'find',
    component: find
  },
]

路由声明式导航

路由声明式导航作用：使用a标签跳转页面，并且给页面传参
- 相当于我们之前学习过的页面跳转传参 : location.href = "/路径?参数名=参数值"

跳转方法	传参位置	路由规则	接收
<router-link to="/path?参数名=参数值"></router-link>	/path?key=value	无特殊	$route.query.key
<router-link to="/path/参数值"></router-link>	/path/参数值	/path/:key	$route.params.key

动态路由匹配官方文档：带参数的动态路由匹配 | Vue Router

查询参数两个流程

1.传递参数: <router-link to="/friend?参数名=参数值">朋友</router-link>
- ```
<router-link to="/friend?name=张三&age=20">朋友</router-link>
```

2.跳转后的组件接收参数: this.$route.query.参数名

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

路径参数三个流程

1.定义路由规则: path: '/friend/:参数名'

// 两个都要写哟，否则只能params传参，无法query传参
{
    path: '/friend',
    name: 'friend',
    component: friend
},
{
    path: '/friend/:name/:age',
    name: 'friend',
    component: friend
},

2.传递参数: <router-link to="/friend/参数值">朋友</router-link>
- ```
<router-link to="/friend/李四/30">朋友</router-link>
```

3.跳转后的组件接收参数: this.$route.params.参数名

<li>这是当前页面 params 接收到的参数: 
    <span>姓名：{{ $route.params.name }}</span> -- 
    <span>年龄：{{ $route.params.age }}</span>  
</li>

vue路由的编程式导航

跳转方法	传参位置	路由规则	接收
this.$router.push('/path')	无参数	无特殊	不需要接收
this.$router.push({path: "/path", query: {key: value}})	query的对象	无特殊	$route.query.key
this.$router.push({name: "com", params: {key: value})	params的对象	路由规则需要name属性	$route.params.key

编程式导航官方文档：编程式导航 | Vue Router
编程式导航介绍
- 1.作用：使用js代码是做路由跳转 (替代router-link)
- 2.语法：
  - $router.push('/路径')
  - $router.push({name:'组件name'})
- 3.应用场景：如果希望满足条件才跳转，就可以使用编程式导航
  - router-link ：相当于a标签，只要点击就会跳转,没有逻辑
  - $router.push('路径'):相当于window.location.href,使用js来做业务逻辑

query传参两个步骤

1.跳转传参

this.$router.push({ path: '/路由地址', query: { 参数名: '参数值' }})

2.跳转后的组件接收参数: this.$route.query.参数名

<li>这是当前页面 query 接收到的参数: 
    <span>姓名：{{ $route.query.name }}</span>  --
    <span>年龄：{{ $route.query.age }}</span>  
</li>

params传参三个步骤

有一个细节千万不要搞混淆，在编程式导航的时候。

如果你要是用query传参，那么就要使用 path 来跳转

如果你要是用params传参，那么就要使用 name 来跳转

1.路由规则添加路由名

{ path: '/friend', name: 'friend', component: friend },

2.跳转传参

this.$router.push({ name: '路由名', params: { 参数名: '参数值' }})