综合：https://segmentfault.com/a/1190000015560315
https://blog.csdn.net/liang377122210/article/details/71545459
https://blog.csdn.net/xutongbao/article/details/77870989
所有这些文章都写得很好。
1.什么是Vue.js？
Vue 是一个js 库，与jquery 一样，它不依赖于其他js 库。 Vue 的核心库只关注视图层，非常容易与其他库和现有项目集成。 Vue.js 是一个轻量级、高性能、可组件的MVVM 库，具有非常易于使用的API。
2.Vue的MVVM设计模式是什么？jQuery和jQuery有什么区别？
如果你了解前端，你应该知道两种设计模式：MVVM 和MVC，并且很可能对MVP 也有一些了解。
MVC 代表模型（Model）、视图（View）、控制（Control），jQuery 使用了这种设计模式。熟悉jQuery的同学可能已经熟悉$()了。
MVVM 是模型、视图、ViewModel。这是一个数据驱动的模型。即一切都是通过操作数据来完成，尽量避免操作dom树。
也就是说，我们不关注dom 的结构，而是根据情况考虑如何通过视图模型处理用户交互以及如何与模型层交互。这个过程运行ajax，然后返回到视图层。视图和视图模型之间的双向数据绑定允许您完全消除操作DOM 的麻烦，而专注于处理用户交互，避免以下问题： MVC控制层太厚。
现在，如果我们抽象网页应用程序，则HTML DOM 实际上就是视图。网页通过DOM组合和嵌套将CSS修改为基本视图结构，形成其最基本的视图结构。最后，对于交互部分，我们使用JavaScript来接受用户交互请求，通过事件机制响应用户交互，响应具体的DOM变化等。你需要在事件处理函数内部更改各种数据：innerHTML或内部文本部分。
HTML 的DOM 可以分为独立于其他部分的层。该层称为视图层。 Vue的核心库只关注视图层
为什么我们需要把视图层抽出来单独关注呢？
因为在像知乎这样页面元素众多、结构庞大的网页中，当数据和视图都像传统开发那样混合在HTML 中时，处理它们就变得非常困难，繁琐和断开的连接会给你带来重大问题。多个结构之间的代码。问题是什么？
还记得刚开始写JQuery的时候，写过$('#xxx').parent().parent().parent()这样的代码吗，感觉少了，找找不是更好吗？这个元素的父亲的父亲？在注释中说清楚。但是，如果项目组负责人或产品经理突然请求对您几天后创建的网页进行更改，则此更改请求将影响页面的结构。也就是说，DOM 关联和嵌套级别会发生变化。 $('#xxx').parent().parent().parent() 变为$('#xxx').parent().parent().parent().parent().parent () 存在。
这不是问题。随着产品迭代越来越快，变更越来越多，当一个页面上有多个相似的相关或嵌套的DOM 元素时，变更就变得非常繁琐。此外，使用JQuery 选择器查找页面元素并操作DOM 本身可能会对性能造成影响，当打开此页面时，它会越来越卡住。
如果你在创建项目时遇到这种问题，你肯定会抱怨。为什么这个世界上有像Inception 这样需要无数嵌套div 来创建页面的HTML？当初为什么要学JQuery？就是简单的DOM操作，现在看来一点也不简单。你学过假JQuery吗？为什么写代码这么难？归咎于你的电脑破坏了你的电脑，或者用你的键盘敲击你的产品的狗的头，让你的原始代码在需求每天都在变化的时候变得又臭又长。
如果你此时已经学习了Vue.js，这些抱怨将不再存在。
3.Vue.js有什么优点？
声明式和反应式数据绑定
组件开发
虚拟DOM
响应式数据绑定
1.jQuery必须先获取dom对象，然后改变dom对象的值。
2.vue首先将值绑定到js对象上，然后更改js对象中的值。 Vue 框架自动更新dom 值。
3. 当你从现在开始使用Vue时，你会很容易理解Vue帮助你执行dom操作，你需要改变对象的值并与元素进行匹配。
通过对象绑定，Vue 框架会自动帮助您进行DOM 相关的操作。
4、这样当dom元素根据JS对象的值的变化而变化时，称为“单向数据绑定”，而当JS对象的值也跟随dom元素的变化时，它被称为“单向数据绑定”。
随着值的变化而变化称为双向数据绑定。
!DOCTYPE html
html lang='en'
头
元字符集='UTF-8'
titlevue.js 测试- 代码美专栏/标题
!-- 作者： 畅维码美https://zhuanlan.zhihu.com/codes --
脚本src='https://unpkg.com/vue/dist/vue.js'/script
/头
身体
div id='应用程序'
input type='text' name='' value='' placeholder='此处输入文本将更改以下内容' v-model='message'
时间
p{{消息}}/p
/div
脚本类型='文本/javascript'
var 应用=新Vue({
el: '#app',
数据： {
message: '你好，Vue！'
}
})
/剧本
/身体
/html
您是否注意到一个非常奇怪的现象，即文本框中输入的字符串会随着下一个p 标签的内容而变化？
换句话说，p标签通过{{message}}绑定到input标签的值，如果它发生变化，与其绑定的其他数据也会相应变化。
与标题结合时，vue.js 会自动响应数据变化，更改所有数据，并根据用户之前在代码中编写的绑定关系显示绑定的内容。这种绑定关系是由图表输入标记的v-model 属性声明的，因此您可能会在其他地方听到其他人松散地将vue.js 称为声明性渲染模板引擎。
组件开发
构成整个VUE 文档最大部分的组件是高度可加的。如果组件不是那么容易重复使用并且不易受到污染，我可能会发疯很多次。
例如，您正在尝试运行一个100 页的项目。其中，33个导航栏在A导航栏设有模块，67个导航栏在B导航栏设有模块，其中33个导航栏在A导航栏设有模块。可分为A1、A2、A3、A4……
如果你想使用jQuery解决这个问题，你需要自己封装模板插件并编写一个(A,B,A1,A2,An).length模板或在模板中编写一个模板。
我好累啊，你个王八蛋。
至此，VUE的模板就非常简单了。首先计算需要的组件数量，然后检查组件是否相互嵌套（写出组件的标签）。这很简单，因为您只需将要传递给组件的参数写入组件标签内，然后将组件标签嵌套在组件标签内即可。这可以通过更改传递的参数来实现。
我还记得传统的前端开发中，每个人都会创建自己的页面，最终集成不同的后端模板引擎，例如PHP中的Smarty或Java中的JSP。
但目前我们正在创建一个单页面应用程序。页面操作和结构非常复杂，单个页面上需要编写的模块很多，单个模块的代码量和工作量往往非常大。开发自己的方法可能会非常累人。另外，如果将来产品需求发生变化，我担心如果我移动其中一个div，其他div 会跟随并弄乱整个页面，或者更改一些内部DOM 事件。 JavaScript的事件冒泡机制导致函数处理后出现各种神秘莫测的bug。
面向对象编程利用面向对象的思想，将不同的模块封装成类，并将大型的业务模块拆分成许多更小的类。面向过程的编程还可以让你把一些大的功能拆分成很多功能，分配给不同的人开发。
前端应用是否也可以封装模块，类似于编程？这里引入组件开发的概念。
Vue.js 通过组件将单页面应用中的各个模块分离成单独的组件（组件）。你要做的就是先在父应用中写入各种组件标签（占坑），然后写入你想要传递给组件的参数。在组件标签内（类似于向函数传递参数，我们将这些参数称为组件的属性），然后编写（填空）各个组件的实现来完成整个应用程序。
虚拟DOM
如今，随着互联网速度越来越快，许多人家中安装了数十甚至数百根光纤，难怪网页只有几百千字节。而且浏览器本身缓存了很多资源文件。那么为什么打开之前打开的已经用几十M光纤缓存的页面仍然感觉很慢呢？这是因为浏览器本身在处理DOM 时存在性能瓶颈。特别是在传统开发中，如果您频繁使用JQuery 或原生JavaScript DOM 操作函数来操作DOM，则浏览器必须不断显示新的DOM 树，这会让您的页面看起来非常糟糕。卡住。
Virtual DOM 是虚拟DOM 的英文名称。简单来说，它是一种可以让你通过JavaScript 提前进行各种计算，从而计算并优化最终DOM 操作的方法。这个DOM 操作是一个预处理操作，因此没有实际的DOM 操作。因此称为虚拟DOM。最后，计算完成后，DOM操作才被真正提交，并且DOM操作的变化会反映在DOM树中。
目前业界对于vue.js 的虚拟DOM 评价褒贬不一。有些人认为Vue.js 是一个轻量级框架。引入Virtual DOM会增加Vue.js本身的代码大小并增加CPU消耗（增加手机上的功耗）（注意：并不意味着更多的CPU消耗）。 JavaScript 计算在后台进行，计算强度不足以使DOM 操作陷入困境（出现额外的延迟），而操作单个DOM 元素会导致额外的计算过程，从而减慢该过程。不过，由于Vue.js 主要用于开发页面内容较多的元素，因此操作的DOM 大小一般较大，有些人认为平均起来更划算。
版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。
