Vue技术分类

时间 2019-11-08 标签 vue 技术分类

vue知识点

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

二、vue.js的两个核心是什么？css

数据驱动、组件系统。

三、请问 v-if 和 v-show 有什么区别？
v-if判断条件是否渲染，是惰性的，初始渲染时条件为假时什么也不作；v-show是 display: block/none;元素始终都会渲染；在项目中若是须要频繁的切换则使用v-show较好，运行条件不多改变，则使用v-if。
四、vue经常使用的修饰符html

.prevent 提交事件再也不重载页面;
.stop 阻止单击事件冒泡;
.self 当事件发生在该元素自己而不是子元素时触发;
.capture 添加事件监听器时使用事件捕获模式;
.once 只会触发一次 
按键修饰符 
:keyup.enter  
:keyup.tab

五、v-on能够监听多个方法吗？能够。
六、vue中 key 值的做用
v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
为了给 Vue 一个提示，以便它能跟踪每一个节点的身份，从而重用和从新排序现有元素，你须要为每项提供一个惟一 key 属性。理想的 key 值是每项都有的惟一 id。
主要是为了高效的更新虚拟DOM。前端

七、vue-cli工程升级vue版本
手动修改 package.json 里面vue的版本，同时修改 vue-template-compiler 为相同的版本；后者在devDependencies里面，而后npm install。vue

八、vue事件中如何使用event对象？ @click="EventName($event)"java

九、$nextTick的使用node

在修改数据以后当即使用这个方法，获取更新后的 DOM。

十、Vue 组件中 data 为何必须是函数
每用一次组件，就会有一个新实例被建立。每一个实例能够维护一份被返回对象的独立的拷贝，每一个对象都是独立互不影响的。webpack

十一、v-for 与 v-if 的优先级ios

v-for 具备比 v-if 更高的优先级。
v-if 将分别重复运行于每一个 v-for 循环中。vue风格指南提示永远不要把 v-if 和 v-for 同时用在同一个元素上。

十二、vue中子组件调用父组件的方法git

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

1三、vue中 keep-alive 组件的做用
keep-alive是 Vue 内置的一个组件，可使被包含的组件保留状态，或避免从新渲染。include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
include - 字符串或正则表达式，只有名称匹配的组件会被缓存；
exclude 反之亦然。 include="a,b" :include="/a|b/" :include="['a', 'b']"

1四、vue中如何编写可复用的组件？

规范化命名：组件的命名应该跟业务无关，而是依据组件的功能命名。
数据扁平化：定义组件接口时，尽可能不要将整个对象做为一个 prop 传进来。每一个 prop 应该是一个简单类型的数据。这样作有下列几点好处：
(1) 组件接口清晰。
(2) props 校验方便。
(3) 当服务端返回的对象中的 key 名称与组件接口不同时，不须要从新构造一个对象。
```
扁平化的 props 能让咱们更直观地理解组件的接口。
```
可复用组件只实现 UI 相关的功能，即展现、交互、动画，如何获取数据跟它无关，所以不要在组件内部去获取数据。
可复用组件应尽可能减小对外部条件的依赖。
组件在功能独立的前提下应该尽可能简单，越简单的组件可复用性越强。
组件应具备必定的容错性。

1五、什么是vue生命周期和生命周期钩子函数？
Vue 实例从建立到销毁的过程，就是生命周期。
从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后。让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

1六、vue生命周期钩子函数有哪些？
beforeCreate（建立前）在数据观测和初始化事件还未开始
created（建立后）完成数据观测，属性和方法的运算，初始化事件，$el属性尚未显示出来;
beforeMount（载入前）在挂载开始以前被调用，相关的render函数首次被调用。实例已完成如下的配置：编译模板，把data里面的数据和模板生成html。注意此时尚未挂载html到页面上；
mounted（载入后）在el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用。实例已完成如下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程当中进行ajax交互；
beforeUpdate（更新前）在数据更新以前调用，发生在虚拟DOM从新渲染和打补丁以前。能够在该钩子中进一步地更改状态，不会触发附加的重渲染过程；
updated（更新后）在因为数据更改致使的虚拟DOM从新渲染和打补丁以后调用。调用时，组件DOM已经更新，因此能够执行依赖于DOM的操做。然而在大多数状况下，应该避免在此期间更改状态，由于这可能会致使更新无限循环。该钩子在服务器端渲染期间不被调用；
beforeDestroy（销毁前）在实例销毁以前调用。实例仍然彻底可用；
destroyed（销毁后）在实例销毁以后调用。调用后，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1七、vue如何监听键盘事件中的按键？
监听keyup事件并添加按键修饰符，对一些经常使用按键vue提供了别名，或者使用keyCode，vue也支持复合按键。

