Vue.js 2.0:快速掌握核心技巧

发表时间: 2019-09-16 14:59


自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。

Vue基础

对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

vue的生命周期很重要,了解这点以后可以免去很多问题。

学完这些可以做一些练手的小项目,比如万年不变的todolist。。。

现在可以开始学习使用vue-cli构件项目了,学习组件化之前,推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module

光会这些还是不够的,还得会一些npm基础,知道如何用git-bush来安装模块依赖,会一些常用的命令。这方面的知识可以参阅npm入门文档

看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search

多看看组件那里,看看如何在vue-cli中怎么实现组件化。

到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇,如果时间有限,就直接进入vue-router

Vue-router

和之前一样,推荐直接用html+js过一遍文档

对路由导航钩子得好好看一看。

看完文档就可以上手vue-cli,一般新手在这几天都会死活跑不出来。偷笑

最直接的方法就是去github上搜一些关于vue-router2.0的demo,看如何构件路由,如何构件项目目录。

我这里有一个传送门

如果能跑出来,就可以做一些小项目了,比如写一个知乎日报啊偷笑,这些demo在github上很多。

可以结合一些组件库写demo,这样可以更加了解组件化。比如饿了么团队的Element、mint-ui

Vuex

什么是vuex?

Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了,对应的视图也会改变。

在学习Vuex时,会有一些ES6特性,当遇到这些时,最好不要一带而过,去好好看一看这些es6特性。

比如在学习Action时可以看看ES6新增的Promise和参数解构。

实践的方法一样是先看别人别人写的代码,比如官方的购物车实例的应用结构

把之前写的demo优化一下,有些地方可以用用vuex

vuex主要是用来对不同组件间进行通信,它构建了一个Vue实例的全局数据与方法,这些数据与方法可以在该Vue实例的所有组件中get与set

入门到放弃整理

一、vue基础

Vue2.0最全文档

Vue2.0 探索之路——vue-router入门教程和总结

Vue.js 2.0 快速上手

Vuejs2.0 文档攻略

“Vue2.0”跟俺一起全面入坑 01

“Vue2.0”跟俺一起全面入坑 02

“Vue2.0”跟俺一起全面入坑 03

“Vue2.0”跟俺一起全面入坑 —— 自定义便签

超好用的VueJs调试工具——vue-devtools

Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

Vue2.0史上最全入坑教程(中)—— 脚手架代码详解

Vue2.0史上最全入坑教程(下)—— 实战案例

Vue2.0史上最全入坑教程(完)—— 实战案例

vue-cli中配置sass和利用SASS函数功能实现px转rem

二、vue提高

Vue路由跳转问题记录详解

vuejs心法和技法

Vue2.0生命周期和钩子函数的一些理解 ===》推荐

用webpack(2.x语法)手动搭建Vue项目

全面解析vue-cli生成的项目中使用其他库(js库、css库)

Vuex从入门到熟练使用

vue与服务端通信—vue-resource

vue开发过程中跨域最简单解决方案

富文本编辑器Ueditor如何在Vue中使用?

三、vue 1.x和vue 2.x的区别

到了Vue2.x有哪些变化?—— 知识点

到了Vue2.x有哪些变化?—— 组件通信

四、其他必备知识点

ES6入门(一)

ES6快速入门(二)

ES6快速入门(三)

需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

Vue.js2.0核心思想

Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。

数据驱动:

Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。

<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})复制代码

基于依赖收集的观测机制原理:

1 将原生的数据改造成 “可观察对象”,通常为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter。

2 在解析模板,也就是在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

3 当一个被依赖的可观察对象被赋值时,它会通知notify所有订阅自己的watcher重新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。

依赖收集的优点在于可以精确、主动地追踪数据的变化,不需要手动触发或对作用域中所有watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

组件系统:

应用类UI可以看作全部是由组件树构成的。

注册一个组件:

Vue.component('my-component', { // 模板 template: '<div>{{msg}} {{privateMsg}}</div>', // 接受参数 props: { msg: String  }, // 私有数据,需要在函数中返回以避免多个实例共享一个对象 data: function () { return { privateMsg: 'component!' } }})<my-component msg="hello"></my-component>复制代码

组件的核心选项

1 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

3 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

4 方法(methods):对数据的改动操作一般都在组件的方法内进行。

5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

Webpack是一个开源的前端模块构建工具,它提供了强大的loader API来定义对不同文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。所以在此基础上,尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。

其他特性:

1 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。

2 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS Transition或Animation效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。

3 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户可以在多个组件中复用共同的特性。

Node与Angular与Vue.js视频教程需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

最后建议Vue 2.0 的学习顺序

起步

  1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
  2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 script,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。
  3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。
  4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。
  5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。
  6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

前端生态/工程化

  1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案。
  2. 学习命令行的使用。建议用 Mac。
  3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。
  4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
  5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处。

Vue 进阶

  1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
  2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
  3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。
  4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
  5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。