1. The vue advantages?
A: Lightweight framework: Focusing only on the view layer, is a collection of views that build data and is only tens of kilobytes in size; Easy to learn: Chinese developed, Chinese documents, there is no language barrier, easy to understand and learn; Two-way data binding: Preserves Angular features and makes data manipulation easier; Componentization: React retains the advantages of encapsulation and reuse of HTML, and has unique advantages in building single-page applications. Separation of view, data and structure: it makes it easier to change the data, without the need to modify the logical code, and only need to operate the data to complete the relevant operations; Virtual DOM: DOM manipulation is very performance consuming. The native DOM manipulation node is no longer used, which greatly liberates DOM manipulation. However, the specific DOM operation is just changed in another way. Faster operation: Compared with React, vUE also operates virtual DOM. In terms of performance, vue has a big advantage.
2. Vue parent component passing data to child component?
A: Through props
3. Does a child component pass events like a parent?
Answer: the $emit method
4. What are the similarities and differences between V-show and V-IF directives?
A: Common: both can control the display and hiding of elements; Difference: The implementation of the essence of the method is different, the essence of v-show is to control the CSS display set to None, control hidden, will only compile once; V-if dynamically adds or removes DOM elements from the DOM tree. If the initial value is false, it will not compile. And v-if’s constant destruction and creation costs performance. Summary: If you want to switch nodes frequently, use v-show(switching costs are low and initial overhead is high). Use V-if if a node does not need to be switched frequently (the initial rendering cost is low, the switching cost is high).
5. How do I make CSS work only in the current component?
Answer: Append style to scoped in the component
6. What is the role of?
A: Keep-alive is a component built into Vue that can preserve the state of contained components or avoid re-rendering.
7. How do I get dom?
This.$refs.domName = ref=”domName
Name how many commands in VUE and how they are used.
A: V-Model two-way data binding; V – for loop; V-if v-show Show and hide; V – on events; V-once: Binding only once.
9. What is vue-loader? What are the uses for it?
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
10.为什么使用key?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
11.axios及安装?
答：请求后台资源的模块。npm install axios –save装好，
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。
12.v-modal的使用。
答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。
13.请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。
14.分别简述computed和watch的使用场景
答：computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子：搜索数据
15.v-on可以监听多个方法吗？
答：可以，栗子：。
**16.
nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
17.vue组件中data为什么必须是一个函数？
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
18.渐进式框架的理解
答：主张最少；可以根据不同的需求选择不同的层级；
19.Vue中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
20.单页面应用和多页面应用区别及优缺点
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
21.v-if和v-for的优先级
答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。
22.assets和static的区别
答：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
23.vue常用的修饰符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
24.vue的两个核心点
答：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。
25.vue和jQuery的区别
答：jQuery是使用选择器（
(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
26. 引进组件的步骤
答: 在template中引入组件；
在script的第一行用import引入路径；
用component中写上组件名称。
27.delete和Vue.delete删除数组的区别
答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
28.SPA首屏加载慢如何解决
答：安装动态懒加载所需插件；使用CDN资源。
29.Vue-router跳转和location.href有什么区别
答：使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
使用history.pushState(‘/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(‘/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。
30. vue slot
答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
31.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。
32.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。
33.Vue2中注册在router-link上事件无效解决方法
答： 使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。
34.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题
答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法
35.axios的特点有哪些
答：从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。
36.请说下封装 vue 组件的过程？
答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
4. 封装完毕了，直接调用即可
37.params和query的区别
答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.
route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。
38.vue初始化页面闪动问题
答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style=”display: none;” :style=”{display: ‘block’}”
39.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
40.vue常用的UI组件库
答：Mint UI，element，VUX
41.vue修改打包后静态资源路径的修改
答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 ‘./’ 。
build: {
…
assetsPublicPath: ‘./’,
…
}
cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {
publicPath: ”, // 相对于 HTML 页面（目录相同） }
Life cycle function interview question
1. What is the VUE lifecycle? What does it do? A: Each Vue instance goes through a series of initialization procedures when it is created — for example, you need to set up data listeners, compile templates, mount the instance to the DOM and update the DOM when the data changes, and so on. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages. For example, if you want to use a plugin to manipulate a DOM node, such as a pop-up AD window after the page is rendered, you can do this in Mounted. 2. Which hooks will be triggered the first time the page loads? A: beforeCreate, created, beforeMount, Mounted 3. A: beforeCreate: After new a Vue instance, only some default lifecycle hooks and default events are created, and the rest is not yet created. When the beforeCreate life cycle is executed, the data in data and methods are not initialized. Create: Data and methods are already initialized. If you want to call methods in methods or manipulate data in data, the earliest you can do beforeMount is in this phase: Mounted: When this hook is mounted, the Vue instance is initialized. At this point, the component leaves the creation phase and enters the run phase. If we want to manipulate a DOM node on a page with a plugin, we can do beforeUpdate as early as in and phases: When this hook is executed, the data displayed in the page is old, the data in data is updated, and the page is not yet synchronized with the latest data: The data displayed on the page is already in sync with the data in the data, it is up-to-date. BeforeDestory: The Vue instance moves from the run phase to the destroy phase, at which point all data and methods, instructions, filters… They’re all available. They have not destroyed all data and methods, commands, filters… They are all unavailable. The component has been destroyed. A: Created is called before a template is rendered to HTML, usually to initialize some property values before rendering to a view. Mounted: Specifies whether to perform operations on AN HTML DOM node after the template is initialized. 5. Vue which periodic function to get the data in a: general created/beforeMount/mounted. For example, if you want to manipulate the DOM, it must be mounted only. Can you elaborate on your understanding of the VUE lifecycle? A: There are 8 stages: before/after creation, before/after loading, before/after updating, and before/after destruction. Before/after creation: During the beforeCreated phase, the mount element EL and the \*\*data object \*\*data of the vue instance are both undefined and not initialized. In the created phase, the vue instance’s data object, data, el and the \*\*data object, are undefined and not initialized. In the created phase, the vue instance’s data object, data, el and the \*\*data object, are undefined and not initialized. In the Created phase, the vUE instance’s data object, Data, is available, but el is not. Before/After loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the previously virtual DOM node is still mounted, and data.message has not been replaced. In mounted phase, vue instance is mounted and data.message is successfully rendered. Before/After update: When data changes, the beforeUpdate and updated methods are triggered. Before/after destroy: Changes to data do not trigger periodic functions after destroy, indicating that the vue instance has been unbound from event listening and the DOM structure still exists.
Vue routing interview questions
1. What is the MVVM framework? A: VUE is an MVVM framework that implements two-way data binding, updating the model layer when the view changes and updating the view layer when the model layer changes. In VUE, bidirectional binding technology is used, that is, the changes of the View can change the Model in real time, and the changes of the Model can be updated to the View in real time. 2. What is vue-router? A: VUE is used to write routes to a plug-in. Router-link, router-view 3. Which component is active-class? A: Router-link component of vue-Router module. 4. How to define vue-router dynamic route? How do I get the passed value? A: Add /:id to the path attribute in the index.js file in the router directory. Use the params.id of the Router object. 5. What kinds of navigation hooks does vue-Router have? BeforeEach (to,from,next) intercepts before jumping. 3. Separate route Exclusive component 6. Route and route Router is an instance of VueRouter, and if you want to navigate to different urls in the script tag, To navigate to different urls in script tags, use the router.push method. To (−1)router.to(-1) router.to(−1)router.to(−1)router.to(−1)router.to(−1)router.to(−1)router.to(−1) Router.to (−1) Router.to (−1) Router.to You can obtain the name,path,query, and parmas of the current route. 7. Vue-router two modes A: Hash mode: the hash mode is the # symbol in the URL of the address bar. History mode: The window.history object is printed to see the method and record length provided in it. Takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. (Requires browser specific support). Vue-router Implements lazy route loading (dynamic route loading) A: There are three methods. The first method is vUE asynchronous component technology ==== Asynchronous loading. Vue-router configures routes and uses VUE asynchronous component technology to load routes on demand. However, in this case a component generates a JS file. The second type: lazy route loading (using import). The third type: Require.ensure () provided by Webpack, vue-router configures routing, using Webpack’s Require.Ensure technology, which can also be loaded on demand. In this case, multiple routes with the same chunkName are combined and packaged into a single JS file.
Vuex often meet test questions
1. What is vuex? How to use it? Which functional scenarios use it? A: State management in the VUE framework. Import store and inject in main.js. Create a new directory, store.js… . Export. The scenarios are as follows: Status between components in a single-page application. Music play, login status, add to shopping cart 2. What are the attributes of Vuex? A: Mutations => Open mutations => open mutations => open mutations => open mutations => open mutations => open mutations Actions => acts like an decorator, wrapping mutations so it can be asynchronous. Modules => Should ajax request code in Vuex 3.vuue. Js be written in component’s methods or Vuex’s Actions? A: If the requested data is not to be shared by other components, it does not need to be put into vuEX state if it is only used within the requested component. This is most likely needed if it is reused elsewhere. If it is, put the request into an action for reuse. Above questions for personal study only, if there is an error please correct. thank you