1八、vue更新数组时触发视图更新的方法

Vue.set(arr, key, value) Vue.set(object, key, value)

1九、vue中对象更改检测的注意事项

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

20、解决非工程化项目初始化页面闪动问题
vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一块儿用时，这个指令能够隐藏未编译的Mustache标签直到实例准备完毕。

/*css样式*/
[v-clock] {
    display: none;
}

2一、v-for产生的列表，实现active的切换

<ul class="ul" >
    <li v-on:click="currentIndex = index" 
        class="item" 
        v-bind:class="{clicked: index === currentIndex}" 
        v-for="(items, index) in arr">
            <a>{{items}}</a>
    </li>
</ul>

data() {
    return{
        currentIndex: 0
    }
}

2二、v-model语法糖的组件中的使用

1:用于表单上数据的双向绑定；
2:修饰符：
    .lazy- 取代input监听change事件
    .number- 输入字符串转为数字
    .trim- 输入首尾空格过滤

2三、十个经常使用的自定义过滤器

// 全局方法 Vue.filter() 注册一个自定义过滤器
Vue.filter("sum", function(value) {   
    return value + 4;
});
// 局部
new Vue({
    el: ".test",
    data: {
        message:12
    },
    filters: {
        sum: function (value) {
            return value + 4;
        }
    }
})

2四、vue等单页面应用及其优缺点

优势——数据驱动、组件化、轻量简洁高效，经过尽量简单的API实现响应的数据绑定和组合的视图组件；
缺点：不支持低版本的浏览器，不利于SEO优化，可使用服务器端渲染，首次加载耗时长。

2五、什么是vue的计算属性？
在模板中放入太多的逻辑会让模板太重且难以维护，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。
计算属性基于它们的依赖进行缓存的；只在相关依赖发生改变时它们才会从新求值。

3一、计算属性的缓存和方法调用的区别

两种方式的最终结果确实是彻底相同的。
不一样的是计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会从新求值。
只要相关依赖尚未发生改变，屡次访问计算属性会当即返回以前的计算结果，而没必要再次执行函数
若是不但愿有缓存，请用方法来替代。

2六、vue-cli提供的几种脚手架模板

vue-cli的脚手架项目模板有webpack-simple 和 webpack；
区别在于webpack-simple 没有包括Eslint 检查等功能。

2七、vue父组件如何向子组件中传递数据？经过父组件v-bind传递数据子组件props接收数据

2八、vue-cli开发环境使用全局常量

①少许
Vue.prototype.baseUrl = function () {
  return 'https://segmentfault.com/';
};

Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
};
②配置文件形式
在项目的src 目录里面 新建一个 lib目录，lib目录里建立一个 config.js文件。

export default {
  install(Vue,options) {
    Vue.prototype.baseUrl = function () {
       return '111';
    };
    Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
    };
    Vue.prototype.showFootTab = {
      isShow:false,
      active:0,
    }
}
最后导入 
    import config from './lib/config.js';
    Vue.use(config);
使用
    <template>
      <div>
        {{getTitle.title}}
      </div>
    </template>
    
    this.getTitle

2九、vue-cli生产环境使用全局常量

30、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

3二、vue-cli中自定义指令的使用

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }![图片描述][1]
  }
}
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

vue-router

