Vue简单了解


今天记录一下最近学习Vue的一点心得。

1. 前端概览

1.1 前端开发三大件

Html结构,CSS表现,JS行为。

  • 结构其实就是HTML语义化的结果,多个标签集合,当页面没有css,js时还能够保持有层次感的序列视图。
    可以在chrome控制台运行以下代码,查看只有语义的html结构:
Array.from(document.styleSheets).forEach(item => item.disabled = false)
  • 表现能够让内容更容易让用户接受,记住。
    CSS禅意花园
    可以看到不同样式变化带来的风格的变化。
  • 行为能够与用户发生交互,给用户反馈。
    可以看看下面网站,不同框架库对todolist的实现。
    Todomvc

1.2 JS角色

前期只是为了校验表单,然后发展为动态效果开发,接着主要负责响应用户交互,现在页面数据渲染展示、交互、效果、校验等多位一体的开发方式。用一张图表示就这样的一个关系。

2. 现代前端开发方式

目前流行的前端框架都是基于Node,Npm,Yarn的开发方式,比如Vue结合Vue-cli工具可以方便的初始化项目,而以前的项目则是手工去新建文件,下载文件,定义项目的入口,然后组织打包方式,然后全部拷贝发布上线。

2.1 传统方式

在没有npm以前,如下的JS资源:

<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/login.js"></script>
<script src="../js/jquery.nicescroll.js"></script>
<script src="../js/jquery.qrcode.min.js"></script>
<script src='../jslib/moment.min.js'></script>
<script src='../js/locale/zh-cn.js'></script>
<script src="../mobisscroll3/js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script src='../plugins/layer-pc/layer.js'></script>

所有资源插件都需要从原本不同的网站去下载,下载好之后放到项目资源目录中。随着项目的开发,时间的推移,如果本地源码被破坏修改,想重新从官网下载,但官网又更新版本了,或者官网已经失联,下载起来就比较困难。
两个问题:下载麻烦,版本管理维护比较困难。

2.2 NPM方式

随着Node在前端工程中大火,后来内置的NPM(Node Package Manager)就扮演了资源统一管理这样的角色,通过本地的Package.json管理文件名,版本号,命令行进行远程拉包的方式解决了开发当中到处找资源的窘境,他不但可以获取资源,也可以将自己编写的包或命令行程序进行发布分享。
PS: 下载最新的Node安装包进行安装,然后分别根据:node -v,npm -v两个命令测试是否安装成功。
PS: call:node call:npm

由于业务需求的不断增大,Npm下载了很多个包,这些包如何打包就是一个问题了。同时随着ES6的发布,而浏览器支持又不是给力。有些资源开发时用到,但上线后又用不到,比如SCSS相关的资源。
这时候一个神器Webpack横空出世,基本解决了前面提到的一些问题,而且还添加了很多新的想法和可能。结合cli工具,使现在的前端开发在工程化领域更加方便,开发更便捷。
其中Babel的剑走偏峰,Webpack-dev-server的巧妙应用,各种Loader的百花齐放,共同构筑了现代开发的宏伟基础世界,关于他们的细节故事后续有机会在分享。

3. MVVM开发核心

Vue是专注于View层的数据双向绑定框架,核心是MVVM(Model-View-ViewModel) 中的 VM,也就是 ViewModelViewModel负责连接 ViewModel,保证视图和数据的一致性,并且能够实时相互更新,数据影响视图,视图中操作影响数据。

3.1 数据双向更新

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

<div>
  <p>Hello,<span id="name"></span></p>
</div>
<script>
var user = {}
Object.defineProperty(user, 'name', {
  get: function () {
    return document.getElementById('name').innerHTML
  },
  set: function (n) {
    return document.getElementById('name').innerHTML = n
  }
})
</script>

这段代码保存到本地,然后在控制台里边修改一下user的属性,比如:user.name='shanghai',看看效果。

而Vue实现有点小复杂,也是面试题必考的环节之一,所以有空的同学了解一下。

  1. 实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
  2. 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
  3. 实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
  4. mvvm入口函数,整合以上三者
    vue 的双向绑定原理及实现
    vue的双向绑定原理及实现
    一个github供参考,简版mvvm库,仿vue实现双向绑定基本功能

3.2 数据驱动视图

通过修改数据来达到更新视图的目的,比如:const User = { name: 'jikey', age: 20 },对应页面上:我是Jikey,修改:User.name = 'Tang',那页面上自动变为:我是Jikey。而如果是jQuery时代,那得先找到dom元素,然后在更新,如果这个属性页面上有多处,那就需要手工找到所有的进行更新。比如:$('.userEl1, .userEl2').html('Jikey')等等的方式。

