Vue简单了解

---

目录

• 1. 前端概览
  • 1.1 前端开发三大件
  • 1.2 JS角色
• 2. 现代前端开发方式
  • 2.1 传统方式
  • 2.2 NPM方式
• 3. MVVM开发核心
  • 3.1 数据双向更新
  • 3.2 数据驱动视图
  • 3.3 URL变化视图更新，页面不刷新，更少的从数据从后端请求。
    • 3.3.1 传统方式
    • 3.3.2 Vue方式
  • 3.4 统一数据源管理
• 4. Vue核心
• 5. Vue优点
  • 5.1 文档清晰完善
  • 5.2 入门曲线更为平缓
  • 5.3 应用方式更为灵活
  • 5.4 周边生态日趋完善
• 6. Vue难点
  • 6.1 JS基础
  • 6.2 Ajax基础
  • 6.3 ES6基础
• 7. Vue与非Vue项目结合
  • 7.1 寻找容器
  • 7.2 JS文件的引入
  • 7.3 404状态的处理
• 8. Vue调试
• 9. Vue与SEO

今天记录一下最近学习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，也就是 ViewModel。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，并且能够实时相互更新，数据影响视图，视图中操作影响数据。

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结构，图片，CSS，JS文件。
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 文档清晰完善

• vue-cli
• vuejs
• vuex
• vue-router
• Vue.js 服务器端渲染指南
• nuxtjs

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

• Vue.js 服务器端渲染指南
• Nuxtjs