一、vue-router如何响应路由参数的变化？

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。由于两个路由都渲染同个组件，比起销毁再建立，复用则显得更加高效。同时意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化做出响应的话，你能够简单地 watch (监测变化) $route 对象：

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

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

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

三、vue-router有哪几种导航钩子（导航守卫）？

全局的, 单个路由独享的, 组件级的。
全局守卫：
router.beforeEach router.beforeResolve(2.5+) router.afterEach

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
router.afterEach((to, from) => {
  // 这些钩子不会接受 next 函数也不会改变导航自己： ...
})

路由独享的守卫： beforeEnter   这些守卫与全局前置守卫的方法参数是同样的。
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
组件内的守卫
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 由于当守卫执行前，组件实例还没被建立
      next(vm => {
        // 经过 `vm` 访问组件实例
      })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，可是该组件被复用时调用
    // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
    // 能够访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`
  }
}
每一个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

四、vue-router的几种实例方法以及参数传递

编程式导航
    this.$router.push({ name: 'news', params: { userId: 123 }}); // this.$route.params.userId
    this.$router.push({ path: '/news', query: { userId: 123 }}); // this.$route.query.userId
    this.$router.replace();
声明式导航 
    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
    <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

五、vue-router的动态路由匹配以及使用

须要把某种模式匹配到的全部路由，全都映射到同个组件
const User = {
  template: '<div>User{{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
复用组件时，想对路由参数的变化做出响应的话，使用watch (监测变化) $route 对象
  watch: {
    '$route' (to, from) {
      // 对路由变化做出响应...
    }
  }
想匹配任意路径，咱们可使用通配符 (*)
{
  // 会匹配全部路径
  path: '*'
}, {
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

六、vue-router如何定义嵌套路由？

在router.js使用children数组来定义子路由，并在模板中使用<router-view>定义嵌套路由。
若是没有匹配到合适的子路由，能够提供一个 空的 子路由
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其余子路由
      ]
    }
  ]

七、<router-link></router-link>组件及其属性

<router-link> 组件支持用户在具备路由功能的应用中 (点击) 导航。 
经过 to 属性指定目标地址，默认渲染成带有正确连接的 <a> 标签，能够经过配置 tag 属性生成别的标签。
to: 
    <!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染结果 -->
    <a href="home">Home</a>
    <!-- 使用 v-bind 的 JS 表达式 -->
    <router-link v-bind:to="'home'">Home</router-link>
    <!-- 不写 v-bind 也能够，就像绑定别的属性同样 -->
    <router-link :to="'home'">Home</router-link>
    <!-- 同上 -->
    <router-link :to="{ path: 'home' }">Home</router-link>
    <!-- 命名的路由 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    <!-- 带查询参数，下面的结果为 /register?plan=private -->
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace: 会调用 router.replace() 而不是 router.push()，因而导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
append: 在当前 (相对) 路径前添加基路径
tag: 渲染成某种标签
active-class: 设置 连接激活时使用的 CSS 类名。默认值能够经过路由的构造选项 linkActiveClass 来全局配置。

八、vue-router实现路由懒加载（动态加载路由）

component: () => import('comp/AlbumlibMore')

九、vue-router路由的两种模式
vue-router 默认 hash 模式

使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。

HTML5 History 模式

充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。
  要玩好，还须要后台配置支持；
  由于咱们的应用是个单页客户端应用，若是后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404

十、history路由模式与后台的配合
在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面；而后在给出一个 404 页面。

vuex

一、什么是vuex？
专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，export 。
场景有：单页应用中，组件之间的状态、音乐播放、登陆状态、加入购物车

二、使用vuex的核心概念

state => 基本数据 
getters => 从基本数据派生的数据 
mutations => 提交更改数据的方法，同步！ 
actions => 像一个装饰器，包裹mutations，使之能够异步。 
modules => 模块化Vuex，当应用变得很是复杂时，store 对象会变得臃肿不堪。

三、vuex在vue-cli中的应用

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

四、组件中使用 vuex 的值和修改值的地方？

getters，actions(异步)，mutations(同步)

五、在vuex中使用异步修改

