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? A: What is the purpose of adding scoped 6 before style in a component? 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.
- What is vue-loader? What are the uses for it?
A: a loader for vue files that converts template/js/style into JS modules. Use: JS can write ES6, style style can SCSS or less, template can add Jade, etc
10. Why use key? A: A key is required to give each node a unique identity, and the Diff algorithm can correctly identify the node. The main purpose is to update the virtual DOM efficiently.
11. Axios and installation? A: A module that requests background resources. NPM install axios –save, import from js, then.get or.post. Returns success in the.then function and failure in the.catch function.
12. Use of V-modal. A: V-model is used for bidirectional binding of form data. It is a syntax sugar. The V-on directive binds the input event to the current element.
13. Name the use of each folder and file in the SRC directory in vue.cli project. A: The assets folder contains static resources. Components; Router defines routing configurations. App. vue is an application main component; Main.js is the entry file.
14. Describe the usage scenarios of computed and Watch respectively
A: Computed: The most typical example of computed is when an attribute is affected by multiple attributes: when shopping carts are loaded
Watch: This parameter is used when one data item affects multiple data items
15. Can V-ON listen for multiple methods? A: Yes, chestnut:
A: When you modify the value of data and immediately retrieve the dom element value, you cannot retrieve the updated value. You need to use nextTick. When you modify the value of data and immediately retrieve the dom element value, you cannot retrieve the updated value. You need to use nextTick. When you modify the value of data and immediately retrieve the value of the DOM element, you cannot retrieve the updated value. You need to use the nextTick callback to render the modified value of data and update it to the DOM element before retrieving it.
17. Why must data be a function in a Vue component? A: Because of the nature of JavaScript, in Component, data must exist as a function, not an object. The data in the component is written as a function, and the data is defined in the form of the return value of the function. In this way, every time the component is reused, a new data will be returned, which means that each component instance has its own private data space, and they are only responsible for the data they maintain, without causing confusion. In pure object form, all component instances share the same data, so change one all changed.
18. Understanding of progressive framework answer: The least claims; Different levels can be selected according to different needs;
19. How is bidirectional data binding implemented in Vue? A: VUE two-way data binding is implemented through data hijacking combined with publish/subscribe mode. That is to say, data and view are synchronized. As data changes, view changes, data changes. Core: For VUE two-way data binding, the core is the Object.defineProperty() method.
A: A single page application (SPA), generally speaking, refers to an application with only one home page. The browser must load all the necessary HTML, JS and CSS at the beginning. All page content is contained in this so-called home page. However, when writing, it is still written separately (page fragment), and then dynamically loaded by the routing program during interaction, single-page page jump, only refreshing local resources. It is mainly used on PCS. Multi-page (MPA) refers to the advantages of refreshing a single page in an application with multiple pages. The user experience is good and fast, and the change of content does not require reloading the whole page. Based on this point, SPA has less pressure on the server. Front and rear end separation; The effects of the page will be cool (such as a special animation when switching between pages). Single page disadvantages: bad for SEO; Navigation is not available. If you must navigate, you need to implement forward and backward. (because it is a single page and cannot use the browser’s forward and backward function, so you need to build your own stack management); The initial loading is time-consuming; Page complexity has increased considerably.
A: When v-if is used with V-for, v-for has a higher priority than V-if, which means that v-if will be repeated separately in each V-for loop. Therefore, it is not recommended to use v-if and V-for together. If v-if and v-for are used together, vUE will automatically indicate that v-if should be placed in the outer layer.
22. The difference between assets and static A: Similarities: Both assets and static are used to store static resource files. Resource files, images, font ICONS, style files, etc. needed in the project can be placed under these two files, which are the same. The static resource files stored in assets are packaged and uploaded when the project is packaged, that is, when the NPM run build is run. The so-called simple packaging point can be understood as compression volume and code formatting. The compressed static resource file is eventually placed in a static file and uploaded to the server along with index.html. Static resource files do not need to go through the packaging, compression and formatting process, but directly into the packaged directory, directly uploaded to the server. However, static resource files are not compressed, so the volume of the file is larger than that of the packaged assets file. It takes up more space on the server. Suggestion: Place style files js files required by the template in the project in assets and go through the packaging process. Reduce volume. The third-party resource files introduced in the project, such as iconfoont. CSS, can be placed in static, because these imported third-party files have been processed, we no longer need to process, directly upload.
A. Stop: is equivalent to JavaScript event.stopPropagation(), which prevents events from bubbling. vue .prevent: Equivalent to event.preventDefault() in JavaScript, to prevent the preset behavior from being performed (if the event is cancelable, cancel the event without stopping further propagation of the event); .capture: In contrast to the direction of event bubbling, events are captured from the outside in; .self: triggers only events within its own scope, no child elements; .once: Triggers only once.
24. Two core points of VUE: data-driven, component system data-driven: ViewModel to ensure the consistency of data and view. Component systems: The application UI can be thought of as being entirely composed of component trees.
A: jQuery uses the selector () to select a DOM object and perform operations such as assignment, value, event binding, etc. The only difference between jQuery and native HTML is that it is more convenient to select and manipulate DOM objects, and the data and interface are together. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, you need to obtain the content of the label label 🙂 select the DOM object, perform the assignment, value, event binding and other operations on it. In fact, the difference between the original HTML and the DOM object is that it is more convenient to select and operate the DOM object, and the data and interface are together. For example, to obtain the contents of the label :(“lable”).val(); Again, it depends on the DOM element value. Vue completely separates the data from the View through Vue objects. Manipulation of data no longer refers to the corresponding DOM object, so data and View are separated, and they are bound to each other through the VM Vue object. This is known as MVVM.
- Steps for importing components
答: 在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 页面（目录相同） } 生命周期函数面试题 1.什么是 vue 生命周期？有什么作用？ 答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。 2.第一次页面加载会触发哪几个钩子？ 答：beforeCreate， created， beforeMount， mounted 3.简述每个周期具体适合哪些场景 答：beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法 create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作 beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的 mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行 beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步 updated：页面显示的数据和data中的数据已经保持同步了，都是最新的 beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁 destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。 4.created和mounted的区别 答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 5.vue获取数据在哪个周期函数 答：一般 created/beforeMount/mounted 皆可. 比如如果你要操作 DOM , 那肯定 mounted 时候才能操作. 6.请详细说下你对vue生命周期的理解？ 答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreated阶段，vue实例的挂载元素
el还没有。 载入前/后：在beforeMount阶段，vue实例的
route 和
router是VueRouter的实例，在script标签中想要导航到不同的URL,使用
router.to(-1) $route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。 7.vue-router的两种模式 答:hash模式：即地址栏 URL 中的 # 符号； history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。 8.vue-router实现路由懒加载（ 动态加载路由 ） 答:三种方式 第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。 第二种：路由懒加载(使用import)。 第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。 vuex常见面试题 1.vuex是什么？怎么使用？哪种功能场景使用它？ 答：vue框架中状态管理。在main.js引入store，注入。 新建了一个目录store.js，….. export 。 场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车 2.vuex有哪几种属性？ 答：有五种，分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex 3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？ 答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。 如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。