小马过河

# Vue2.x常见知识点

🐴

# 对MVVM的理解

MVVM分为Model、View、ViewModel三者。

  • Model：代表数据模型，数据和业务逻辑都在Model层中定义；
  • View：代表UI视图，负责数据的展示；
  • ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

# vue的生命周期

  • beforeCreate 在这个生命周期，vue事件和生命周期开始初始化，但是数据还没有初始化
  • created 这个生命周期中vue数据初始化完成，可以访问data中的数据，一般在该生命周期进行http数据请求
  • beforeMount 这个生命周期中vue首次调用render函数，生成了虚拟dom,但是还没有真实dom
  • mounted 这个生命周期真实DOM以及生成，可以在该生命周期做一些DOM操作
  • beforeUpdate 该生命周期是在数据有更新时，会被执行
  • updated 该生命周期是在组件更新完成（重新渲染DOM）后被调用
  • beforeDestroy 该生命周期是在组件被销毁前调用，在该周期还可以访问实例数据。
  • destroyed 该生命周期是在组件被销毁后调用。

# vue的常用指令有那些

v-html,v-text,v-bind,v-model,v-on,v-for,v-show,v-if

# v-if 和 v-show的区别

v-if 和 v-show都可以控制DOM元素的显示和隐藏，不同的是：

  • v-if 显示隐藏是通过控制DOM节点的显示隐藏来实现的
  • v-show 显示隐藏是通过控制CSS的display属性实现的

所以v-if在性能上的开销要比v-show大。同时如果是组件v-if的显示隐藏也会重新触发组件中的生命周期（重新渲染）。

当我们需要大量的显示隐藏操作时，尽可能的使用v-show

# 绑定class的数组用法

<template>
  <!--数组语法--> 
  <div :class="[calssOne,classTwo]"></div>

   <!--对象语法--> 
  <div :class="classObj"></div>
</template>

<script>
 export default{
    data(){
       return {
         classOne:"classOne",
         classTwo:"classTwo",
       }
    },
    computed:{
      classObj(){
        return {
          class1:true,
          class2:true,
          class3:false,
        }
      }
    }
 }
</script>

# v-on可以监听多个方法么

v-on可以监听多个方法

<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标滑进移出</button>

# vue事件中如何使用event对象

<template>
 <div @click="clickBtn($event)"></div>
</template>

<script>
  clickBtn($e){
    console.log($e)
  }
</script>

# vue中的数据传递

  • 父组件向子组件传递

父组件通过v-bind绑定数据，子组件通过props接收

<!--父组件-->
<children :dataObj="{name:'test'}"></children>

<!--子组件-->
<script>
export default {
  props:{
    dataObj:{
      type: Object
    }
  }
}
</script>
  • 子组件向父组件传递

子组件通过$emit触发父组件中自定义事件，通过参数来传递数据

<!--父组件-->
<template>
  <children @getFun="testFun"></children>
</template>

<script>
testFun(data){
  console.log(data) // data 为 1
}
</script>

<!--子组件-->
<script>
export default {
  methods:{
    pushParentData(){
      this.$emit("getFun",1)
    }
  }
}
</script>
  • 其它组件间传递

其它组件间传递可以通过两个组件最近的祖辈组件作为桥梁进行数据传递

使用vuex进行数据共享

或者使用一个公共的vue实例来共享数据

# keep-alive的作用

<keep-alive>是vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM,keep-alive是用在一个直属子组件被开关的情形，同时只有一个子组件在渲染，若有v-for则不会工作

keep-alive中常用的属性

  • include 字符串或正则表达式，只有名称匹配的组件会被缓存
  • exclude 字符串或正则表达式，名称匹配的组件不会被缓存
  • max  数字，最多可以缓存多少组件实例

匹配首先检查组件自身的name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

被keep-alive包裹的组件会有下面两个生命周期

  • activated 组件显示时会触发
  • deactivated 离开该组件时会触发

# $refs的作用