import * as types from './mutation-types';
export const selectPlay = function ({commit}, {list, index}) {
  commit(types.SET_LIST, list);
  commit(types.SET_INDEX, index);
  commit(types.SET_FULL, true);
};

使用

import {mapActions} from 'vuex';
...mapActions([
    'selectPlay'
])
this.selectPlay({
  list: lists.concat([]),
  index: indexs
});

六、pc端页面刷新时实现vuex缓存

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法二：在页面刷新的时候再次请求远程数据，动态更新vuex数据
分析：
    办法一的缺点是不安全，不适用大数据量的存储；
    办法二适用于少许的数据，而且不会出现网络延迟；

http请求

一、Promise对象是什么？

是一个构造函数，有all、reject、resolve方法；原型上有then、catch方法。
Promise的构造函数接收一个参数，是函数，而且传入两个参数：resolve，reject，
分别表示异步操做执行成功后的回调函数和异步操做执行失败后的回调函数。
缺点
    1.没法取消promise，一旦建立就当即执行，没法中途取消
    2.若是不设置回调函数，promise内部抛出错误，不会反映到外部

二、axios、fetch与ajax有什么区别？
ajax

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

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

1.从浏览器中建立 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了不少的操做）
5.从 node.js 建立 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

fetch

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

三、什么是JS的同源策略和跨域问题？

同源是指两个页面具备相同的协议，主机（域名），端口。主要针对的是js中的XMLHttpRequest请求

四、如何解决跨域问题？

使用ajax发送请求时添加jsonp参数
    dataType: "jsonp",
    jsonp: "callback",
    //传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
    jsonpCallback:"flightHandler", 
    //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数
使用axios发送请求，使用代理
config => index.js => module.exports => dev => proxyTable
  '/api': {
    changeOrigin: true,
    target: 'url1',
    bypass: function (req, res, proxyOptions) {
      req.headers.referer = 'url2';
      req.headers.host = 'host';
    },
    pathRewrite: {
      '^/api': ''
    }
  },

五、vue-cli中如何使用JSON数据模拟？
vue-cli mock模拟数据+json-server

json server 工具
    npm install json-server --save //json server
    npm install axios --save //使用axios发送请求
新建 xx.json 文件
终端输入
    json-server db.json --port 3000 //（端口）
打开package.json => scripts 中配置一个mock
    "mock": "json-server db.json --port 3003"
npm run mock

六、vue-cli中http请求的统一管理。

七、axios有什么特色？

1.从浏览器中建立 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了不少的操做）
5.从 node.js 建立 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

UI样式

一、.vue组件的scoped属性的做用

表示它的样式做用于当下的模块，很好的实现了样式私有化的目的，这是一个很是好的机制。
同时样式将会变得不易修改。

二、如何让CSS只在当前组件中起做用？

在style标签上 使用scoped属性

三、vue-cli中经常使用的UI组件库

ElementUI mint-ui vux

四、如何适配移动端？【经典】

使用postcss+vw单位

Vue项目中使用vw实现移动端适配

app，pc俩个路由，app表明手机端，pc表明移动端点击跳转或者进入页面加载判断

五、移动端经常使用媒体查询的使用

移动端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")

六、垂直居中对齐

使用flex布局
    display: flex;
    align-items: center;
使用display 和 vertical-align
    display: table-cell;
    vertical-align: middle;
    
line-height+margin: 0 auto--元素定宽
父元素
    position: relative;
子元素
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
子元素
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;


display: flex;
align-items: center;

line-height
七、vue-cli中如何使用背景图片？

一、找到 build/utils.js，增长一行代码便可： publicPath:"../../"
二、

八、使用表单禁用时移动端样式问题

九、多种类型文本超出隐藏问题

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

ellipsis-clamp($num)
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: $num
  -webkit-box-orient: vertical

经常使用功能

一、vue中如何实现tab切换功能？

二、vue中如何利用 keep-alive 标签实现某个组件缓存功能？

三、vue中实现切换页面时为左滑出效果

四、vue中父子组件如何相互调用方法？

五、vue中央事件总线的使用

混合开发