3.3 URL变化视图更新,页面不刷新,更少的从数据从后端请求。

3.3.1 传统方式

比如公网上有个url:http://www.jing-ui.com,输入地址栏之后:

  1. 先从缓存中查询相关304状态的资源
  2. 然后从全球根DNS库中查询域名对应的服务器IP,
  3. 根据IP找到服务器发起建立TCP链接三次握手,
  4. 然后浏览器向服务器发起HTTP请求,
  5. 服务端看到有请求过来,解析URL路径
  6. 根据服务端的路由,返回全部HTML结构,图片,CSSJS文件。
  7. 浏览器根据返回的内容依次构建:DOM树,CSSOM树, 将DOM,CSSOM合并生成渲染树,计算渲染树布局,然后将布局渲染到屏幕上。
3.3.2 Vue方式

只有首次发起全页面请求,后续请求服务端返回业务相关JSON数据,由浏览器Vue模板来组装HTML结构,然后渲染到屏幕上。由此可以看到,只要浏览器不帅锅,性能更好,渲染体验更好。同时也重新阐明了Vue的立场,就是前端框架,与Spring, Struts, Thinkphp这些服务端框架不一样,也不具备处理POST请求的能力,只能从拼接的url参数上取值,微信授权就是这种方式获取OpenId。

内部技术处理上主要是2种方式:

  1. hash 模式
    通过为hash增加监听事件来达到:更新视图不重新请求页面但可以ajax请求数据的目的。
window.addEventListener("hashchange", handleHash, false)
  1. history 模式
    HTML5提供了两个新的方法:pushState(), replaceState()使我们可以对浏览器历史记录栈进行操作:
window.addEventListener('popstate', matchAndUpdate)
window.history.pushState(stateObject, title, url)
window.history.replaceState(stateObject, title, url)。

3.4 统一数据源管理

Vue是基于组件构建前端页面,多个组件上的数据必须保持同步和一致性,比如管理界面,左侧菜单的打开状态,必须在切换好的页面中保持当前目录的展开。用户头像必须在每个页面都显示同一的头像。等等。这时候就需要一个全局变量通过代码编程的方式方便的管理数据,为了与业界保持一致,采用了一定的API表明上看起来更繁琐,随着项目的增大,API更加的利于数据的管理。

4. Vue核心

全家桶构建的快速开发体系,Vue-cli初始化项目基础配置和文件结构,Vuex进行全局的数据状态管理,Vue-Router进行路由的跳转与处理。

5. Vue优点

5.1 文档清晰完善

5.2 入门曲线更为平缓

表明上.vue像是一个新的格式,其实内部已经从开发约定层面规定了开发的入口,无论从teamplate里边的html,还是script里边的js,还是style里边的css,都是以一种以前熟悉的内容进行开发。

5.3 应用方式更为灵活

即能直接以script的方式引入,也能以.vue的方式进行开发。

5.4 周边生态日趋完善

vue主框架到vue-router,nuxt,基本满足了日常的开发。

6. Vue难点

前期主要是前端基础的难点,中后期就是项目架构性能的优化和扩展维护。

6.1 JS基础

包括变量类型,流程控制,事件,DOM, BOM

6.2 Ajax基础

入手的关键字

  • 同步异步请求
  • HTTP1.0,HTTP2.0区别
  • 各个HTTP状态码的调试,了解常见的200,301,400,401,404,500含义
  • Chrome 调试工具 Network面板:主要查看状态码,request, response,从而验证发出请求与后端返回的字段的正确性。
  • Postman工具:模拟浏览器发起请求,从而脱离浏览器来验证接口是否正确

6.3 ES6基础

call:es6
主要是增加变量申明,箭头函数,Promise,Async, Await的支持,增强String,Number,Function,Array,Object等的扩展还有增加模块管理Exports,Import功能。

7. Vue与非Vue项目结合

先引入Vue主文件,组件文件,然后寻找一个适当的容器装载Vue渲染后的结果。

7.1 寻找容器

id为app的容器元素。

7.2 JS文件的引入

引入打包之后的dist文件。

7.3 404状态的处理

HTML5 History 模式

8. Vue调试

结合Vue.js devtools, Chrome Debugger调试。

  • Vue.js devtools 通过Components, Vuex, Events, Routing, Performance, Settings几个tab着重对Vue组件整个生命周期内API数据的追踪,比如可以在面板上看到data, computed
  • Chrome Debugger 着重对代码流程数据的逐步追踪

9. Vue与SEO

SSR渲染框架支持工具Nuxt

posted @ 2019-05-21 07:52 豪情 阅读(...) 评论(...) 编辑 收藏