乐趣区

Vue知识点梳理

jiezi

1.1.Vue 的基本简介

vue 是一款渐进式 JavaScript 框架，作用是为了动态构建用户界面，该框架遵循 MVVM 模式，编码简洁，体积小，运行效率高；借鉴了 angular 的 模板 和数据绑定技术 ，借鉴了 react 的 组件化 和虚拟 DOM 技术 。
vue 也有一个 Vue 全家桶，例如 vue 脚手架：vue-cli。
ajax 请求：vue-resource，
路由：vue-router，
状态管理：vuex，
图片懒加载：vue-lazyload，
移动端 UI 组件库：min-ui，
PC 端组件库：element-ui，
页面滑动：vue-scroller等等插件；

1.2.Vue 的知识点梳理

1).vue 的核心思想

数据驱动、组件系统

2).vue 常用的 UI 组件库

Mint UI，element，VUX，vue-maretial

3).vue-cli 项目中 src 目录每个文件夹及文件的用途

assets 文件夹是放静态资源；components 是放组件；router 是定义路由相关的配置;
view 视图；app.vue 是一个应用主组件；main.js 是入口文件等等

4).vuex 是什么？怎么使用？哪种功能场景使用它

vuex 是 vue 生态系统中的状态管理。在 main.js 引入 store，注入，新建一个目录 store，….. export 等，常用的场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等等。

5).vue 生命周期

6).vue 的双向数据绑定原理的理解

vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

> 1、在自身实例化时往属性订阅器 (dep) 里面添加自己

> 2、自身必须有一个 update()方法

> 3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。

7).Vue.js 的 template 编译的理解

简而言之，就是先转化成 AST 树，再得到的 render 函数返回 VNode（Vue 的虚拟 DOM 节点）详情步骤：> 首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并 option。> 然后，AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM 节点，里面有（标签名、子节点、文本等等）

8).vue 优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb；简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟 DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；运行速度更快: 相比较与 react 而言，同样是操作虚拟 dom，就性能而言，vue 存在很大的优势。

9)父子组件传值

10）vue 常用指令和用法

11）v-model 的用法

12）computed 和 watch 使用场景

computed:
    当一个属性受多个属性影响的时候就需要用到 computed
    最典型的栗子：购物车商品结算的时候
watch:
    当一条数据影响多条数据的时候就需要用 watch
    栗子：搜索数据

13）vue 组件中 data 为什么必须是一个函数？

（私有数据，需要在函数中返回以避免多个实例共享一个对象。）因为 JavaScript 的特性所导致，在 component 中，data 必须以函数的形式存在，不可以是对象。组建中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data，这样改一个全都改了。

14)单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于 pc 端。多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点 spa 对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。单页面缺点：不利于 seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

15)

退出移动版