一、vue如何调用原生app 提供的方法？

二、原生app 调用 vue 提供的方法，并将值传递到 .vue 组件中

生产环境

一、vue打包命令是什么？

npm run build

二、vue打包后会生成哪些文件？

生成dist文件夹，里面有index.html和static文件夹， 包含css、js、img

三、如何配置 vue 打包生成文件的路径？

在 config => index.js => module.exports => build

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

异步组件 () => import('vue');
img-lazyLoad

MVVM设计模式

一、MVC、MVP与MVVM模式

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

mvvm 即 **Model-View-ViewModel**，即模型-视图-视图模型；一种设计思想；本质上就是MVC 的改进版。
主要目的是分离视图（View）和模型（Model）。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】mvvm模式的核心，它是链接view和model的桥梁。
    一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
    二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
        这两个方向都实现的，咱们称之为数据的双向绑定。
 低耦合、可重用性、独立开发

二、MVC、MVP与MVVM的区别

三、常见的实现MVVM几种方式

数据劫持(vue)：经过Object.defineProperty() 去劫持数据每一个属性对应的getter和setter；
脏值检测(angular)：经过特定事件好比input，change，xhr请求等进行脏值检测;
发布-订阅模式(backbone)：经过发布消息，订阅消息进行数据和视图的绑定监听。

连接描述

四、Object.defineProperty()方法

Object.defineProperty(obj, prop, descriptor)
会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
obj -- 要在其上定义属性的对象
prop -- 要定义或修改的属性的名称。
descriptor --- 将被定义或修改的属性描述符。

var o = {}; // 建立一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
  value : 37,
  writable : true, // 为true时，value才能被赋值运算符改变。默认为 false。
  enumerable : true, // enumerable为true时，该属性才可以出如今对象的枚举属性中。默认为 false。
  configurable : true // 为 true 时，该属性描述符才可以被改变，默认为 false。
});

五、实现一个本身的MVVM（原理剖析）
MVVM设计代码--1
MVVM设计代码--2
MVVM设计代码--3
六、 ES6中类和定义

传统的javascript中只有对象，没有类的概念。
它是基于原型的面向对象语言原型对象特色就是将自身的属性共享给新对象。
class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法，用来接收参数
        this.name = name;//this表明的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法，注意千万不要加上function
        return "个人名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//个人名字叫laotie今年88岁了

七、JS中的文档碎片

document.createDocumentFragment()    一个容器，用于暂时存放建立的dom元素
将须要添加的大量元素  先添加到文档碎片中，再将文档碎片添加到须要插入的位置，大大 减小dom操做，提升性能
for(var i=100; i>0; i--){ 
    var elem = document.createElement('div');
    document.body.appendChild(elem); // 放到body中
}

// 文档碎片：(操做1次dom)         
var df = document.createDocumentFragment();          
for(var i=100; i>0; i--){              
    var elem = document.createElement('div');                             
    df.appendChild(elem);
}         
 // 最后放入到页面上         
document.body.appendChild(df);

八、解构赋值

是一种 Javascript 表达式，将值从数组，或属性从对象，提取到不一样的变量中。
对象和数组逐个对应表达式，或称对象字面量和数组字面量
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4（已完成）提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

九、Array.from与Array.reduce

Array.from() 方法从一个相似数组或可迭代对象中建立一个新的数组实例。
reduce() 方法对数组中的每一个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
Array.from(arrayLike[, mapFn[, thisArg]])

Array.from()

arrayLike 想要转换成数组的伪数组对象或可迭代对象。
    mapFn (可选参数) 若是指定了该参数，新数组中的每一个元素会执行该回调函数。
    thisArg (可选参数) 可选参数，执行回调函数 mapFn 时 this 对象。
返回值 一个新的数组实例

arr.reduce(callback[, initialValue])

reduce
十、递归的使用
递归就是在程序中函数直接或间接调用本身；
若是有个函数foo，若是他是递归函数，到最后问题仍是转换为函数foo的形式；

