前端面试准备-------Vue

最新推荐文章于 2024-07-12 17:50:49 发布

fj1247565817

最新推荐文章于 2024-07-12 17:50:49 发布

阅读量1.1k

点赞数 1

分类专栏：问题面试代码文章标签： Vue Vue面试前端面试

本文链接：https://blog.csdn.net/fj1247565817/article/details/100138495

版权

本文深入探讨Vue.js的核心概念，包括解决的问题、MVVM模式、自定义组件实现、nextTick机制、生命周期、虚拟DOM原理、双向绑定、组件间通信，以及Vue-router和Vuex的理解。详细讲解了Vue在实际项目中的应用，如路由权限控制和状态管理。

摘要由CSDN通过智能技术生成

~~本文是根据知乎~~ 爱前端不爱恋爱~~提供的目录整理供大家学习，后将持续更新~~
1、vue解决了什么问题
2、MVVM的理解
3、如何实现一个自定义组件，不同组件之间如何通信的？
4、nextTick
5、生命周期
6、虚拟dom的原理
7、双向绑定的原理？数据劫持？
8、组件通信
父->子
子->父
9、Proxy 相比于 defineProperty 的优势
10、watch computed区别
11、vue-router(hash， HTML5 新增的 pushState）
12、单页应用，如何实现其路由功能—路由原理
13、vue-router如何做用户登录权限等
14、你在项目中怎么实现路由的嵌套
15、vuex的理解

一、vue解决了什么问题

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。创建可维护性和可测试性更强的代码库。

二、MVVM的理解

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

Model（模型）是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

View（视图）是用户在屏幕上看到的结构、布局和外观（UI）。

ViewModel（视图模型）是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

绑定器声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

三、如何实现一个自定义组件，不同组件之间如何通信的？

vue-cli项目创建一个Loading效果的组件
定义一个组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="test">
			<father></father>
		</div>
		<script>
			//全局组件
			 Vue.component('father', {
			  data: function () {
					return {
					  count: 0
					}
			  },
			  template: '<div>我是一个组件----{
  {count}}</div>'
			}) 
			new Vue({
			  el: '#test'
			})
		</script>
    </body>
</html>

不同组件之间通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="test">
			<child :content='2'></child>
			<child :content='3'></child>
		</div>
		<script>
			Vue.prototype.bus = new Vue();
			//全局组件
			Vue.component('child', {
			  data () {
				  return {
					  selfcontent: this.content
				  }
			  },
			  props: {
				  content: Number
			  },
			  template: '<div @click="handleClick">我是一个组件----{
  {selfcontent}}<