# vue你应该知道的知识点

# vue核心知识点

# 对于Vue是一套渐进式框架的理解

Vue核心功能是一个视图模板引擎，可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。可以在核心功能的基础上任意选用其他的部件。这就是“渐进式”，就是Vue的使用方式。

# vue事件中如何使用event对象？

@click="EventName($event,...params)

# vue中子组件调用父组件的方法

第一种：this.$parent.xxx;
第二种：通过props传递父组件函数名，子组件接受，接受类型为Function；
第三种：创建eventBus。

# vue更新数组时触发视图更新的方法

Vue.set(object, key, value)

数组

使用下标更新数组元素；
使用赋值方式改变数组长度；
使用下标增删数组元素；

对象

对象的增删

# vue中对象更改检测的注意事项

Vue 不能检测对象属性的添加或删除；不能动态添加根级别的响应式属性。
使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

# v-model语法糖的组件中的使用

使用v-model来进行双向数据绑定的时：

<input v-model="something">

复制代码仅仅是一个语法糖：

<input v-bind:value="something" v-on:input="something=$event.target.value">

复制代码所以在组件中使用的时候，相当于下面的简写：

<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>

复制代码所以要组件的v-model生效，它必须：

接受一个 value 属性在有新的value时触发input事件

摘自 https://juejin.im/post/5c99eadb5188251c3a2f30af

# vue-cli开发环境使用全局常量

全局变量模块文件，在需要的地方引用进全局变量模块文件
在程序入口的main.js文件里面，将数据挂载到Vue.prototype。

# vue弹窗后如何禁止滚动条滚动？

    /***滑动限制***/
    stop(){
      var mo=function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",mo,false);//禁止页面滑动
    },
    /***取消滑动限制***/
    move(){
      var mo=function(e){e.preventDefault();};
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",mo,false);
    }
    // 如果不是Vue，可以直接给html设置overflow：hidden

1
2
3
4
5
6
7
8
9
10
11
12
13

# vue-router

# vue-router如何响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。同时意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
}

1
2
3
4
5

# 完整的 vue-router 导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

# vuex

# vuex在vue-cli中的应用

单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

# Http

# axios、fetch与ajax有什么区别

ajax

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

1
2
3

axios 基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，

fetch

是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。
参数有点像jQuery ajax。
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

1
2
3

# UI样式

# 如何适配移动端

使用postcss+vw单位

# 移动端常用媒体查询的使用

    移动端1像素边框的问题
    图片几倍的问题
    bg-image($url)
      background-image: url($url + "@2x.png")
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")

1
2
3
4
5
6

# 生产环境

vue如何优化首屏加载速度？

使用CDN资源,减小服务器带宽压力
路由懒加载
将一些静态js css放到其他地方（如OSS），减小服务器压力
按需加载三方资源，如iview,建议按需引入iview中的组件
使用nginx开启gzip减小网络传输的流量大小
若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件

# MVVM设计模式

# MVC、MVP与MVVM的区别

mvc

MVC全名是**Model View Controller**，模型(model)－视图(view)－控制器(controller)的缩写，一种架构模式；
view操作会触发controller去改变model，然后model再去改变视图
model：应用程序中处理数据逻辑的一部分，通常用来模型对象对数据库的存存取等操作
view：视图部分，通常指jsp、html等用来对用户展示的一部分
controller：控制层通常用来处理业务逻辑，负责从试图读取数据，并向模型发送数据