Vue 总结

2018-12-25

ES6 官方文档

一. 什么是 MVVM？

MVC control
MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

Vue 是数据驱动，通过数据来显示视图层而不是节点操作。
处理数据交互的时候挺适合 MVVM 设计模式的。

二. Vue2.x响应式数据原理 (双向数据绑定原理是什么)

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Proxy可以直接监听对象而非属性
Proxy可以直接监听数组的变化
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改

三. vue生命周期的理解

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后， 销毁前/后。

方法名 描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用
beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
updated 组件数据更新之后
beforeDestroy 组件销毁前调用
destoryed 组件销毁后调用

异步请求适合在哪个生命周期调用？
是在mounted生命周期中调用的，而实际上也可以在created生命周期中调用。

四. 父组件向子组件传值的方法？

使用props，父组件可以使用props向子组件传递数据。

五. 子组件向父组件传值的方法？

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

六. 常用的指令有哪些

1
2
3
4
5
6
v-if="seen" //判断是否隐藏
v-for="todo in todos" //数据循环出来
v-on:click="reverseMessage"
v-model="message" //实现双向绑定, 一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-bind:class //绑定一个属性
v-html: //更新元素的 innerHTML

v-show 与 v-if: 条件渲染, 注意二者区别

v-show小结：
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if小结：
1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。

七. Vue的路由实现 （vue-router 路由模式有几种）

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。

  1. hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
    hash 模式的实现原理
    location.hash的值实际就是URL中#后面的东西。

特性：
URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；

我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

  1. history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
    history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。
    这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：
    1
    2
    window.history.pushState(null, null, path);
    window.history.replaceState(null, null, path);

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

六. vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

七. Vuex 有哪几种属性？

主要包括以下几个模块：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。

八. computed和watch有什么区别?

computed:

  1. computed是计算属性,也就是计算值,它更多用于计算值的场景
  2. computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
  3. computed适用于计算比较消耗性能的计算场景

watch:

  1. 更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作
  2. 无缓存性，页面重新渲染时值不变化也会执行

总结：

  1. 当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed
  2. 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

九. vue-cli

npm install vue-cli 脚手架
各文件作用

  1. node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。
  2. src文件夹 ：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。
  3. dist: npm run build 生成的文件，里面内容没有格式化。
    Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。
  4. 其他文件：定义的一些项目信息，说明等等。

九. axios

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

十. Vue与React的区别

vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用；

props是可以动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图；

子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需，另两者都有props校验机制；

Vue增加的语法糖 computed 和 watch ，而在React中需要自己写一套逻辑来实现；

十一. Vue的性能优化

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

CATALOG