vue总结

1、什么是vue.js

2、框架和库的区别

3、MVC和MVVM的区别

4、vue生命周期函数、特点、作用

5、vue常见指令

[6、 v-text和v-html的相同点、区别](#6、 v-text和v-html的相同点、区别)

[7、 v-model数据双向绑定原理](#7、 v-model数据双向绑定原理)

1、什么是vue.js

vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，vue 采用自底向上增量开发的设计

vue 的核心库只关注视图层

特点：轻量级，减少不必要的DOM操作

理念：数据驱动视图，组件化开发

2、框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性较大。如果项目需要更换框架，则需要重新架构整个项目

库（插件）：提供某一个小功能，对项目的侵入性较小。如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。例如：从Jquery 切换到 Zepto

3、MVC和MVVM的区别

MVC(Model-View-Control)和MVVM(Model-View-ViewModel)是两种常见的软件架构模式，主要区别在于数据绑定机制、组件交互方式和耦合度

MVC：将应用程序分为三个部分：Model（模型，负责数据和业务逻辑）、View（视图，负责用户界面展示）、Controller（控制器，负责接收用户输入并协调Model和View）

MVVM：同样分为Model、View和ViewModel（视图模型），其中ViewModel作为View和Model之间的桥梁，通过数据绑定实现自动同步

区别：

（1）数据绑定机制：MVVM强调双向数据绑定，Model的变化自动更新View，用户交互也自动更新Model，减少了手动操作。MVC中Controller需要手动更新View

（2）组件交互方式：MVC中Controller直接处理用户输入并更新Model和View，View和Model通过Controller通信。MVVM中ViewModel处理业务逻辑和数据转换，View通过绑定与ViewModel交互，不与Model直接通信

（3）耦合度与测试性：MVVM的View更独立于Model，ViewModel可单独测试，降低了耦合。MVC中Controller和View耦合较紧，测试难度较高

（4）代码结构与维护：MVVM通过ViewModel分离视图逻辑，代码更清晰、易于维护。MVC在复杂项目中可能导致Controller职责过多，代码结构复杂

（5）适用场景：MVC适用于传统Web应用或需要清晰分工的复杂业务逻辑。MVVM更适合需要大量数据绑定的单页面应用（SPA）或前端开发

4、vue生命周期函数、特点、作用

beforeCreate：创建之前，一般用于页面重定向。此时该对象只有默认的生命周期函数和默认的事件，data和methods中的数据还没有初始化好

created：创建之后，接收请求和数据初始化。此时可以调用methods中的函数或操作data中的数据

beforeMount：虚拟DOM挂载前，此时页面尚未更新，但在内存中已编译完成

mounted：虚拟DOM挂载后，如需要操作DOM，可在次生命周期中执行

beforeUpdate：页面数据更新前，执行前页面中显示的是旧数据，但data中的数据是最新的，页面尚未更新

updated：页面数据更新

beforeDestroy：销毁前，实例中的数据还处于可用的状态，一般用于清除定时器和监听器

destroyed：销毁后，实例中所有的数据都不可使用

5、vue常见指令

（1）{{}}：插值表达式

（2）v-text/v-htnl：替换或覆盖标签中的内容或节点

（3）v-cloak：防止界面闪烁。在vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现界面防止闪烁

（4）v-bind(:属性名)：属性值绑定

（5）v-on(@click="")：事件绑定

（6） v-model：数据双向绑定

（7）v-for：循环遍历

（8）v-if、v-show：显示/隐藏

6、 v-text和v-html的相同点、区别

相同之处：都可以替换或覆盖标签中的内容或节点

不同之处：v-html：可以解析富文本，即将里面的内容呈现出来

v-text：不能解析富文本，保持原样输出，显示节点、标签等内容

7、 v-model数据双向绑定原理

双向绑定 = 单向绑定(数据→视图) + 事件监听(视图→数据)

v-model实际上是一个语法糖，无论是原生的表单元素还是自定义组件，v-model的核心是通过监听输入事件和触发更新事件来实现数据的双向绑定

8、v-for为什么设置key

key的作用：为每个列表项提供一个唯一标识，对每一次的数据进行记录，提高重排效率

key的要求：key只能是字符串或数字，且必须是唯一的

9、v-for遍历数组、对象、数字

遍历数组：v-for = "(item, index) in arr" :key = "index"

遍历对象：v-for = "(value, key, index) in obj" :key = "index"

遍历数字：v-for = "num in 10" :key = "num"

10、v-if与v-show的区别

v-if：删除DOM元素，不占位置，应用场景：条件不经常改变或元素较复杂的场景

v-show：不删除DOM元素，占位置，应用场景：需要频繁切换显示状态的场景

11、vue中数据双向绑定的原理

vue2：通过数据劫持结合发布者-订阅者模式的方式实现的。通过Object.defineProperty()来劫持各个属性的getter、setter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说，数据和视图是同步的，数据变化视图随之变化，视图变化数据也随之发生改变

vue3：通过Proxy(代理)的方式实现(即Proxy代替了Object.defineProperty())，拦截对data任意属性的操作

12、Vuex

（1）什么是Vuex

Vuex是一个专为Vue.js应用程序设计的‌状态管理模式+库‌，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

（2）解决什么问题

解决不同组件共享数据的问题、不同视图需要变更同一状态的问题

（3）vuex的核心模块

state：存储全局状态数据，可通过this.$store.state访问

getter：基于state的计算属性，对状态进行计算、过滤或封装，并在多组件间复用，可通过this.$store.getters访问

mutation：对数据进行修改。mutations中的函数必须同步执行。可通过this.$store.commit('type')提交变更

action：处理异步操作(如API请求、定时任务)，通过提交mutations来间接修改state.。通过this.$store.dispatch('actionName') 触发。它允许包含任意异步逻辑，但最终状态修改仍由同步的Mutation完成

modules：模块化。当应用状态复杂时，允许将Store分割成模块，每个模块都拥有自己的state、mutations、actions、getters，甚至嵌套子模块，从而避免单一状态树过于臃肿

13、vue中的通信方式有哪些

（1）props 和 events：父子组件之间

①、父传子：通过 props，父组件向子组件传递数据，在子组件中，需要声明 props，并使用 props 接收来自父组件的数据

javascript 复制代码

//父组件
<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

javascript 复制代码

//子组件
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

②、子传父

子组件通过 events($emit) 发送数据给父组件

在父组件中，需要为子组件监听 events，在事件监听函数中接收来自子组件的数据

javascript 复制代码

//子组件
<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

javascript 复制代码

//父组件
<template>
  <child-component  @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

（2）Vuex

Vuex 是 Vue 中用于状态管理的一个官方插件。Vuex 实现了一个全局的状态管理模式。它通过 store 集中管理应用程序的所有组件的状态。当多个组件共享状态时，使用 Vuex 可以更方便地管理组件之间的数据交换和通信

首先，需要创建一个 Vuex store

javascript 复制代码

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

在组件中，可以使用 $store 访问 store 中的状态，使用 commit 方法来提交 mutations 来修改状态

javascript 复制代码

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

（3）$ref

Vue 中的每个组件都具有 $refs 属性。$ refs 属性是一个对象，包含了在组件中使用 ref 属性命名的子组件或 DOM 元素的引用。通过 $refs 属性，组件之间可以相互引用和调用

例如，可以在父组件中通过 ref 属性获取子组件的引用

javascript 复制代码

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

在子组件中，需要定义 updateMessage 方法

javascript 复制代码

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

（4） $parent 和$ children

Vue 中的每个组件都具有 $parent 和$ children 属性。 $parent 属性指向组件的父组件，$ children 属性指向组件的子组件。通过 $parent 和$ children 属性，组件可以直接访问父组件和子组件的数据和方法

例如，父组件可以通过 $children 属性访问子组件的数据和方法

javascript 复制代码

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

在子组件中，需要定义 message 和 updateMessage 方法

javascript 复制代码

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

（5）Event Bus

Event Bus 是一种广泛使用的中央事件系统，可以在 Vue 组件之间有效地传递事件。Event Bus 是一个简单的 Vue 实例，可以通过 $emit 方法向其他 Vue 组件发送事件，也可以通过$ on 方法接收其他 Vue 组件发送的事件

在实现 Event Bus 时，需要创建一个新的 Vue 实例

javascript 复制代码

import Vue from 'vue'

const bus = new Vue()

export default bus

然后，可以在组件中引入 Event Bus 并使用 $emit 发送事件，使用$ on 接收事件

javascript 复制代码

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

（6）Provide 和 Inject

Vue 2.2 中新增的 Provide 和 Inject 是一种高级的组件通信方式。Provide 和 Inject 允许父组件将数据传递给所有后代组件，而不是只传递给直接子组件。Provide 和 Inject 是一种不同于 props、events 和 $parent/$ children 的组件通信形式，是一种更加灵活和封装性更强的通信方式

父组件通过 provide 提供数据

javascript 复制代码

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

在子组件中，需要定义 inject 接收父组件传递的数据

javascript 复制代码

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    inject: ['message']
  }
</script>

（7）缓存

localStorage：存储的数据会一直在浏览器本地存储，除非手动清除，且只会存储字符串

sessionStorage：存储的数据在浏览器关闭后就会清除

javascript 复制代码

//保存数据
localStorage.setItem(key, value)
//获取数据
localStorage.getItem(key)
//删除单个数据
localStorage.removeItem(key)
//删除所有数据
localStorage.clear()

14、插槽

插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模块的代码，如HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

（1）默认插槽<slot></slot>：允许父组件向子组件的内容中插入内容

html 复制代码

//子组件
<template>
  <div>
    <h2>子组件标题</h2>
    <slot>默认内容</slot>
  </div>
</template>

html 复制代码

//父组件
<template>
  <ChildComponent>
    <p>这是插入到子组件中的内容。</p>
  </ChildComponent>
</template>

（2）具名插槽：允许为插槽命名，这样可以在一个组件中定义多个插槽，并允许父组件指定将内容插入到哪个插槽中

html 复制代码

//子组件
<template>
  <div>
    <h2>子组件标题</h2>
    <slot name="header">默认头部内容</slot>
    <slot name="footer">默认底部内容</slot>
  </div>
</template>

html 复制代码

//父组件
<template>
  <ChildComponent>
    <template v-slot:header>
      <p>这是头部的内容。</p>
    </template>
    <template v-slot:footer>
      <p>这是底部的内容。</p>
    </template>
  </ChildComponent>
</template>

//简写
<template>
  <ChildComponent>
    <p slot="header">这是头部的内容。</p>
    <p slot="footer">这是底部的内容。</p>
  </ChildComponent>
</template>


//使用 v-slot 指令的缩写 #
<template>
  <ChildComponent>
    <template #header>
      <p>这是头部的内容。</p>
    </template>
    <template #footer>
      <p>这是底部的内容。</p>
    </template>
  </ChildComponent>
</template>

15、路由

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现

16、路由跳转及传参

（1）声明式

javascript 复制代码

<router-link to="/detail">去详情页</router-link>

<router-link to="/detail?id="10&name="11111">去详情页</router-link>
<router-link :to="{ path: 'detail', query: { id: 10, name: '11111'}}">去详情页</router-link>
<router-link :to="{ name: 'detail', params: { id: 10, name: '11111'}}">去详情页</router-link>

（2）函数式

javascript 复制代码

toDetail(){
    this.$router.push({ path: 'detail' })
}

toDetail(){
    this.$router.push({ path: 'detail', query: { id: 11} })
}

17、路由守卫

（1）什么是路由守卫

路由守卫是路由在跳转前、后过程中的一些钩子函数。在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作

（2）路由守卫参数

to：目标路由对象

from：即将要离开的路由对象

next()：放行

（3）路由守卫分类

全局守卫：作用于所有路由的跳转，是最常用的守卫类型。钩子函数有beforeEach、beforeResolve、afterEach

router.beforeEach(全局前置守卫)：在每次路由跳转前触发。通常用于进行登录状态、访问权限等全局性验证。在此守卫中，可以通过返回false、调用next(false)或返回一个路由地址对象来取消或重定向当前导航

router.afterEach(全局后置守卫)：在导航确认(即跳转完成)后触发。由于导航已经完成，在守卫无法改变导航结果，常用于页面分析、修改页面标题等扫尾工作

router.beforeResolve(全局解析守卫)：在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。适用于需要确保所有数据或组件都准备就绪的场景

javascript 复制代码

router.beforeEach((to, from, next) => {
 console.log(to) => // 到哪个页面去？
 console.log(from) => // 从哪个页面来？ 
next() => // 一个回调函数
 } 
router.afterEach（to，from） = {}

组件内守卫：钩子函数有beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter：在进入该组件对应路由前调用。此时组件实例尚未创建，因此无法访问this

beforeRouteUpdate：在当前路由改变但组件被复用时调用(例如，在带有动态参数/user/:id的路由间切换)。此时可以访问组件实例this，常用于根据新参数获取数据

beforeRouteLeave：在离开该组件对应路由前调用。可以访问该组件实例this，常用于防止用户在未保存编辑内容时意外离开页面

javascript 复制代码

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
 beforeRouteEnter (to, from, next) { 
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
 next(vm => {})
 }
 beforeRouteUpdate (to, from, next) { 
// 同一页面，刷新不同数据时调用， 
} 
beforeRouteLeave (to, from, next) { // 离开当前路由页面时调用 }

路由独享守卫 ：在定义单个路由的配置对象中直接通过 ‌**beforeEnter** ‌ 属性设置，仅对该特定路由生效。它提供了一种比全局守卫更精细化的控制方式，例如，可以为管理员页面单独设置权限检查。‌‌钩子函数有**beforeEnter**‌

javascript 复制代码

export default new VueRouter({
 routes: [ 
{ 
path: '/',
 	  name: 'home', 
component: 'Home',
 beforeEnter: (to, from, next) => { // ... }
 } ]
 })

18、同源策略和跨域

同源策略CORS：浏览器的一个安全协议（不限制服务），协议、主机、端口（协议://域名:端口）要保持一致，只要有一个不一致就是跨域请求

19、如何解决跨域问题

后台直接不做限制，放开所有请求。优点：方便缺点：不安全

JSONP：原理：利用script标签不受同源策略，需要后端配合

配置代理（目前90%都在用）：在vue.config.js中进行配置代理（可以配置多个）

20、computed和watch的区别

computed ：计算属性，computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；

应用场景：多个数值影响一个数值的时候，购物车商品结算。

watch：属性监听，是一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

应用场景：一个数值影响多个数值，在搜索框

21、防抖和节流

（1）防抖

①定义：在一段时间内，只执行最后一次操作。如果期间一直触发，就会不断重置计时

②为什么要防抖：有的操作是高频触发的，但是其实触发一次就好。比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。即等用户高频事件完了，在进行事件操作

③防抖的原理：事件触发 → 清除 timer → 重新计时 → 最后一次执行

javascript 复制代码

function debounce(func, delay) {
  let timer;
  return function (...args) {
    if (timer) clearTimeout(timer); // 清除之前的定时器
    timer = setTimeout(() => {
      func.apply(this, args); // 在正确上下文中执行原函数
    }, delay);
  };
}


function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

（2）节流

①定义：固定时间内只执行一次，若在n秒内重复触发，只有一次生效

②为什么要节流：防抖存在一个问题，事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。这里正确的思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。即某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次

③节流原理：如果你持续触发某个事件，特定的时间间隔内，只执行一次

javascript 复制代码

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

（3）总结

①防抖和节流的相同点**：**防抖和节流都是为了阻止操作高频触发，从而浪费性能。

②防抖和节流的区别：

防抖是让你多次触发，只生效最后一次。适用于只需要一次触发生效的场景。

节流是让你的操作，每隔一段时间触发一次。适用于多次触发要多次生效的场景

22、vue2和vue3的区别

‌Vue 3 是 Vue 2 的重大升级版本，在响应式系统、API设计、性能、TypeScript支持等方面进行了显著改进。‌ 主要区别在于 Vue 3 使用 Proxy 实现响应式系统，引入了 Composition API，并进行了多项性能优化（如 Diff 算法、静态提升、打包体积减小），同时新增了 Fragment、多 v-model 绑定等特性

（1）‌响应式系统‌：Vue 2 使用 Object.defineProperty 实现，无法自动响应新增属性，需借助 Vue.set；Vue 3 改用 Proxy，能直接拦截整个对象，自动支持动态属性，性能更优

（2）API 设计‌：Vue 2 采用 ‌Options API‌，将代码按 data、methods、computed 等选项分类，逻辑易分散；Vue 3 引入了 ‌Composition API‌（主要在 setup() 函数中组织代码），使相关逻辑更集中，便于复用和维护

（3）‌生命周期钩子‌：Vue 2 使用 created、mounted 等；Vue 3 在 Composition API 中以函数形式使用，如 onMounted、onUpdated，且 beforeDestroy 和 destroyed 更名为 beforeUnmount 和 unmounted

（4）‌TypeScript 支持‌：Vue 2 支持较基础；Vue 3 设计时充分考虑 TypeScript，集成更紧密，类型推导更友好

23、事件修饰

.stop：阻止冒泡（冒泡：从内到外）

.capture ：添加事件侦听器时使用事件捕获模式（捕获：从外到内）

.self ：只当事件在该元素本身（比如不是子元素）触发时触发回调

.once：事件只触发一次

.prevent ：阻止默认事件（form表单和a标签跳转）

24、键盘修饰符

v-on:keyup：监听所有按钮

v-on:keyup.按键码：监听指定按键

使用：@keyup.space="keyup"

.enter：回车键

.tab

.delete：删除键或退格键

.esc：退出键

.space：空格键

.up

.down

.left

1、什么是vue.js

2、框架和库的区别

3、MVC和MVVM的区别

4、vue生命周期函数、特点、作用

5、vue常见指令

6、 v-text和v-html的相同点、区别

7、 v-model数据双向绑定原理

8、v-for为什么设置key

9、v-for遍历数组、对象、数字

10、v-if与v-show的区别

11、vue中数据双向绑定的原理

12、Vuex

（1）什么是Vuex

（2）解决什么问题

（3）vuex的核心模块

13、vue中的通信方式有哪些

（1）props 和 events：父子组件之间

（2）Vuex

（3）$ref

（4）parent 和 children

（5）Event Bus

（6）Provide 和 Inject

（7）缓存

14、插槽

15、路由

16、路由跳转及传参

17、路由守卫

18、同源策略和跨域

19、如何解决跨域问题

20、computed和watch的区别

21、防抖和节流

（1）防抖

（2）节流

（3）总结

22、vue2和vue3的区别

23、事件修饰

24、键盘修饰符

（4） $parent 和$ children