在vue中我们获取dom元素或组件的实例可以通过$refs 来获取

<template>
  <div ref="divRef"></div>
  <component ref="comRef">组件</component>
</template>

<script>
this.$refs.divRef // 获取div dom 元素
this.$refs.comRef // 获取component 组件实例
</script>

# vue中为什么使用key

key具有唯一性, 以便它能跟踪每个节点的身份，在diff算法执行时更快的找到对应的节点，提高diff速度，使vue更快的渲染

# $nextTick的作用

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略（异步更新队列）进行 DOM 的更新。所以有时候我们想在数据修改后，立即对DOM状态做些什么，可能会有些棘手。所以vue提供了一个$nextTick方法，该方法会在组件的dom更新后会被触发。

this.$nextTick(()=>{
  // 做一些DOM操作
})

# 开发组件如何自定义v-model

v-model其实是一个语法糖

<input v-model="searchText">

// 等价于
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当给一个组件使用v-model时：

<template>
<com-input
  v-model"searchText"
/>

<!--等价于-->
<com-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
/>
</template>

在com-input组件内部，会自动接收value属性

<template>
  <div>
    <input :value="value" @input="change($event)" />
  </div>
</template>

<script>
 export default{
   props:["value"], // 组件内部自动结束value
   methods:{
     change(e){
       this.$emit('input',e.target.value) 
     }
   }
 }
</script>

另外组件内部还可以修改接收的数据value，和自定义事件input的名字

model: {
  prop: 'checked',
  event: 'change'
},
props: {
    checked: Boolean
},

# computed和watch的区别与应用

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

  • computed计算属性，该属性的结果会被缓存，只有当被计算的值发生改变时才会触发
  • watch 没有缓存功能，其触发方式类似于监听机制 + 事件机制

应用方面

  • computed擅长处理的场景：一个数据受多个数据影响
  • watch擅长处理的场景：一个数据影响多个数据

# 简单说一下vue中双向数据绑定

vue中的双向绑定主要使用了Object.defineProperty() 来劫持data中的数据，为其添加getter和setter方法。并在数据（对象）发生变动时触发响应的setter方法，然后通知订阅者Dep，触发相应的监听回调Updater。

# $router和$route的区别

  • $router 是路由操作对象，拥有push(),replace(),go(),push()等方法以及信息
  • $route 是当前激活的路由信息对象，里边存储着path,name,query,params,meta等信息

# params和query的区别

params 和 query 都是传参用的

  • params 是只用命名路由name引入，参数不会显示在页面上（地址栏上）
  • query 可以通过path路径方式也可以通过name引入，参数会显示到地址栏上
// 路由
{
  path:"/about",
  name:"About",
  component:()=>import("@/views/about.vue")
}

传参方式：

// params
this.$router.push({
  name:"About", // 必须使用name
  params:{
    id:1,
  }
})

// query
this.$router.push({
  path:"/about", // 也可以使用name，但一般使用path
  query:{
    id:1,
  }
})

接收方式

// params
this.$route.params;

// query
this.$route.query;

# vue-router导航钩子函数

全局钩子函数

  • beforeEach 进入路由前的钩子函数
  • afterEach 进入路由后的钩子函数

组件内钩子函数

  • beforeRouteEnter 进入组件前,改函数中不能获取组件实例this

  • beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用,如/foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候

  • beforeRouteLeave 导航离开该组件的对应路由时调用可以访问this

# 在vue中多页面如何共享数据

vue中页面之间共享数据常用的几个方法

  • 通过缓存（SessionStorage）进行数据共享
  • 通过路参传进行数据共享
  • 通过vuex进行数据共享
  • 以一个公共的vue实例作为桥梁，通过$on,$emit进行数据共享
  • 通过服务器进行数据共享

# vuex是什么，什么时候使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。当我们开发中大型项目，各组件间需要共享很多数据的时候经常会用到vuex。

最近更新时间: 8/6/2023, 10:08:31 AM

←

Vue2.x常见知识点