-
vue是什么
2018-12-16 14:57:46为什么要用vue 传统的网页形式是浏览器脚本语言js连接了各种各样的Html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，...展开全文vue
为什么要用vue
传统的网页形式是浏览器脚本语言js连接了各种各样的Html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，比如juqery中使用的
$('#xxx').parent().parent().parent()一开始很好查找，但当页面结构发生变化，也就是说DOM的关联与嵌套层次要发生改变，那么之前的代码可能就会变成这样了：
$('#xxx').parent().parent().parent().parent().parent()这样产品迭代后，对dom节点的查找操作等行为会有很大的性能损耗。
vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的：
1.易用：
学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦
2.灵活：
如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统 ，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。
3.高效：
- 虚拟dom： 其数据全部在内存中，只有js引擎参与其中
而真实dom会有浏览器渲染层在其中
你的知道浏览器的虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：
虚拟DOM不会进行排版与重绘操作
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
真实DOM频繁排版与重绘的效率是相当低的
虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）
使用虚拟DOM的损耗计算：
总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘
直接使用真实DOM的损耗计算：
总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘
只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的 次数.
虚拟DOM只是个 JavaScript object
它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.
获取/修改 大量DOM元素的时候，就会先在 虚拟DOM 里 取值 对比.
虚拟dom是在内存中维护的dom树，是在实体dom之上的一层抽象。有了这层抽象，不管是查询操作还是修改操作，都是先操作内存中的虚拟dom，在这个过程中可以做很多优化，从而减少对实体dom的操作。举两个例说明，1. 查询一个text标签的值，可以直接从虚拟dom中查找得到，根本不需要查询实体dom。2. 在一次操作中，要修改列表中的两条记录，要修改的元素会先把变更同步到虚拟dom上，然后根据最新的虚拟dom，一次性渲染出最终的实体dom，如果没有虚拟dom，两条记录的修改至少要对应两次对实体dom的操作，显然操作实体dom越频繁，网页速度越慢。
对于vue.js的Virtual DOM，目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架，引入Virtual DOM会加大Vue.js本身的代码尺寸，也会消耗更多CPU（手机上会更耗电）（注意：消耗更多的CPU并不意味着会更卡，因为JavaScript计算是后台计算，他的计算量还不至于让DOM操作变得卡顿），并且在操作单个DOM元素的时候，反而多了一道计算工序，会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素，肯定操作的DOM量级普遍较大，平均一下还是比较划算的。
4.社区和第三方组件库丰富
- 社区
论坛（https://forum.vuejs.org/） - 提问答疑的最好地方。
Gitter（https://gitter.im/vuejs/vue） - 开发者聊天室。在这里你可以提问，不过最好在论坛提问，因为论坛有版块。
Github（https://github.com/vuejs） - 报告问题，提交请求，为你所做的任何贡献表示深深感谢！ - vue组件库:
element-ui Mint UI
muse-ui
vue是什么
1.Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
这里渐进式框架也就是上边vue特点中的灵活一项，使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；
比如说刚开始用数据绑定做一个表单，后来控制整个页面的dom，再后来用router控制路由做单页应用，组件配合，vuex与数据配合等等，使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用。
2.Vue 只关注视图层， 采用自底向上增量开发的设计。
- 视图层：
那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。
我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。
- MVVM
是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。- MVC
控制器负责对模型中的数据进行更新，而视图向模型中请求数据；当有用户的行为触发操作时，会有控制器更新模型，并通知视图进行更新，在这时视图向模型请求新的数据
3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- 响应的数据绑定：
就是vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js测试 -</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message"> <hr> <p>{{ message }}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>- 组合的视图组件：
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑）.
组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行（组件化）
- 组件化优点：
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
- 虚拟dom： 其数据全部在内存中，只有js引擎参与其中
-
Vue是什么
2018-07-15 09:58:28Vue是什么？学习一样东西，总要知道他是什么，查了看了还是感觉没懂，感觉没懂，别人说的天花烂坠还是不懂。 我的一点想法： 由于我是个“不安分的人“，也是个“放不下事情的人“，所以就有了自己的一点小看法，...展开全文- Vue是什么？学习一样东西，总要知道他是什么，查了看了还是感觉没懂，感觉没懂，别人说的天花烂坠还是不懂。
我的一点想法：
- 由于我是个“不安分的人“，也是个“放不下事情的人“，所以就有了自己的一点小看法，vue是在原html文档中嵌入的n个vue的小实例，小实例如同angularjs里面的一个个controller,限定了这一块区域归哪个实例来管束。
- 被哪个实例管束，就可以想操作皮影似的操作，实例的方法和数据来操作皮影如何跳啊
-
vue是什么？
2017-02-21 15:33:32vue是什么？vue是一个数据驱动框架，做spa页面的。就是数据驱动视图，可以减少dom操作，只要给$scope或者react里的state属性一赋值，dom元素的更新是自动的，不需要jquery去操作dom，给数据视图自动更新，这就是数据...展开全文vue是什么？
vue是一个数据驱动框架，做spa页面的。就是数据驱动视图，可以减少dom操作，只要给$scope或者react里的state属性一赋值，dom元素的更新是自动的，不需要jquery去操作dom，给数据视图自动更新，这就是数据驱动。
vue如果不做页面可以当做一个单独使用的js库，做双向数据绑定用。
vue 核心库只关注图层，但是vue并不只关注视图，和angular一样也有指令，过滤器这些东西。
vue有非常强大的单文件组件，就是css+html+js都卸载一个vue文件中，这样定义的组件很简洁，清晰，组件划分的很彻底，而angular中的js文件只能写js，虽然react中可以写css-in-js，但是缺乏选择器功能，即便可以在js中引入css文件，但还是不方便
开发采用 vue2.0+vue+router+fetch+vuex
比较其他框架而言，比react快 ，是借鉴了多个框架并优化框架。
-
Vue原理解(一): Vue 是什么？
2019-09-21 16:25:28Vue, 现阶段受热指数上升比较块的前端架构。...vue 是什么？ 我们在使用vue时，初始化操作都会使用new Vue({…})，不难发现 vue 其实是一个类。 不过ES6普及的今天，vue 的定义任是普通构造函数。 为什么不用 ...展开全文Vue, 现阶段受热指数上升比较块的前端架构。有必要从源码的角度，对它的功能的实现原理一窥究竟。看源码一般主要看两样东西， 从宏观角度是它的设计思想和实现原理； 微观上则是编程技巧。 这里我们侧重点是实现原理上。
Vue 原理概要(< V3.0)
vue 是什么？
我们在使用vue时，初始化操作都会使用new Vue({…})，不难发现 vue 其实是一个类。 不过ES6普及的今天，vue 的定义任是普通构造函数。 为什么不用 ES6的class 呢？ 稍后会介绍。 首先来看看vue 被定义的地方：function Vue(options) { ... this._init(options) }这里省略掉了，flow的类型检查及一些边界情况的源码及讲解。比如省略号这里边界情况是使用必须是new Vue() 的形式，否则会报错。
其实vue 源码就像一颗树， 在看之前最好先确定看什么功能，避开那些分叉逻辑。
我们接下来的目标就是从new Vue()开始，走完一整条从初始化，数据，模板到真实Dom的这整个流程当执行new Vue时， 内部会执行一个方法 this._init(options), 将初始化的参数传入。
*这里在vue的内部， 使用 _ 符号开头定义私有变量， 使用开头，以防止内部冲突。
我们接着看：import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' function Vue(options) { ... this._init(options) } initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue)现在我们讲解下上面提到的为什么不采用ES6的class来定义。 因为这样可以方便的把vue的功能拆分到不同的目录中去维护， 将 vue 的构造函数传入到以下方法内（这里通过注入方式给Vue扩展API）：
- initMixin(Vue): 定义 _init 方法。
- stateMixin(Vue): 定义数据相关的方法$set, $delete, $watch 方法。
- eventsMixin(Vue): 定义事件相关的方法$on, $once, $off, $emit。
- lifecycleMixin(Vue): 定义_update, 及生命周期相关的 destroy。
- renderMixin(Vue): 定义$nextTick, _render 将render函数转为vnode。
这些方法都在各自的文件内维护，从而让代码结构更加清晰易懂可维护。 如 this._init 方法被定义在：
export function initMixin(Vue) { Vue.prototype._init = function(options) { ...当执行new Vue时，进行一系列初始化并挂载 } }再这些 xxxMixin 完成后， 接着会定义一些全局的API：
export function initGlobalAPI(Vue) { Vue.set方法 Vue.delete方法 Vue.nextTick方法 ... 内置组件： keep-alive transition transition-group ... initUse(Vue)：Vue.use方法 initMixin(Vue)：Vue.mixin方法 initExtend(Vue)：Vue.extend方法 initAssetRegisters(Vue)：Vue.component，Vue.directive，Vue.filter方法 }这里有部分 api 和 xxxMixin 定义的原型方法功能是类似的，如 this.$set 和 Vue.set 他们都是使用set 这样一个内部定义的方法。
这里提一下 vue 的架构设计，它的架构是分层式的。 最顶层是一个ES5 的构造函数， 在上层在原型上会定义一些==_init==, $watch, _render 等这样的方法， 再上层会在构造函数自定义全局的一些API, 如 set, nextTick, use 等（以上这些事不区分平台的核心代码）, 接着是跨平台和服务端渲染及编译器。 这些属性方法都定义好了以后，最后导出一个完整的构造函数给到用户使用。 new Vue 就是开启的钥匙。
上面我们从比较微观的角度近距离的观察了vue, 现在我们从宏观角度来了解他内部的代码结构是如何组建起来的。 目录如下：
|-- dist 打包后的vue版本 |-- flow 类型检测，3.0换了typeScript |-- script 构建不同版本vue的相关配置 |-- src 源码 |-- compiler 编译器 |-- core 不区分平台的核心代码 |-- components 通用的抽象组件 |-- global-api 全局API |-- instance 实例的构造函数和原型方法 |-- observer 数据响应式 |-- util 常用的工具方法 |-- vdom 虚拟dom相关 |-- platforms 不同平台不同实现 |-- server 服务端渲染 |-- sfc .vue单文件组件解析 |-- shared 全局通用工具方法 |-- test 测试- flow: javascript 是弱类型语言， 使用 flow 以定义类型和检测类型，增加代码的健壮性。
- src/compiler: 将template 模板编译为 render 函数。
- src/core: 与平台无关通用的逻辑， 可以运用在任何javaScript 环境下： 如 web, Node.js weex 嵌入原生应用中。
- src/platforms: 针对web 平台和 weex 平台分别的实现， 并提供统一的 API供调用。
- src/observer: vue 检测数据变化，改变视图的代码实现。
- src/vdom: 将render 函数转为 vnode 从而 patch 为真实 dom 以及diff 算法的代码实现。
- dist: 存放着针对不同使用方式的不同vue版本
Vue 版本
vue 使用的是rollup构建的， 具体怎么构建不重要，总之会构建出很多不同版本vue。 按使用方式的不同，可分为以下三类：
- UMD: 通过 script 标签直接在浏览器中使用。
- CommonJS: 使用比较旧的打包工具使用， 如 webpack1。
- ES Module: 配合现代打包工具使用， 如 webpack2 及以上。
而每个使用方式内又分为了完整版和运行时版本， 这里主要以 ES Module 为例， 有了官方脚手架其它两类应该没多少人用了。 在介绍两个版本区别之前，我们先插入一个小广告。 即： 在vue的内部是只认render 函数的， 我们自定义一个render函数：
new Vue({ data: { msg: 'hello Vue!' }, render(h) { return h('span', this.msg); } }).$mount('#app');为什么只认render 函数， 我们在写代码的时候好似并没有些过render函数，而是使用template 模板。 这是因为有 vue-loader， 它会将我们在template内定义的内容编译为render 函数，而这个编译就是区分完整版和运行时版本的关键所在，完整版自带这个编译器， 而运行时版本就没有。如下代码在运行时版本环境下就会报错：
new Vue({ data: { msg: 'hello Vue!' }, template: `<div>{{msg}}</div>` })vue-cli 默认是使用运行时版本的， 更改或覆盖脚手架内的默认配置，将其更改为完整版即可通过编译： ‘vue$’: ‘vue/dist/vue.esm.js’, 推荐还是使用运行时版本。
下面带着一个问题结束本章的内容。
- 请问runtime 和 runtime-only 这两个版本的区别是？
解答： - 最明显的就是大小写区别，带编译器会比不带的版本大6kb。
- 编译的时机不同， 编译器是运行时编译，性能会有一定的损耗；运行时版本是借助loader 做的离线编译，运行性能更高。
-
前端面试之 vue是什么？有什么优点？
2020-03-25 14:05:56一.vue是什么？ Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，... -
vue是什么软件？
2020-02-28 18:50:16《VUE》首次上架 App Store，第一个版本即被超过 120 个国家和地区 App Store 编辑推荐，随即得到了中国区首页新鲜 App 推荐。...看来《VUE》在国际上也是崭露头角，国内被使用和熟知度也在迅速上升... -
深入探索vue底层原理系列（开篇）------vue是什么
2019-07-13 15:34:20开篇 本系列文章主要是探索vue的底层的实现、解读vue的源码。毕竟vue3.0即将发布，vue最主要的特点就是响应式机制、模块、以及对象式的组件声明语法，而3.0对这...vue是什么 vue.js是一套用于构建用户界面的渐进式框... -
【vue】vue.js不就是一个文件吗？安装vue是什么意思？
2020-03-04 09:11:50还有就是要安装node.js环境，我有点疑惑，为什么要装它，js脚本不是在浏览器运行吗，以前我接触juery的时候，调试的时候是用Hbuilder的，边写边用浏览器同步看效果。 这里为什么还要安装node.js呢？ 总结： 1、教程... -
vue是什么？声明式渲染 条件循环 处理用户输入
2018-05-08 15:21:34Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。...vue是声明式渲染 （1） var通过new一个新的vue对象通过html中... -
【Vue简易入门】什么是Vue？
2020-08-12 00:25:24最近我在前端岗位上也运用Vue实现了几款产品，那么今天来分享一下Vue是什么，以及我对Vue的见解。 一、定义 Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同，Vue的渐进式框架表示... -
什么是VUE？为什么用VUE？
2017-05-10 16:19:59Vue.js新手入门指南 最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做... -
什么是vue？为什么用vue？
2019-02-12 15:45:47综合：https://segmentfault.com/a/1190000015560315 https://blog.csdn.net/liang377122210/article/details/71545459 ...这几篇都写得非常好 1.Vue.js是什么？ vue就是一个js库，... -
简单介绍一下什么是vue
2020-08-11 16:42:001、 vue是什么 vue是一个渐进式的js框架 2、什么是渐进式框架 对项目参与的少 （在项目中可以使用其他的框架或者类库） 3、MVC和MVVM mvc是一个后台的软件设计模式，将程序分为三部分 m(model 模型) V（view 视图） ... -
（一）Vue - 什么是Vue.js（Vue之初次见面）？
2020-06-14 22:21:18（一）Vue - 什么是Vue.js（Vue之初次见面）？ 一.什么是Vue.js二.为什么要学习Vue三.Vue.js的初次见面之Hello World！四.从MVVM的角度来看Vue 一.什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的... -
Vue Vuex 是什么
2018-09-29 13:07:31Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools... -
[vue] 什么是双向绑定？原理是什么？
2021-02-28 18:51:37原理是什么？ 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get和set方法实现的。修改... -
怎么理解VUE，VUE的数据驱动原理是什么，解释MVVM框架
2018-01-30 18:06:55一：Vue是什么，怎么理解Vue Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点： （1）简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好... -
vue的脚手架是什么
2020-09-03 15:12:22vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。 这个vue-cli是webpack高度封装的内容。（vue-cli就是用webpack写出来的） cnpm代表的是淘宝的镜像 脚手架安装好了我们就可以创建一个... -
什么是vue？
2017-03-01 16:31:29vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。 版本选择？ 现在vue分为vue1和vue2这两个大版本，然而现在有一些基于vue的框架还不兼容vue2，不过自己折腾... -
什么是Vue？
2017-10-06 17:45:13一、什么是Vue.js？ Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三... -
[vue] 什么是虚拟DOM？
2021-02-28 18:50:56[vue] 什么是虚拟DOM？ 虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来... -
vue生命周期是什么？
2019-03-25 23:29:25我们知道vue是一个构建数据驱动的web界面的渐进式框架，那么vue生命周期是什么呢？ vue的生命周期是什么？ vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在...
vue
订阅