vue基础知识

1.什么是MVVM？

M-Model 数据：他是与应用程序的业务逻辑相关的数据封装载体 V-View 视图：它专注与界面的显示和渲染 VM-ViewModel：它是View与Model的粘合体，负责View与Model的交互和协作。Vue 双向绑定是通过 数据劫持 结合 发布订阅模式的方法来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法，get set 方法。MVVM 最标志的特性是数据绑定，核心理念是通过声明式的数据绑定实现View层和其它层的分离。完全解耦View层这种理念，也是的Web前端的测试用例编写变得简单。MVVM 最重要的一个特性就是数据双向绑定，而 React 是单向数据流，状态驱动视图，它没有纯粹意义上的 VM ，它有的只是用属性和状态来映射视图，很明显不是 MVVM。顶多也就是 MVVM 中的 V 层。对于 Vue 从技术上来说，Vue.js 主要关注 MVVM 模式的 ViewModel 层，它通过双向数据绑定连接视图和模型，他更像是 MVVM 但并未按照 MVVM 去实现，只是借鉴了 MVVM 中的一些思想。在 MVVM 的框架下视图和模型是不能直接通信的。它们通过 ViewModel 来通信，ViewModel 通常要实现一个 Observer 观察者，当数据发生变化，ViewModel 能够监听数据的这种变化，然后通知到对应的视图作自动更新，但当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以相互通信。

2.什么是MVC？

M-Model 数据：数据实体，用来保存页面要展示的数据。比如ajax获取的数据。V-View 视图：显示数据的页面，一般为html。C-Controller 控制器：控制整个业务逻辑，负责处理数据，比如数据的获取，以及数据的过滤，进而影响数据在视图上的展示。MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型），View（视图），Controller（控制器）。这主要是基于分层的目的，让彼此的职责分开。View 一般用过 Controller 来和 Model 进行联系。Controller 是 Model 和 View 的协调者，View 和 Model 不直接联系。基本都是单向联系。M和V指的意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

3.讲一下MVVM 和 MVC 的区别

MVVM 和 MVC 的区别有：1.MVVM 各部分的通信是双向的，而MVC各部分通信是单向的；2.MVVM 是真正将页面与数据逻辑分离放在js里去实现，而MVC里面未分离。

4.Vue3和Vue2不同点

1. 响应式系统重构，使用proxy替换Object.defineProperty属性，优势：
   （1） Proxy 可直接监听对象 添加/删除 属性；
   （2） Proxy直接监听 数组的变化
   （3） Proxy监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定性能优化
2. 新增组合式API（Composition API），更好的逻辑重用和代码组织：
   （1） setup配置
   （2） ref与reactive
   （3） watch与watchEffect
   （4） provide与inject
3. 重构虚拟 DOM，diff 算法
4. 生命周期更名
   Vue3.0提供了 Composition API形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
   beforeCreate ===> setup()
   created ===> setup()
   beforeMount ===> onBeforeMount
   mounted ===> onMounted
   beforeUpdate ===> onBeforeUpdate
   updated ===> onUpdated
   beforeUnMount ===> onBeforeUnmount
   unmounted ===> onUnmounted
5. 新的内置组件：Fragment，Teleport，Suspense
6. 移除：
   （1） 移除 v-on.keyCode修饰符，同时不再支持config.keyCodes
   （2） 移除 v-on.native 修饰符
   （3） 移除过滤器（filter）
   （4） 不再建议使用mixins，组合式函数本身就是更好的mixin替代品

5.vue2.x的响应式原理

1. 对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）
2. 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
3. 存在问题：
   （1） 新增属性，删除属性，界面不会更新
   （2） 直接通过下标修改数组，界面不会自动更新
   补充：vue2中$set可以解决这些问题。

6.vue3.0的响应式原理

1. 通过 Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写，添加，删除等。
2. 通过Reflect（反射）：对源对象的属性进行操作。

7.vue3.0 里为什么要用 Proxy API替代 defineProperty API？

defineProperty API 的局限性最大原因他只能针对单例属性做监听。

Vue2.x 中的响应式实现正是基于defineProperty中的descriptor，对data中属性做了遍历+递归，为每个属性设置了 getter，setter。这也就是为什么 Vue 只能针对 data 中预定义过的属性做出响应的原因，在Vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的，这是defineProperty的局限性。b.Proxy API 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有的属性，将会带来很大的性能提升和更优的代码。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持他内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。在Vue.js 3.0中，使用 Proxy API 并不能监听到对象内部深层次属性变化，因此他的处理方式实在getter中去递归响应式，这样的好处是真正访问到内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

8.vue3.0 编译做了哪些优化？

1. 生成 block tree

Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级，单个组件内部，需要遍历该组件的整个 vnode 树。在 2.0 里，渲染效率的快慢与组件大小成正比：组件越大，渲染效率越慢。并且，对于一些静态节点，无数据更新，这些遍历都是性能浪费。Vue.js 6.0 做到了通过编译阶段对静态模板的分析，编译生成 Block tree。Block tree 是一个将模板基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的，每个区块只需要追踪自身包含的动态节点。所以，在 3.0 里，渲染效率不在于模板大小成正相关，而是与模板中动态节点的数量成正相关。

2. slot 编译优化

Vue.js 2.x 中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件 update，造成性能的浪费。Vue.js 3.0 优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