Vue知识点(未完待续)

问题来源https://mp.weixin.qq.com/s/XcUDjrnaFc-P_WQsNczHwA

此文章附部分答案，本人菜鸟一枚，答案为参考答案，仅作为个人理解，如有误解，请多多指教

Vue相关

• 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解？
• 你知道v-model的原理吗？

          1. v-bind：绑定响应式数据

          2. 触发input事件，并传递数据

• 你有使用过vue开发多语言项目吗？说说你的做法？

        一、安装vue-i18n依赖（npm）;

npm install vue-i18n --save

        二、搭建配置文件

               在根目录创建一个i18n文件夹

               创建一个index.js文件

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

const messages = {
    zh_CN: require("./locale/zh_CN"),//中文语言包
    en_US: require("./locale/en_US")
}

export default new VueI18n({
    locale:'zh_CN',//默认语言
    messages:messages
})

               在i18n文件夹下，创建locale文件夹，创建zh_CN.js和en_US.js文件

          三、将语言包引入vue项目中

//在main.js中引入
import i18n from "@/i18n"

new Vue({
    el:'#app',
    router,
    store,
    i18n,
    components:{
        App
    },
    template:''
})

       四、使用

{$t('footer.open')}

this.btnText = this.$t('footer.open');

• 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？

        不可以，因为初始化vm的过程，会先把data绑定到vm，再把computed的值绑定到vm，会把data覆盖

• vue中data的属性可以和methods中的方法同名吗？为什么？

        不可以，Vue会把methods和data的属性全部代理到Vue生成的对象中，因此会被覆盖

• 怎么给vue定义全局的方法？

        1、挂载到vue的prototype上。缺点是调用这个方法的时候没有提示；

        2、利用全局混入mixin，因为mixin里面的methods会和创建的每个单文件组件合并，优点是调用这个方法的时候有提示

• vue2.0不再支持v-html中使用过滤器了怎么办？

        1、全局方法

vue.prototype.msg=function(msg){
    return msg.replace("\n","")
}

        2、computed 属性

new Vue({
    el:"#app",
    data:{
        content:"XXX"
    },
    computed:{
        content(msg){
            return msg.replace("\n","")
        }
    }
})

        3、$options.filters

 

//在定义的vue里的filter添加方法
new Vue({
    el:"#app",
    filters:{
        msg(msg){
            return msg.replace(/\n/g,"")
        }
    },
    data:{

    }
})

• 怎么解决vue打包后静态资源图片失效的问题？

          1、修改config=>index.js=> build:{  assetsPublicPath:'./'}

          2、找到build=>utils.js=>if(options.extract)条件中加一行 publicPath:'../../'

• 怎么解决vue动态设置img的src不生效的问题？

            使用require图片路径

• 使用vue后怎么针对搜索引擎做SEO优化？

          1、目前，对SEO支持比较好的项目方案是采用服务端渲染；

          2、如果采用了前后端分离的单页项目，而不需要AJAX获取内容，可以使用prerender-spa-plugin这个插件，这个插件是一个webpack插件，可以在打包过程中通过无头浏览器去渲染页面，并生成对应的HTML。此方案仅适合路由是静态的，并且路由数量非海量；

          3、如果页面内容通过AJAX动态获取，vue单页项目可以使用prerender，这是一个预渲染服务器

• 跟keep-alive有关的生命周期是哪些？描述下这些生命周期

          有关的是activated和deactivated

          keep-alive的生命周期

         1、activated：页面第一次进入的时候，钩子触发顺序是created=>mounted=>activated

         2、deactivated：页面退出的时候触发deactivated，当再次进入或者后退的时候只触发activated

• 如果现在让你从vue/react/angularjs三个中选择一个，你会选哪个？说说你的理由

• 你知道vue2.0兼容IE哪个版本以上吗？

            Vue不支持IE8及以下版本，因为Vue的响应式原理是基于es5的Object.defineProperty的，而这个方法不支持ie8及以下

• 使用vue开发一个todo小应用，谈下你的思路

          1、引用vue.js   2、全局组件注册    3、vue-cli脚手架

