VUE 你真的了解吗？ 看看以下的问题你能回答几个！（上）

这里是GBB 不好意思我又回来了 这是我看别人的一篇文章整理的希望你们喜欢,还是以前那样来个freestyle

vue 其实并不简单
多多学习才能往上攀
脑袋一定要会多转弯
打开思维道路才会宽
每个问题都与vue相关
答不上来千万别难堪
也不要把我的作品删
给点打赏让我吃个午餐
也不用很多不需要几千
把知识传给你们每一天
skr skr

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

 答： 

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

答： 类轻量级vuex，用作状态管理。  —— vue2.6发布一个新的API，可以处理一些简单的跨组件共享数据状态的问题。

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

答：用途：防止全局同名CSS污染
原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式

• vue边界情况有哪些？

答：在errorCaptured中更改组件状态，触发更新后再次报错（未设置短路条件），陷入无限循环，（需要你们补充）

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

答：this.$parent拿到父组件实例
this.$children拿到子组件实例（数组）

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

答：this是undefined，要更改的属性会报TypeError错误, Cannot read property 'xxx' of undefined

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

答：VUE的methods对象里面如果函数使用箭头函数会导致this指向的不是vue实例$vm,而是一个xxxx.a的一个类，尽量不要再VUE所定义的字段里面使用箭头函数

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

答：1.Vue-cli3中，可以在vue.config.js中的pwa字段配置favicon路径等相关设置
        2.也可以在当前项目部署的端口主目录下存放favicon.ico文件，默认就会显示该图标
3.html模版加入meta标签，引入favicon

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

 答：ES6的转码。IE的兼容

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

答：分为errorCaptured与errorHandler。
errorCaptured是组件内部钩子，可捕捉本组件与子孙组件抛出的错误，接收error、vm、info三个参数，return false后可以阻止错误继续向上抛出。
errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6后可捕捉v-on与promise链的错误，可用于统一错误处理与错误兜底。

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

答：currentTarget 始终是监听事件者，而 target 是事件的真正发出者

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

 答：都不是必须的
如果是普通组件那么只能是一个静态html
如果是函数式组件， 那么可以直接使用props等函数式组件属性

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

答：this.$forceUpdate()
v-if

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

传递一个对象出去

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

存一份 defaultData 方便直接初始化，特别是带表单的弹窗也写在一起没有生命周期的时候。

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

加入.native修饰符

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

报错 "Method 'xxx' has already been defined as a data property"

键名优先级：props > data > methods

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

报错 变量未定义
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。
你可以使用例如 $data.xxx或者_data.xxx 的方式访问这些属性。

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

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

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

不对原组件进行更改的：

使用Vue.extend直接扩展
使用Vue.mixin全局混入
HOC封装
可以加slot扩展

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

组件传值，祖孙组件有跨度的传值。

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

1.检查nginx配置，是否正确设置了资源映射条件；
2.检查vue.config.js中是否配置了publicPath，若有则检查是否和项目资源文件在服务器摆放位置一致。

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

单次触发的场景

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

input标签v-model用lazy修饰之后，vue并不会立即监听input Value的改变，会在input失去焦点之后，才会触发input Value的改变

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

因为"树"状数据结构，肯定要有个"根"，一个遍历起始点吧，我是这么理解的。

vuejs/vue#7088 (官方解释)

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

在组件内的beforeRouteLeave中移除事件监听

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

webpack：output.path
vue-cli3: outputDir

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

1.app定义一个方法传给我们，根据方法调用
2.jsBridge,建立连接，然后相互调用    

• 使用vue写一个tab切换

v-for循环list，根据索引值设置active的样式和显示内容

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

当前注册一个vue组件定义 name 为 'node-tree' ，在组件 template 内部调用 实现递归。

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

通过this.$refs

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

通过this.$parent

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

通过this.$root

• 说说你对Object.defineProperty的理解

Object.defineProperty定义新属性或修改原有的属性；
vue的数据双向绑定的原理就是用的Object.defineProperty这个方法，里面定义了setter和getter方法，通过观察者模式（发布订阅模式）来监听数据的变化，从而做相应的逻辑处理。

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

肯定要，一方面是绑定多次，另一方面是函数没释放会内存溢出

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

