杰霸霸博客

主题

Vue2简介 ​

一、Vue是什么？ ​

官网： 一款用于构建用户界面的 JavaScript 框架 个人理解：构建用户界面指的是数据组装页面，至于数据来源不管什么方式(写死的、从后端返回，文件读取之类)不重要，Vue用来在已得到数据具体渲染页面时期起作用。

Vue的特点：

  1. 采用组件化模式，使得提高代码复用率且让代码更好维护。 个人理解：更好维护是因为代码通过组件化得到了封装
  2. 声明式编码，让编码人员无需直接操作DOM,提高开发效率。 个人理解：不同于命令式编码，命令式编码指的是将实现功能分成步骤挨个执行，how to do , 而声明式指的是what to do, 程序员交给Vue不关心底层具体实现逻辑 Alt text
  3. 使用虚拟DOM+优秀的DIff算法，尽量复用DOM节点 个人理解：不得不说为何需要虚拟DOM,因为大部分页面性能问题都是操作真实DOM引起的，哪怕一个最简单的一个div也包含很多属性，比如下图： Alt text 因此如果频繁操作页面DOM势必导致页面性能下降甚至卡顿，原因就是用原生API或JQuery操作DOM的时候,浏览器每次都会构建页面DOM树。使用虚拟DOM其实对真实DOM对象的一层抽象，虚拟DOM包含属性tag、attrs、children, 可能叫法不一样，但最少包含这三个属性，从而达到轻量化、跨平台能力。Vue所谓的diff算法就是减少js操作真实DOM，具体是DOM的操作都在虚拟DOM上面，diff算法会得到需要真正变化的虚拟DOM(比如一个table删除3条数据，diff算法得到真正变化的删除的3条相关的虚拟DOM),最后再将结果一次性反应到真实DOM上面(除了删除的3条之外都没不会变动，也就复用了大部分DOM节点)，另外虚拟DOM拥有跨平台能力，不在局限具体的谷歌浏览器，可以是edge浏览器、移动端H5甚至是安卓IOS(比如React-Native 和 Weex)。如果需要了解Vue相关的源码去学习，可以访问Vue的github主页,查看src/core/vdom/vnode.js(vue的虚拟dom的实现)和src/core/vdom/create-element.js(vue如何创建虚拟dom)。

二、学习Vue需要的知识点 ​

  • es6语法规范(结构赋值，模板字符串，箭头函数等)
  • es6模块化(默认暴露，统一暴露，import, export等)
  • 包管理器(npm,yarn,cnpm只需要掌握一个)
  • 原型和原型链
  • 数组的常用方法(比如filter之类)
  • axios
  • promise

三、初识Vue ​

  1. 想让Vue开始工作, 需要创建一个Vue实例，还需要传入配置对象options；
    可以在Vue的构造方法传入配置对象options，配置对象options包含中el: 用于指定当前Vue实例为那个容器服务，值为css选择器的值，用的最多的值是id选择器，常见的id值名称是root、app; el节点会作为容器和Vue建立一对一的绑定关系。

提示

a. 如果多个Vue实例都引入同一个的css选择器，则第二个Vue实例工作不正常。
b. 如果Vue实例绑定的是css的类选择器而不是id选择器并且如果html中该类选择器有多个的话，默认html中类选择器所在第一个节点作为容器会和Vue实例绑定成功。

  1. 容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  2. 容器里面的代码被称为Vue模版；
  3. Vue实例和容器是一一对应的；
  4. 实际开发中只有一个Vue实例，并且会配合组件一起使用；
  5. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
  6. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

三、安装Vue-devtools ​

Vue 的浏览器开发者插件Vue-devtools可以帮助我们进行页面开发，直接访问chrome商店即可安装，Vue-devtools可以方便我们了解各个组件当前数据状态。 F12进入选择Vue选项卡，可以看到Vue-devtools, 值得注意的是： Alt text

四、深入源码了解 ​

Vue初始化必须使用new关键字，深入源码可以看到，如果初始化的时候去掉new，则会变成调用Vue函数，源码如下，会提示你使用new关键字： Alt text