• 你有看过vue推荐的风格指南吗？列举出你知道的几条

        Vue官方风格指南https://cn.vuejs.org/v2/style-guide/（详情请移步官网）

       优先级A的规则：必要的（规避错误）

        #组件名为多个单词：避免跟现有的以及未来的HTML元素相冲突

       #组件数据：组件的data必须是一个函数

       #Prop定义应该尽量详细

       #为v-for设置键值：总是用key配合v-for

      #避免v-if和v-for用在一起：永远不要吧v-if和v-for同时用在同一个元素上

      #为组件样式设置作用域：scoped

      #私有属性名：使用模块作用域保持不允许外部访问的函数的私有性

       优先级B的规则：强烈推荐（增强可读性）

       #组件文件：只要有能够拼接文件的构建系统，就把每个组件单独分成文件

       #单文件组件文件的大小写：单文件组件的文件名应该要么始终是单词大写开头（PascalCase）,要么始终是横线连接（kebab-case）

       #基本组件名：应用特定样式和约定的基础组件应该全部以一个特定的前缀开头，比如Base，App或V

       #单例组件名：只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性

       #紧密耦合的组件名：和父组件紧密耦合的子组件应该以父组件名作为前缀命名

        #组件名中的单词顺序：组件名应该以高级别的单词开头，以描述性的修饰词结尾

       #自闭合组件：在单文件组件、字符串模板和JSX中没有内容的组件应该是自闭合的----但在DOM模板里永远不要这样做

       #模板中的组件名大小写：对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是PascalCase的---但是在DOM模板中总是kebab-case的

• 你是从vue哪个版本开始用的？你知道1.x和2.x有什么区别吗？

          1.作用域区别

                 1.x 随意的定义作用域

                 2.x 不允许body 或者html 元素

          2.json

                 1.x json 如果想显示 那么就得使用过滤器 json

                 2.x 不用过滤器了 直接可以看

                 1.x 显示 {{msg | json}}

                 2.x 显示 {{ msg}} 便可直接显示对象

          3.生命周期

               1.x 

                      created 实例已经创建

                      beforeCompile 在编程之前

                      compiled 编程之后

                      ready 实例已经插入到文档之中

                      beforeDetroy 在销毁之前

                      destroyed 销毁之后

               2.x

                      beforeCreate 刚刚创建这个实例 属性还没有绑定

                      created 创建完毕 属性已经绑定好了

                      beforeMount 模版在渲染之前

                      mounted //ready 渲染之后

                      beforeUpdate //数据更新之前

                      updated //数据更新之后

                      beforeDestroy 实例化销毁之前

                      destroyed 实例化销毁之后

         4.循环区别

               2.x不可以再根模板加循环属性    没有 $index $key 没有了 1.x (index , value) 索引 值 2.x (value , index) 值 索引

        5.过滤器

               2.x取消了所有的默认的过滤器 封装的方式没有区别

               1.x 传参 uppercase "1" "2"

               2.x uppercase('1','2')

• 你知道vue中key的原理吗？说说你对它的理解

       key的作用主要是为了高效的更新虚拟DOM

• vue中怎么重置data？

              1、 this逐个赋值

               2、使用Object.assign()     this.$data 获取当前状态下的data        this.$options.data()获取该组件初始状态下的data

                       Object.assign(this.$data, this.$options.data())

                     如果你只想重置data中的某一个对象或者属性：
                     this.form = this.$options.data().form

• vue渲染模板时怎么保留模板中的HTML注释呢？

            元素标签中comments为true

• Vue.observable你有了解过吗？说说看

• 你知道style加scoped属性的用途和原理吗？

• 你期待vue3.0有什么功能或者改进的地方？

• vue边界情况有哪些？

• 如何在子组件中访问父组件的实例？

• watch的属性用箭头函数定义结果会怎么样？

• 在vue项目中如果methods的方法用箭头函数定义结果会怎么样？

• 在vue项目中如何配置favicon？

• 你有使用过babel-polyfill模块吗？主要是用来做什么的？

• 说说你对vue的错误处理的了解？

• 在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

• 在.vue文件中style是必须的吗？那script是必须的吗？为什么？

• vue怎么实现强制刷新组件？

• vue自定义事件中父组件怎么接收子组件的多个参数？

• 实际工作中，你总结的vue最佳实践有哪些？

• vue给组件绑定自定义事件无效怎么解决？

• vue的属性名称与method的方法名称一样时会发生什么问题？

• vue变量名如果以_、$开头的属性会发生什么问题？怎么访问到它们的值？

• vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

• vue如果想扩展某个现有的组件时，怎么做呢？

• 说下attrs和_attrs_和listeners的使用场景

• 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？

• v-once的使用场景有哪些？

• 说说你对vue的表单修饰符.lazy的理解

• vue为什么要求组件模板只能有一个根元素？

• EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

• 怎么修改vue打包后生成文件路径？

• 你有使用做过vue与原生app交互吗？说说vue与ap交互的方法

• 使用vue写一个tab切换

• vue中什么是递归组件？举个例子说明下？

• 怎么访问到子组件的实例或者子元素？

• 在子组件中怎么访问到父组件的实例？

• 在组件中怎么访问到根实例？

• 说说你对Object.defineProperty的理解

• vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？

• vue组件里的定时器要怎么销毁？

• vue组件会在什么时候下被销毁？

• 使用vue渲染大量数据时应该怎么优化？说下你的思路！

