【无标题】04-22前端的一些笔记总结

最新推荐文章于 2022-10-07 12:04:32 发布

小怡白耶

最新推荐文章于 2022-10-07 12:04:32 发布

阅读量149

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/shuyizhe/article/details/124348392

版权

04-22的笔记总结

04-22

1、vue生命周期
2、 vuex的理解
3、vue路由有⼏种模式?有什么区别?原理是什么?
4、vue路由守卫?
5、v-if与v-show的区别?
6、 v-for与v-if的优先级那个高?如果同时使用v-for和v-if怎么解决?
7、 methods、computed和watch的区别?
8、vue组件通信及eventBus的理解
9、$nextTick方法有什么作用?
10、说⼀下什么是mvvm模式?

1、vue生命周期

1.1 什么是vue生命周期？

生命周期函数又叫钩子函数是到了某一个时间点会自动触发
我们讨论的是 vue 实例的钩子函数从 vue 实例创建到销毁的过程中到了一定的时间节点就会触发

1.2 vue⽣命周期都有哪些钩⼦函数?这些钩⼦函数如何触发?

创建阶段

beforeCreate
实例创建之前这个时候什么都没有 data methods 都不能用也没有 this
created
创建之后也是最早的可以使用 data 和 methods 的钩子函数这个时候有 this 了
beforeMount
组件挂载之前
mounted
组件挂载之后
这个时候能拿到 dom 节点使用

运行阶段只要修改 data 就会触发

beforeUpdate
数据变了视图还没变
updated
数据变了视图也变了

销毁阶段

beforeDestory
组件销毁之前是最后一个能使用 data 和 methods 的钩子函数
destoryed
组件销毁之后

除了这八个还有三个
如果用 keep-alive 缓存了组件就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数

1.3 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能?

我在写效果的过程中会在 created 或者 mounted 中发送 http 请求

created 和 mounted 的区别就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
mounted 的特点是可以操作 dom 节点

还会用 created 钩子函数获取本地存储的数据

1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

加载渲染过程

    父 beforeCreate -> 父 created -> 父 beforeMount 
 -> 子 beforeCreate -> 子created-> 子 beforeMount ->
  子mounted -> 父 mounted

子组件更新过程

  父 beforeUpdate -> 子 beforeUpdate  -> 子 updated
    -> 父 updated

父组件更新过程

    父 beforeUpdate -> 父 updated

销毁过程

    父 beforeDestroy-> 子 beforeDestroy-> 
    子 destroyed-> 父 destroyed

2、 vuex的理解

2.1 什么是vuex?使⽤vuex能够解决什么问题?

vuex 是 vue 的状态管理工具管理项目中的公共数据能够在所有的组件中使用

2.2 vuex的五大核心是什么?在组件里面如何调用五大核心的属性和方法?

一共有五大核心，分别是

state 存放公共数据的地方

    通过 this.$store.state.xxx调用

mutations 修改 state 的地方

  只有这里能修改 通过this.$store.commit 调用

getters 相当于是之前的计算属性

 通过 this.$store.getters 调用

actions 执行异步操作的地方

 通过 this.$store.dispatch 调用

modules 模块化

2.3 vuex的执行机制是什么?

我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥
⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的
⽅法,在 actions⾥⾯的⽅法通过 commit 来调⽤ mutations 
⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

2.4 vuex的弊端是什么?怎么解决?

vuex 缺点就是刷新数据会丢失我们可以保存本地存储或者安装 vuex 持久化插件 vuex-persist 去实现自动本地存储

3、vue路由有⼏种模式?有什么区别?原理是什么?

vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的.

4、vue路由守卫?

路由的导航守卫又叫做路由的钩子函数（生命周期函数）
就是在跳转页面的时候把路由拦下来做一些操作再放行
一共有三种

第一种是全局守卫

beforeEach 路由进入之前
afterEach 路由进入之后

第二种组件内守卫

  beforeRouteEnter 路由进入之前
  beforeRouteUpdate 路由更新之前
  beforeRouteLeave 路由离开之前

第三种独享守卫
```
  beforeEnter 路由进入之前
```

有三个参数
to from next
next 这个参数在路由 3.x 版本的时候是必须的
但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 vue2 搭配 3.x 的路由
vue3 搭配 4.x 的路由

比如说购物车页面只有登陆的才能访问我们可以用组件级守卫守卫购物车页面
如果已经登陆存的有 token 的话就继续访问这个页面如果没有登陆的话就会跳转到登陆页面

  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }

next 参数除了括号里可以是空和路径之外还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）
比如说 token 被存进 vuex 里就能这么写：

  beforeRouteEnter(to, from, next) {
    // if (localStorage.getItem("token")) {
    //   next();
    // } else {
    //   next("/login");
    // }
    next((vm) => {
      // vm就是 这个组件实例 就是this
      if (vm.$store.state.token) {
        next();
      } else {
        next("/login");
      }
    });
  },

5、v-if与v-show的区别?

⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通 css 的display:none和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不是频繁操作的话,我们可以v-if

在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以.

6、 v-for与v-if的优先级那个高?如果同时使用v-for和v-if怎么解决?

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)

7、 methods、computed和watch的区别?

methods 就是方法

我们写的点击事件等各种事件都放在 methods 里

计算属性 computed 计算属性

  有缓存功能就是当跟他有关的值发生变化的时候才会重
 新计算还有一个特点就是必须要有 return 值 return
 就是把计算的结果 return 出去

watch 可以监听数据和路由的变化

watch 监听路由的变化
监听路由的话就是监听 $router

  watch: {
    $route: {
      handler(newval, oldval) {
        console.log(newval, oldval);
      },
    },
  },

watch 监听数据的变化
watch 有三个参数 deep immediate handler
当我们不需要 deep 和 immediate 的时候就可以简写为一个函数这个函数就是 handler

 watch: {
    num: {
      deep: true, //深度监听
      immediate: true, //进入页面立刻监听
      handler(newval) {
        console.log(newval);
      },
      //执行函数 参数是newval 和 oldval
    },

    // num() {},
    // 之前写的只有一个函数的情况 是handler的简写
     不需要 deep 和 immediate的时候可以简写
  },