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

04-22的笔记总结

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的时候可以简写
  },

---

8、vue组件通信及eventBus的理解

⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值

⼦传⽗ ⼦组件通过this.$emit(“⾃定义的事件”,要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收传递的数据

⾮⽗⼦组件通信 通过中央事件总线,我们也称之为eventBus,
我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

9、$nextTick方法有什么作用?

⾸先呢, nextTick也叫做异步更新队列方法 而nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数 我们经常会在nextTick⽅法⾥⾯获取dom元素

10、说⼀下什么是mvvm模式?

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。

View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示.这种⾃动同步是因ViewModel 中的属性实现了 Observer，当属性变更时都能触发对应的操作