• 在vue中使用this应该注意哪些问题？

• 你有使用过JSX吗？说说你对JSX的理解

• 说说组件的命名规范

• 怎么配置使vue2.0+支持TypeScript写法？

• 有什么用？

• vue的is这个特性你有用过吗？主要用在哪些方面？

• vue的:class和:style有几种表示方式？

• 你了解什么是函数式组件吗？

• vue怎么改变插入模板的分隔符？

• 组件中写name选项有什么作用？

• 说说你对provide和inject的理解

• 开发过程中有使用过devtools吗？

• 说说你对slot的理解有多少？slot使用场景有哪些？

• 你有使用过动态组件吗？说说你对它的理解

• prop验证的type类型有哪几种？

• prop是怎么做验证的？可以设置默认值吗？

• 怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？

• 说说你对vue组件的设计原则的理解

• 你了解vue的diff算法吗？

• vue如何优化首页的加载速度？

• vue打包成最终的文件有哪些？

• ajax、fetch、axios这三都有什么区别？

• vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？

• vue中是如何使用event对象的？

• vue首页白屏是什么问题引起的？如何解决呢？

• 说说你对单向数据流和双向数据流的理解

• 移动端ui你用的是哪个ui库？有遇到过什么问题吗？

• 你知道nextTick的原理吗？

• 说说你对v-clock和v-pre指令的理解

• 写出你知道的表单修饰符和事件修饰符

• 说说你对proxy的理解

• 你有自己用vue写过UI组件库吗？

• 用vue怎么实现一个换肤的功能？

• 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？

• 如果让你教一个2-3年经验前端经验的同事使用vue，你该怎么教？

• vue性能的优化的方法有哪些？

• SSR解决了什么问题？有做过SSR吗？你是怎么做的？

• 说说你觉得认为的vue开发规范有哪些？

• vue部署上线前需要做哪些准备工作？

• vue过渡动画实现的方式有哪些？

• vue在created和mounted这两个生命周期中请求数据有什么区别呢？

• vue父子组件双向绑定的方法有哪些？

• vue怎么获取DOM节点？

• vue项目有做过单元测试吗？

• vue项目有使用过npm run build --report吗？

• 如何解决vue打包vendor过大的问题？

• webpack打包vue速度太慢怎么办？

• vue在开发过程中要同时跟N个不同的后端人员联调接口（请求的url不一样）时你该怎么办？

• vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

• 说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

• 在移动端使用vue，你觉得最佳实践有哪些？

• 你们项目为什么会选vue而不选择其它的框架呢？

• 对于即将到来的vue3.0特性你有什么了解的吗？

• vue开发过程中你有使用什么辅助工具吗？

• vue和微信小程序写法上有什么区别？

• 怎么缓存当前的组件？缓存后怎么更新？

• 你了解什么是高阶组件吗？可否举个例子说明下？

• 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？

• vue-loader是什么？它有什么作用？

• 说说你对vue的extend（构造器）的理解，它主要是用来做什么的？

• 如果将axios异步请求同步化处理？

• 怎么捕获组件vue的错误信息？

• 为什么vue使用异步更新组件？

• 如何实现一个虚拟DOM？说说你的思路

• 写出多种定义组件模板的方法

• SPA单页面的实现方式有哪些？

• 说说你对SPA单页面的理解，它的优缺点分别是什么？

• 说说你都用vue做过哪些类型的项目？

• 在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？

• 使用vue手写一个过滤器

• 你有使用过render函数吗？有什么好处？

• 写出你常用的指令有哪些？

• 手写一个自定义指令及写出如何调用

• 组件进来请求接口时你是放在哪个生命周期？为什么？

• 你有用过事件总线(EventBus)吗？说说你的理解

• 说说vue的优缺点分别是什么？

• DOM渲染在哪个周期中就已经完成了？

• 第一次加载页面时会触发哪几个钩子？

• vue生命周期总共有几个阶段？

• vue生命周期的作用是什么？

• vue和angular有什么区别呢？

• 如何引入scss？引入后如何使用？

• 使用vue开发过程你是怎么做接口管理的？

• 为何官方推荐使用axios而不用vue-resource？

• 你了解axios的原理吗？有看过它的源码吗？

• 你有封装过axios吗？主要是封装哪方面的？

• 如何中断axios的请求？

• axios是什么？怎样使用它？怎么解决跨域的问题？

• 说说你对vue的template编译的理解？

• v-on可以绑定多个方法吗？

• vue常用的修饰符有哪些？列举并说明

• 你认为vue的核心是什么？

• v-model是什么？有什么用呢？

• 说说你对vue的mixin的理解，有什么应用场景？

• SPA首屏加载速度慢的怎么解决？

• 删除数组用delete和Vue.delete有什么区别？