当生命周期销毁后，并没有将组件中的计时器销毁，虽然页面上看不出来，但是如果在控制台打印的话，会发现计时器还在运行，所以要销毁计时器，避免代码一直执行

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

v-if=‘false‘

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

1.如果需要响应式，考虑使用虚表（只渲染要显示的数据）；
2.如果不考虑响应式，变量在beforeCreated或created中声明（Object.freeze会导致列表无法增加数据）

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

vue中使用匿名函数，会出现this指针改变。
解决方法
1.使用箭头函数
2.定义变量绑定this至vue对象

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

jsx不是一门新的语言，是一种新的语法糖。让我们在js中可以编写像html一样的代码。
允许XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面

• 说说组件的命名规范

官方样式指南里是这样写的：
“组件命名应当是多个单词的，但根目录下的App组件或Vue提供的如, 内置组件除外”
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

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

配置ts-loader，tsconfig
增加类型扩展，让ts识别vue文件
vue文件中script里面换成ts写法， 需要增加几个ts扩展的package， 比如vue-property-decorator

• 有什么用？

当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰

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

动态组件，当你多个组件需要通过 v-if 切换时，可以使用 is 来简化代码
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题

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

:class 绑定变量 绑定对象 绑定一个数组 绑定三元表达式
:style 绑定变量 绑定对象 绑定函数返回值 绑定三元表达式

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

函数式组件：

需要提供一个render方法， 接受一个参数（createElement函数）， 方法内根据业务逻辑，通过createElement创建vnodes，最后return vnodes

createElement函数， 三个参数， 第一个参数是html标签或自定义组件，第二个参数一个obj（包含props， on...等等）， 第三个参数children(通过createElement构建， 或者字符串)

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

delimiters

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

项目使用keep-alive时，可搭配组件name进行缓存过滤
DOM做递归组件时需要调用自身name
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

• 说说你对provide和inject的理解

通过在父组件中provide一些数据然后再所有子组件中都可以通过inject获取使用该参数,

主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题, 主要用于组件封装, 常见于一些ui组件库

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

有，devtools确实是个好东西，大力协助vue项目开发，传参，数据展示，用于调试vue应用，这可以极大地提高我们的调试效率

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

slot, 插槽, 在使用组件的时候, 在组建内部插入东西.
组件封装的时候最常使用到

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

component, vue的内置组件, 说实话, 如果不是特殊场景不要去使用, 容易使人混乱

详见: vue component

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

Number, String, Boolean, Array, Function, Object

[我来挑战]

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

单个类型就用Number等基础类型，多个类型用数组，必填的话设置require为true，默认值的话设置default，对象和数组设置默认用工厂函数，自定义验证函数validator。

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

可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等

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

第一: 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸
第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值
第三: 颗粒化, 把组件拆分出来.
第四: 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到
第五: 场景化, 如一个dialog弹出, 还需要根据不同的状态封装成success, waring, 等
第六: 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么
第七: 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度
第八: 可拓展性, 前期可能不需要这个功能, 但是后期可能会用上, 要预留什么, 要注意什么, 心里要有逼数
第九: 规范化,我这个input组件, 叫on-change, 我另外一个select组件叫change, 信不信老子捶死你
第十: 分阶段: 不是什么都要一期开发完成看具体业务, 如果一个select, 我只是个简单的select功能,、

• 你了解vue的diff算法吗？

如一个list中某一个数据发生变更时,
vue中会对整个list进行遍历, 判断使用到的某些属性是否发生变更, 从而更新发生变更的item
所以key属性才会显得很重要, 它会告诉你, 我那个item发生变更, 而不是去检测整个list

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

异步路由和异步加载
还有分屏加载, 按需加载, 延时加载图片等, cdn, 域名才分

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

vendor.js, app.js, app.css,
1.xxx.js
2.xxx.js

如果有设置到单独提取css的话
还有
1.xxx.css
......

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

