VUE生命周期与路由

1.vue生命周期

•   相关函数

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeUnmount	unmounted

1.初始化

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

<!-- 视图层 -->
<template>
  <div></div>
</template>

<!-- 逻辑层 -->
<script>
export default {
  name: "",
  data() {
    return {
      msg: "hello, Vue",
    };
  },
  // 一. 初始化
  // createApp(App)以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
  beforeCreate() {
    console.log("beforeCreate -- 执行");
    console.log(this.msg); // undefined
  },
  // data和methods初始化以后
  // 场景: 网络请求, 注册全局事件
  created() {
    console.log("created -- 执行");
    console.log(this.msg); // hello, Vue

    this.timer = setInterval(() => {
      console.log("哈哈哈");
    }, 1000);
  },
};
</script>

<!-- 样式层 -->
<style lang="" scoped>
</style>

 

 从运行结果可以看出来created()运行之前data数据是undefined,说明beforeCreate之前初始化事件和生命周期函数并没有初始化data.所以请求数据就应该在created()函数里.

 

2.挂载

1.template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{{ msg }}</p>
  </div>
</template>

<script>
export default {
    // ...省略其他代码
    
    // 二. 挂载
    // 真实DOM挂载之前
    // 场景: 预处理data, 不会触发updated钩子函数
    beforeMount(){
        console.log("beforeMount -- 执行");
        console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真实DOM挂载以后
    // 场景: 挂载后真实DOM
    mounted(){
        console.log("mounted -- 执行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>

 

 从结果来看在beforeMount()函数并没有获取到dom对象,是在beforeMount()之后才获取到.

说明挂载是在beforeMount()与Mounted()之间进行的

3.更新

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{{ msg }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg: "hello, Vue",
            arr: [5, 8, 2, 1]
        }
    },
    // ...省略其他代码

    // 三. 更新
    // 前提: data数据改变才执行
    // 更新之前
    beforeUpdate(){
        console.log("beforeUpdate -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之后
    // 场景: 获取更新后的真实DOM
    updated(){
        console.log("updated -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>

运行结果: 

 

 beforeUpdate()函数里数组第四个不存在,说明只要数据更新 beforeUpdate()就会运行,但虚拟DOM重新渲染是在beforeUpdate()之后完成的.

4.销毁

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

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

(销毁后借助Vue开发者工具看不到任何信息)

小提一下vue3.0生命周期钩子函数

• setup 创建实例前

• onBeforeMount 挂载DOM前

• onMounted 挂载DOM后

• onBeforeUpdate 更新组件前

• onUpdated 更新组件后

• onBeforeUnmount 卸载销毁前

• onUnmounted 卸载销毁后

2.路由

1.什么是路由

在Vue.js中，路由（Router）是用于管理应用程序的页面导航的机制。它允许您在应用程序中定义不同的路由路径，以便在用户导航时加载相应的视图组件，实现单页应用（Single-Page Application）的效果。

Vue.js使用Vue Router库来实现路由功能。通过Vue Router，您可以定义路由规则，将URL路径映射到不同的组件，并在页面切换时动态地加载和卸载组件。

实际是路由是通过切换组件来实现页面的切换

2.具体实现

1. 在终端输入如下命令安装路由

npm install vue-router
或
npm i vue-router@3
yarn add vue-router@3

     2.main.js中导入路由,main.js使用路由插件

import VueRouter from 'vue-router'

Vue.use(VueRouter)

    3.在router/index.js里面导入router依赖

import {createRouter,createWebHashHistory} from 'vue-router'

     4.在router/index.js导入你的组件

例如

import Login from "../components/login.vue"
import Register from "../components/register.vue"
import Son1 from "../son/find/son1.vue"
import Son2 from "../son/find/son2.vue"

5.  router/index.js 创建路由规则数组(router/index.js是自己创建在src下的)

// 路由规则配置
const routes = [
  {
    path: '/find',        //默认hash值路径
    name: 'Find',     //重定向到/find
    component: Find  // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  },
  {
    path: '/my',    //路由路径
    name: 'My',     //路由名称
    component: My   //路由对应的组件名称
  },
  {
    path: '/friend',
    name: 'Friend',
    //路由级代码拆分
    //这将为此路由生成一个单独的块（Friend.[hash].js）
    //其在访问路由时被延迟加载。
    component: () => import('../views/Friend.vue')
  }
]

6.创建路由对象, 以及返回对象

const router = createRouter({
  history: createWebHashHistory(),
  routes
})   =>创建路由对象

export default router  返回对象

7. 载main.js导入路由

 import router from '../src/router/index.js'
 app.use(router)

 8.最后在app.vue

  <!-- 路由导航跳转, -->
    <nav class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">关注</router-link>
    </nav>
    <!-- 路由显示 -->
    <router-view class="top" />