• 动态给vue的data添加一个新的属性时会发生什么？怎样解决？

• 组件和插件有什么区别？

• 说说你使用vue过程中遇到的问题（坑）有哪些，你是怎么解决的？

• 说说你对选项el,template,render的理解

• vue实例挂载的过程是什么？

• vue在组件中引入插件的方法有哪些？

• v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

• 分别说说vue能监听到数组或对象变化的场景，还有哪些场景是监听不到的？无法监听时有什么解决方案？

• $nextTick有什么作用？

• 为什么data属性必须声明为返回一个初始数据对应的函数呢？

• 怎么在watch监听开始之后立即被调用？

• watch怎么深度监听对象变化？

• watch和计算属性有什么区别？

• vue如何监听键盘事件？

• v-for循环中key有什么作用？

• 怎么在vue中使用插件？

• 你有写过自定义组件吗？

• 说说你对keep-alive的理解是什么？

• 怎么使css样式只在当前组件中生效？

• 你有看过vue的源码吗？如果有那就说说看

• 你有写过自定义指令吗？自定义指令的生命周期（钩子函数）有哪些？

• v-show和v-if有什么区别？使用场景分别是什么？

• 说说你对MVC、MVP、MVVM模式的理解

• 说下你对指令的理解？

• 请描述下vue的生命周期是什么？

• vue组件之间的通信都有哪些？

• 什么是虚拟DOM？

• 什么是双向绑定？原理是什么？

• vue和react有什么不同？使用场景是什么？

• 说说vue的优缺点

• 有使用过vue吗？说说你对vue的理解

Vue CLI 相关

• vue-cli提供了的哪几种脚手架模板？

• vue-cli工程中常用的npm命令有哪些？

• 在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？

• vue-cli3插件有写过吗？怎么写一个代码生成插件？

• vue-cli生成的项目可以使用es6、es7的语法吗？为什么？

• vue-cli怎么解决跨域的问题？

• vue-cli中你经常的加载器有哪些？

• 你知道什么是脚手架吗？

• 说下你了解的vue-cli原理？你可以自己实现个类vue-cli吗？

• 怎么使用vue-cli3创建一个项目？

• vue-cli3你有使用过吗？它和2.x版本有什么区别？

• vue-cli默认是单页面的，那要弄成多页面该怎么办呢？

• 不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

vue-router

• vue-router怎么重定向页面？

• vue-router怎么配置404页面？

• 切换路由时，需要保存草稿的功能，怎么实现呢？

• vue-router路由有几种模式？说说它们的区别？

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

• 说说你对router-link的了解

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

• 你有看过vue-router的源码吗？说说看

• 切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？

• 在什么场景下会用到嵌套路由？

• 如何获取路由传过来的参数？

• 说说active-class是哪个组件的属性？

• 在vue组件中怎么获取到当前的路由信息？

• vur-router怎么重定向？

• 怎样动态加载路由？

• 怎么实现路由懒加载呢？

• 如果让你从零开始写一个vue路由，说说你的思路

• 说说vue-router完整的导航解析流程是什么？

• 路由之间是怎么跳转的？有哪些方式？

• 如果vue-router使用history模式，部署时要注意什么？

• route和router有什么区别？

• vue-router钩子函数有哪些？都有哪些参数？

• vue-router是用来做什么的？它有哪些组件？

vuex

• 你有写过vuex中store的插件吗？

• 你有使用过vuex的module吗？主要是在什么场景下使用？

• vuex中actions和mutations有什么区别？

• vuex使用actions时不支持多参数传递怎么办？

• 你觉得vuex有什么缺点？

• 你觉得要是不用vuex的话会带来哪些问题？

• vuex怎么知道state是通过mutation修改还是外部直接修改的？

• 请求数据是写在组件的methods中还是在vuex的action中？

• 怎么监听vuex数据的变化？

• vuex的action和mutation的特性是什么？有什么区别？

• 页面刷新后vuex的state数据丢失怎么解决？

• vuex的state、getter、mutation、action、module特性分别是什么？

• vuex的store有几个属性值？分别讲讲它们的作用是什么？

• 你理解的vuex是什么呢？哪些场景会用到？不用会有问题吗？有哪些特性？

• 使用vuex的优势是什么？

• 有用过vuex吗？它主要解决的是什么问题？推荐在哪些场景用？

ElementUI

• ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？

• 你有二次封装过ElementUI组件吗？

• ElementUI怎么修改组件的默认样式？

• ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢？

• ElementUI表格组件如何实现动态表头？

• ElementUI使用表格组件时有遇到过问题吗？

• 有阅读过ElementUI的源码吗？

• 项目中有使用过ElementUI吗？有遇到过哪些问题？它的使用场景主要是哪些？

• 有用过哪些vue的ui？说说它们的优缺点？