ajax是概念 异步交换数据的概念
fetch是浏览器提供的webAPI 原理是基于xmlHttpRequest的封装
axios是第三方库 基于xmlHttpRequest的封装 使用更便捷

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

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
watch{
  arr(val oval）{
}
}

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

[@click](https://github.com/click)='handleClick($events)'

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

在config文件夹中找到index.js打开把
assetsPublicPath: '/'
改成
assetsPublicPath: './'
再次执行 npm run build 就可以了。

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

单向数据流：所有状态的改变可记录、可跟踪，源头易追溯；所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)；如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
双向数据流：无论数据改变，或是用户操作，都能带来互相的变动，自动更新。

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

vant，mint等等吧，各有各的坑，不过大部分都是可以查到解决方案的

• 你知道nextTick的原理吗？

1）所有同步任务都在主线程上执行，形成一个[执行栈](http://www.ruanyifeng.com/blog/2013/11/stack.html)（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

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

v-cloak指令只是在标签中加入一个v-cloak自定义属性，在HTML还编译完成之后该属性会被删除。
v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出。

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

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim

• 说说你对proxy的理解

目前只知道用来修改 属性的get set方法 vue3 来替换Object.defineProperty。一方面提高性能 另一方面可以免去给数组重写方法。

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

{{item.title}}
    

      

        {{item2.title}}
      
    

  

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

这个……全局的theme属性然后做class判断或者加载不同的样式文件。一种是编译时换肤 一种是用户操作换肤。编译时换肤可以通过css in js相关技术修改css预处理器的变量 。用户操作换肤 只能内置一些styleb变量供用户选择了

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

1.在切换tab时 第二个tab的图表无法正常显示 切换tab时使用方法@tab-click="handleClick"加载图表的render函数
2.vue 没用过echarts react到是用过 不过我想应该差不多 ，多注意dom的渲染时机 和chart的实例化时机 在相应的生命周期方法中做操作。结合强制刷新 应该就能解决大部分问题

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

把官网地址贴给他

• vue性能的优化的方法有哪些？
  vue-9-perf-secrets

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

SSR服务端渲染，解决SEO问题，用next吧，最佳实践

• 说说你觉得认为的vue开发规范有哪些？
  vue开发典范
• vue部署上线前需要做哪些准备工作？

1.router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn
2.主要assetsPublicPath、publicPath 两个

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

一.使用vue的transition标签结合css样式完成动画
二.利用animate.css结合transition实现动画
三.利用 vue中的钩子函数实现动画

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

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

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

所有的 prop 都使得其父子 prop 之间形成了一个 单向下行绑定

父级 prop 的更新会向下流动到子组件中，但是反过来则不行
2.3.0+ 新增 .sync 修饰符
以 update:my-prop-name 的模式触发事件实现 上行绑定 最终实现 双向绑定
举个栗子
this.$emit('update:title', newTitle)

• vue怎么获取DOM节点？

ref

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

没有

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

所以我们可以通过process.env.npm_config_report获取它的值为true，由于webpack.prod.conf.js调用config/index.js中的bundleAnalyzerReport 所以会调用webpack-bundle-analyzer插件

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

1、在webpack.base.conf.js新增externals配置，表示不需要打包的文件，然后在index.html中通过CDN引入

externals: {
    "vue": "Vue",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "element-ui": "ELEMENT",
    "BMap": "BMap"
  }

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

webpack 的devServer配置下代理

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

可以通过指令去做
Vue.directive('hasPermission', {
bind(el, binding, vnode) {
const permissions = vnode.context.$store.state.account.permissions
if (binding.value === '') return
const value = binding.value.split(',')
let flag = true
for (const v of value) {
if (!permissions.includes(v)) {
flag = false
}
}
if (!flag) {
if (!el.parentNode) {
el.style.display = 'none'
} else {
el.parentNode.removeChild(el)
}
}
}
}

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

新建page目录与components同级
components
    ---common   //公共部分
        ---header
        ---footer
    ---content  //内容部分
        ---组件1
        ---组件2
page    //各页面入口
   ---home.vue  
   ---content1
   ---content2
   ---content3
   ---content...          

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

我不知道

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

vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快

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

element- ui
axios 
less

• vue和微信小程序写法上有什么区别？
  在这里
  homie实在写不动了哪天有空再加！

干了这碗毒鸡汤：所有的工作做久了都会觉得无聊，差别在于，别人无聊还赚得比你多。

爱我吗

最后关注微信公众号：”喵姐影院“ 免VIP观影！ 爱你们