前端关于Vue的面试题（一）

    //Bus.$emit 发送消息

    Bus.$emit('inceptMessage', this.msg)
    
    //Bus.$on  接收消息
    Bus.$on('inceptMessage',(msg) => {
    	this.fromComponentAMsg = msg
    })

    vue-router的模式主要有hash模式和history模式。
    
    1.hash模式的原理(url带有#号部分)：
    	在vue-router.js的2.8版本之前，在路由的hash部分发生了任何变化，都会执行window.onhashchange方法，在这个方法内部我们可以根据当前匹配到的hash去加载对应的组件
    	在vue-router.js的2.8版本之后，内部使用window.history.pushState来完成相应的功能
    	hash模式的特点：在切换路由的时候，不会向服务器发送请求，但是刷新网页的时候，
    	此时会向服务器发送请求，在向服务器发送请求的时候，hash部分的信息是不会发送到服务器的，
    	所以此时刷新网页没有问题
    
    2.history模式的原理(url中通过/表示路径)
    	内部使用window.history.pushState来处理url的变化，切换对应的组件
    	history模式的特点：在切换路由的时候，不会向服务器发送请求，但是当刷新网页的时候，
    	此时会向服务器发送请求，如果后端没有对应的接口与此匹配，此时会报资源找不到的错误
    history模式一般情况下不能刷新网页

    1、vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。
    2、vue-router：vue官方推荐使用的路由框架。
    3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。
    4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
    5、vux  mint-UI  AntDesign  ElementUI等：为vue设计的UI组件库。
    6、创建一个emit.js文件，用于vue事件机制的管理。
    7、webpack：模块加载和vue-cli工程打包器。
    8、AnimateCSS：动画库

      configureWebpack: config => {
    // 开发环境配置
    if (debug) {  
      // cheap-module-eval-source-map是打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射
      config.devtool = '#cheap-module-eval-source-map'
    }
    // 生产环境配置
    else { 
       //生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的
       config.devtool = 'cheap-module-source-map'
    }
    // 开发生产共同配置
    Object.assign(config, { 
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          'vue$': 'vue/dist/vue.esm.js'
        }
      }
    })
      },

    npm install 
    npm run dev 
    npm run build 
    npm run build --report  用于查看 vue-cli 生产环境部署资源文件大小

    {
      "name": "cli-study",
      "version": "0.1.0",
      "private": true,
      "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
      },
      "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
      },
      "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "lint-staged": "^8.1.0",
    "vue-template-compiler": "^2.5.21"
      },
      "gitHooks": {
    "pre-commit": "lint-staged"
      },
      "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
      }
    }

    比如说，你要使用Angular，必须接受以下东西：
    - 必须使用它的模块机制
    - 必须使用它的依赖注入
    - 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）
    所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，
    而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
    
    
    比如说，你要使用React，你必须理解：
    - 函数式编程的理念
    - 需要知道什么是副作用
    - 什么是纯函数
    - 如何隔离副作用
    - 它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
    
    
    Vue与React、Angular的不同是，但它是渐进的：
    - 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用
    - 也可以整个用它全家桶开发，当Angular用；
    - 还可以只用它的视图，搭配你自己设计的整个下层应用。
    - 你可以在底层数据逻辑的地方用oop(对象编程)，也可以函数式编程，都可以，
    它只是个轻量视图而已，只做了最核心的东西。

    - v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
    - v-show：根据表达式之真假值，切换元素的 display CSS 属性。
    - v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
    - v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
    - v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
    - v-model：实现表单输入和应用状态之间的双向绑定
    - v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
    - v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
    - v-html: 显示html

    共同点：
    v-if 和 v-show 都是动态显示DOM元素。
    
    区别：
    1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。
    2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    3、性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
    4、应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

    v-on 指令常用修饰符：
    
    - .stop - 调用 event.stopPropagation()，禁止事件冒泡。
    - .prevent - 调用 event.preventDefault()，阻止事件默认行为。
    - .capture - 添加事件侦听器时使用 capture 模式。
    - .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    - .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    - .native - 监听组件根元素的原生事件。
    - .once - 只触发一次回调。
    - .left - (2.2.0) 只当点击鼠标左键时触发。
    - .right - (2.2.0) 只当点击鼠标右键时触发。
    - .middle - (2.2.0) 只当点击鼠标中键时触发。
    
    
    //注意： 如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现一些事件并不起效果，
    这时就需要用.native修饰符了，如当我们使用element-ui中的el-input组件时的@keyup.enter事件：
    <el-input
      v-model="inputName"
      placeholder="搜索你的文件"
      @keyup.enter.native="searchFile(params)"
      >
    </el-input>

    v-bind 指令常用修饰符：
    - .prop   被用于绑定 DOM 属性 (property)。(差别在哪里？)
    - .camel  (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
    - .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
    
    v-model 指令常用修饰符：
    - .lazy    取代 input 监听 change 事件
    - .number  输入字符串转为数字
    - .trim    输入首尾空格过滤

    v-on可以监听多个方法，例如：
    <input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
    
    但是同一种事件类型的方法，只会响应第一个，例如下面只会响应methodsOne方法。
    <a href="javascript:;" @click="methodsOne" @click="methodsTwo"></a>

    //html部分
    <a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
    
    //js部分
    showEvent(event){
    //获取自定义data-id
    	console.log(event.target.dataset.id)
       //阻止事件冒泡
    event.stopPropagation(); 
    //阻止默认
    event.preventDefault()
    }