精华内容
下载资源
问答
  • 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.社区和第三方组件库丰富

    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)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑).

    组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行(组件化)

    在这里插入图片描述

    • 组件化优点:
      提高开发效率
      方便重复使用
      简化调试步骤
      提升整个项目的可维护性
      便于协同开发
    展开全文
  • Vue是什么

    千次阅读 2018-07-15 09:58:28
    Vue是什么?学习一样东西,总要知道他是什么,查了看了还是感觉没懂,感觉没懂,别人说的天花烂坠还是不懂。 我的一点想法: 由于我是个“不安分的人“,也是个“放不下事情的人“,所以就有了自己的一点小看法,...
    • Vue是什么?学习一样东西,总要知道他是什么,查了看了还是感觉没懂,感觉没懂,别人说的天花烂坠还是不懂。

    我的一点想法:


    • 由于我是个“不安分的人“,也是个“放不下事情的人“,所以就有了自己的一点小看法,vue是在原html文档中嵌入的n个vue的小实例,小实例如同angularjs里面的一个个controller,限定了这一块区域归哪个实例来管束。
    • 被哪个实例管束,就可以想操作皮影似的操作,实例的方法和数据来操作皮影如何跳啊
    展开全文
  • vue是什么

    千次阅读 2017-02-21 15:33:32
    vue是什么?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:28
    Vue, 现阶段受热指数上升比较块的前端架构。...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, 及生命周期相关的 forceUpdateforceUpdate和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方法
    }	
    

    这里有部分 apixxxMixin 定义的原型方法功能是类似的,如 this.$setVue.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’, 推荐还是使用运行时版本。

    下面带着一个问题结束本章的内容。

    • 请问runtimeruntime-only 这两个版本的区别是?
      解答:
    • 最明显的就是大小写区别,带编译器会比不带的版本大6kb
    • 编译的时机不同, 编译器是运行时编译,性能会有一定的损耗;运行时版本是借助loader 做的离线编译,运行性能更高。

    下一篇 Vue原理解析(二): 初始化时beforeCreate之前做了什么

    展开全文
  • 一.vue是什么? Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,...
  • vue是什么软件?

    万次阅读 2020-02-28 18:50:16
    VUE》首次上架 App Store,第一个版本即被超过 120 个国家和地区 App Store 编辑推荐,随即得到了中国区首页新鲜 App 推荐。...看来《VUE》在国际上也崭露头角,国内被使用和熟知度也在迅速上升...
  • 开篇 本系列文章主要是探索vue的底层的实现、解读vue的源码。毕竟vue3.0即将发布,vue最主要的特点就是响应式机制、模块、以及对象式的组件声明语法,而3.0对这...vue是什么 vue.js是一套用于构建用户界面的渐进式框...
  • 还有就是要安装node.js环境,我有点疑惑,为什么要装它,js脚本不是在浏览器运行吗,以前我接触juery的时候,调试的时候用Hbuilder的,边写边用浏览器同步看效果。 这里为什么还要安装node.js呢? 总结: 1、教程...
  • Vue (读音 /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:59
    Vue.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库,...
  • 1、 vue是什么 vue是一个渐进式的js框架 2、什么是渐进式框架 对项目参与的少 (在项目中可以使用其他的框架或者类库) 3、MVC和MVVM mvc是一个后台的软件设计模式,将程序分为三部分 m(model 模型) V(view 视图) ...
  • (一)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:31
    Vuex 是什么? 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 Vue是一个基于MVVM模式数据驱动页面的框架,它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点: (1)简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好...
  • vue的脚手架是什么

    千次阅读 2020-09-03 15:12:22
    vue的自动化构建工具node.js帮我们做的,这就是我们为什么要下载node的原因。 这个vue-cliwebpack高度封装的内容。(vue-cli就是用webpack写出来的) cnpm代表的淘宝的镜像 脚手架安装好了我们就可以创建一个...
  • 什么是vue

    千次阅读 2017-03-01 16:31:29
    vue是法语中视图的意思,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所有功能的实现都是围绕其生命周期进行的,在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,835
精华内容 11,134
关键字:

vue是什么

vue 订阅