摘要:由于是需要兼容的后台系统,该项目并不能使用到等技术,因此我在上的经验大都是使用原生的编写的,可以看见一个组件分为两部分视图部分,和数据部分。
在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动,组件化的框架和react很像,
从一开始的快速上手基本的开发,到后来开始自定义组件,对element UI的组件二次封装以满足项目需求,期间也是踩了不少坑。
由于将来很长一段时间可能再也不会接触前端了,趁着现在对vue还很熟练的时候,赶紧将这期间的收获记录下来。
按照我的理解,vue的特点在于,高层次的抽象模型,组件化,数据驱动与响应式。
注意:本文中所有涉及到{ {的,实际上不包括中间的空格,因为hexo会无脑把这个语法当成hexo的一种特殊语法
vue是什么及特点 vue是什么简单的来说,vue是一套用于前端开发的框架。
学习一门技术首先应该对该技术有着一个清晰正确的认识和思路,否则犹如浮沙之上建高楼。下面就来谈谈我对vue这个框架的理解。
vue它的惊艳之处在于,对上,它提供了一套非常优秀的与传统前端截然不同的前端开发模型,对下,它屏蔽了传统前端开发的各种丑陋的技术。
在实现复杂的页面需求时,vue帮你从传统前端的各种HACK般的奇淫技巧解脱出来,vue提供的抽象开发模型拥有强大的 表达能力,能够如丝顺滑般的完成各种复杂的需求。
总而言之,vue之于传统前端,类似C语言之于汇编语言,就像C语言提供了一个强大的表达能力强的语言模型一样,vue同样提供了一个强悍的表达前端的框架模型,这是抽象的威力。
因此,学习vue的80%的重心,都在学习这个强悍的vue模型上。
从我个人对vue的理解,它的几个重要特点有:
抽象的组件。这是vue框架模型中的一个基础,vue的一切都是基于vue组件的。你在vue组件上可以使用vue提供的各种特性,vue会将其转换成浏览器能够识别的结果通过浏览器渲染出来。
数据驱动。这是vue的理念之一,数据才是项目的核心,也是状态的最终保存者。而视图,只不过是一种能够由数据延迟计算出来的最终结果而已,它本身不存储状态。
响应式。既然渲染结果只是数据的衍生产物,那么当数据改变时,渲染结果自然而然的也要改变。这种机制就是响应式。
组件化。vue本身提供的 抽象特性 。从我个人的理解来看,自定义组件在vue中的地位,类似于函数在C,java之类的语言之中的地位。
它还有几个其它的的特点:
易用和功能兼顾。在我传统的思维里,易用的东西一般会牺牲一部分功能,而功能强大的东西会需要很大的成本学习,鱼和熊掌不可兼得。
然而vue用实际行动狠狠给了我一耳光,只要模型设计的正交完美,完全能够兼顾易用性和功能性。
与传统前端的良好兼容。
我目前所做的项目中,由于需求的复杂化项目需要从easy UI迭代到vue,原本我做好了大刀阔斧大规模重构的准备,不过,经过查阅文档和几个小demo实验我发现,这玩意居然能够和传统前端并存!
结果是非常令人开心的,我逐步的,慢慢的将项目从easy UI迭代到vue版本,一个页面一个页面的替换,对项目的影响降低到了最小。
下面的例子定义了一个简单的组件,x-my-component。
由于是需要兼容easy UI的后台系统,该项目并不能使用到webpack + babel + es6等技术,因此我在vue上的经验大都是使用原生的js编写的,
{ { message }}
可以看见一个组件分为两部分:视图部分,和数据部分。
视图部分使用html定义,但是vue会对一些特别的语法赋予vue自己的意义。如 { { message }} 表示将数据message绑定到视图的这个地方来。
这里是使用原生js编写的,因此数据部分和视图部分通过id选择器关联起来,定义了一个x-my-component全局组件。
从这里就可以初步感受到数据驱动。组件的状态都是存放的数据中的,而视图只负责渲染,本身不保存状态。
当数据不变时,渲染结果一定不变;当数据改变时,渲染结果就要发生改变。
由于vue是组件化的,组件可以层层嵌套。不过,最终的根节点得是app节点,这样才能渲染出结果。它的定义方式不太相同:
从这里可以看出,自定义的全局组件在vue的其它组件中可以直接使用,就像使用一个已经存在的html标签一样。
数据绑定从数据驱动的观点,我们很容易分析出数据流向:
数据源 --> vue对象 --> DOM
{ { message }} { { message.split("").reverse().join("") }}
将数据绑定到一般的内容上,用简单的 { {}} 的语法就可以了。
将数据绑定到属性上,需要用特殊的 v-bind 语法。上面将 message 数据绑定到了title属性上。
由于这个语法太常用了, v-bind:title 可直接缩写为 :title 。
用 -v-html 语法,绑定原始的html数据。
能绑定的不仅仅是属性键值,还可以是 单个表达式 。注意 只能 是单个表达式。
这些表达式只能访问全局变量的一个白名单,如Math和Date, 不能访问用户自定义的全局变量 。
在传统的前端编程中,需要仔细预防的一点是xss攻击。xss攻击的原理是:
用户输入的数据直接被插入到了DOM中。
用户输入的数据中含有html或js代码,那么它会直接作为DOM的一部分,被渲染或被执行出来。
利用这一点,就能够创造一个指向攻击者页面的一张图片或者链接,从而盗取用户的cookies或sid,或者诱导用户点击钓鱼网址。
因此,为预防xss,任何用户给定的数据展现到页面上都需要仔细的处理。但是如果使用vue,就不必太操心这个问题。
因为,vue提供了一个更高层次的前端模型,所有的业务代码都需要通过vue处理。我们只需要看vue对xss的处理情况就可以了。
从上面我们可以看到,数据到视图渲染中必须使用vue的插值语法:
普通的文本插值。vue会过滤xss攻击,因此可以安全使用。
使用v-html语法将html插入渲染后的DOM中。这当然会造成xss攻击,因此,使用v-html语法时要非常的小心。
条件与循环现在你看到我了
- { { todo.text }}
用 v-if 绑定的数据,控制此元素是否显示。
用 v-for 绑定的特殊语法,用于控制循环, v-for 的元素会被重复。如上所示,todos是一个数组。
响应式上面的例子中可以数据绑定的语法,实际上,将数据绑定到视图上的操作并不少见,这些操作,和后端技术常用的模样引擎类似,如python的Jinja2, java的freemarker。
但是,vue的数据绑定的还有一大不同点点是 响应式 。
由于视图渲染是从数据计算出来的产物,类似一个传入数据传出渲染结果的纯函数,因此,当数据改变时,渲染结果也会改变,所得到的结果是页面展示的界面也会发送改变。
数据绑定还不能完全走通一个vue组件的数据流程,从上面的数据绑定我们可以发现一个事实:
数据由vue对象流向视图进而渲染出来。
那么,反过来呢?如果让数据从页面流向vue对象?这就是下面要说到的事件处理。
事件处理事件处理的数据流向是这样的:
用户操作页面产生数据 --> 页面 --> vue对象
{ { message }}
通过 v-on 语法,绑定事件。按钮的数据传入到vue对象中。
这个语法太常用了,所以 v-on:click 可缩写成 @click 。
通过 v-model 语法,将表单的数据传入到vue对象中。v-model的数据流动是双向的,相当于:value数据绑定和@input事件绑定的语法糖。
能够与用户交互的组件都能够产生数据。当用户操作组件时,组件的相应事件被触发,进而执行绑定到事件的相应函数。
在函数内部你可以做任何处理逻辑,比如说改变vue对象记录的状态,也就是数据。
那么,这样,一个完整的数据流程就跑通了:
用户操作vue组件。
相应的事件被触发,从而导致绑定事件的函数被触发。
函数执行业务代码,改变vue组件的状态,也就是前面说到的数据绑定中的数据。
数据被改变,绑定了该数据的视图也会发送改变,视图被重新渲染。
页面发生相应改变,用户观察到了自己操作的反馈结果。
再谈响应式 virtual DOM我们知道,数据被绑定到视图上,视图本身不存储状态,当数据不变时,渲染结果不变;当数据改变时,视图也需要重新渲染。
好了,现在头脑里可能会有一个简单的思路了:
当数据改变时,触发数据的setter,setter除了更改数据变动外,还需要执行数据更新逻辑。
重新执行渲染函数,从新的数据中计算出新的渲染结果。
将渲染结果插入浏览器DOM树中。
但是,我们仔细考察下第三步。浏览器的DOM树改变后,浏览器才会真正的重新渲染这个DOM,计算各种css,各种布局,层层调用各种绘图函数重新绘制GUI等等。。。
总而言之,这个步骤是非常非常耗时的。
那么,一个优化的手段是,尽可能让真正的DOM改变的最少,这样浏览器只需要渲染最少的结果就能达到效果,提升性能。
因此,vurtual DOM就出现了。如下:
当数据改变时,触发数据的setter,setter除了更改数据变动外,还需要执行数据更新逻辑。
重新执行渲染函数,从新的数据中计算出新的渲染结果。
渲染结果被放在virtual DOM中,vue将新的DOM和就的DOM进行diff。
将diff后的差异结果更新到真正的浏览器DOM树中。
可以看到,整个流程中的一大重点是diff算法。关于DOM的diff算法,我没有接触过。。。。。。。
之前研究过文本diff算法是基于LCS算法的动态规划优化,之后有兴趣可以研究下DOM的diff算法。
从上面我们知道,当直接设置一个vue属性的值时,会触发getter函数。
实际上,getter函数是js的一个机制。在修改数组或对象时,也有类似的机制保证vue能检测到数据的更新以触发渲染。
然而,有几种情况,由于js的限制无法检测到,实际编程中要特别注意,否则就会感觉碰到了一个玄学bug。。。
数组。
利用索引来直接设置数组元素。如 this.todos[index] = "B"。解决方案是:Vue.set(this.todos, index, "B"),通过vue的函数设置。
直接修改数组的长度。如 this.todos.length = 10。替代方案建议使用不可变数据结构。
对象。vue无法检测到对象属性的添加或删除。添加的话,可以使用Vue.set,删除的话,可以使用不可变数据结构。
最后此篇博文梳理了vue的基本特性,但是对于vue最重量级的功能----组件化,没有涉及到。对于组件化的相关梳理留到下篇博文梳理。
注:该文于2018-04-09撰写于我的github静态页博客,现同步到我的segmentfault来。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95866.html
摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...
摘要:苗条的框架正是作者的初始目的,苗条包括代码编写量打包大小等等。是已经编译后的组件有什么缺点是一个刚起步不久的前端框架,无论在维护人员还是社区上都是大大不如三大框架,这里列举一下本人认为的存在的缺点。 Svelte 的作者也是 rollup 的作者 Rich Harris,前端界的轮子哥。sevlte 项目首次提交于 2016 年 11 月 16 日,目前版本是 3.6.1(2019-0...
摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...
摘要:的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。的目标是通过尽可能简单的实现响应的数据绑定和组合的视图组件。并不是框架,只是和他旁边的生态环境组成了一个框架,下面,贴一个官方的渐进式框架介绍图吧,方便理解。 前言 本人学习了一段时间的vue,并尝试写了一些小Demo之后,将vue投入了几个项目之后,一直在边学习边使用,经过看了vue,vuex,vue-route...
摘要:原文博客地址如何理解如何实现是否解读过的源码与框架的区别实现实现独立初始化实例两者的区别数据和视图的分离,解耦开放封闭原则,对扩展开放,对修改封闭在中在代码中操作视图和数据,混在一块了以数据驱动视图,只关心数据变化, 原文博客地址:https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何实现 MVVM 是否解读过 ...
阅读 2244·2021-10-09 09:41
阅读 3344·2021-09-13 10:34
阅读 1898·2019-08-30 12:59
阅读 537·2019-08-29 17:27
阅读 1036·2019-08-29 16:07
阅读 2939·2019-08-29 13:15
阅读 1288·2019-08-29 13:14
阅读 1521·2019-08-26 12:18