递归的步骤(技巧)
    1. 假设递归函数已经写好
    2. 寻找递推关系
    3. 将递推关系的结构转换为递归体
    4. 将临界条件加入到递归体中

求1-100的和
function sum(n){
    if(n==1) return 1;
    return sum(n-1) + n;
    // return arguments.callee(n-1) + n;
}

递归代码示范

十一、Obj.keys()与Obj.defineProperty
Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。
Object.defineProperty(obj, prop, descriptor)
Object.keys() 用于枚举一个对象的属性名，返回数组。
var x = {};x.a = "a";x.b = "b";Object.keys(x);//=>["a", "b"]
MDN-Object.defineProperty()
Object.keys()

十二、发布-订阅模式
发布—订阅模式又叫观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，全部依赖于它的对象都将获得通知。
能够普遍应用于异步编程中，这是一种替代传递回调函数的方案。
观察者模式代码示范1
观察者模式代码示范2

1三、实现MVVM的思路分析

一、数据劫持(vue)：经过Object.defineProperty() 去劫持数据每一个属性对应的getter和setter
二、脏值检测(angular)：经过特定事件好比input，change，xhr请求等进行脏值检测。
三、发布-订阅模式(backbone)：经过发布消息，订阅消息进行数据和视图的绑定监听。

一、实现一个Observer，对数据进行劫持，通知数据的变化
二、实现一个Compile，对指令进行解析，初始化视图，而且订阅数据的变动，绑定好更新函数
三、实现一个Watcher，将其做为以上二者的一个中介点，在接收数据变动的同时，让Dep添加当前Watcher，并及时通知视图进行

参考代码

vue-cli

一、vue-cli 工程经常使用的 npm 命令有哪些？

$ npm install vue-cli -g            //1
$ vue init webpack vue-project        //2
$ cd vue-project                    //3
$ npm install                        //4
$ npm run dev

二、请说出vue-cli工程中每一个文件夹和文件的用处

三、config文件夹下 index.js 的对于工程开发环境和生产环境的配置

module.exports => dev => proxyTable 开发时请求代理
module.exports => port 开发时使用端口
module.exports => build => 规定打包后文件的结构以及名称

四、详细介绍一些 package.json 里面的配置

name: 项目名称,
version: 版本号,
description: 项目说明,
author: 做者信息,
dependencies: 开发环境和生产环境都须要的依赖包
devDependencies: 生产环境的依赖包

五、npm是什么？
Node.js的包管理工具。
由于咱们在Node.js上开发时，会用到不少别人写的JavaScript代码。若是咱们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，很是繁琐。因而一个集中管理的工具应运而生：你们都把本身开发的模块打包后放到npm官网上，若是要使用，直接经过npm安装就能够直接用，不用管代码存在哪，应该从哪下载。

npm cache clean --force    
// 删除缓存目录下的全部数据。从npm@5开始为保证缓存数据的有效性和完整性，须要将加上 --force 参数
npm cache verify    
// 验证缓存数据的有效性和完整性，清理垃圾数据。

源码剖析

一、vue内部与运行机制：

Vue.js 全局运行机制
响应式系统的基本原理
什么是 Virtual DOM？
如何编译template 模板？
diff算法
批量异步更新策略及 nextTick 原理？
proxy代理？

二、vuex工做原理详解

Vue.mixin
Vue.use

深刻拓展

一、vue开发命令 npm run dev 输入后的执行过程
npm run XXX是执行配置在package.json中的脚本，好比：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    // --host 0.0.0.0
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
这里就是执行了 node build/webpack.dev.conf.js文件，这个文件直接或间接引用了App.vue main.js文件

二、vue的服务器端渲染
服务器端渲染讲解
 代码示范
 代码示范-SSR

三、从零写一个npm安装包

四、vue-cli中经常使用到的加载器

vue-router vuex vue-lazyload axios 
babel-runtime babel-polyfill jsonp eslint
移动端better-scroll fastclick 
样式stylus stylus-loader

五、webpack的特色

代码拆分（支持异步模块加载）
Loader（支持任意模块加载，好比图片、less、css等等）
智能解析
插件系统
快速运行