码迷,mamicode.com
首页 > 其他好文 > 详细

初中级VUE面试题

时间:2020-07-09 15:00:12      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:cli   功能   读取   ons   mamicode   提交   用户体验   影响   通讯   

1.keep-alive的作用是什么?

<keep-alive>是Vue的内置组件,能够缓存组件,防止重复渲染页面,提高用户体验,同时可以很大程度上减少接口请求,减小服务器压力。

比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=> 返回列表=>打开详情这样的话 列表 和 详情 都是一个频率很高的页面,那么 就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次 返回列表的时候,都能从缓存中快速渲染,而不是重新渲染。

1.用法
1 // 被keepalive包含的组件会被缓存
2 <keep-alive>
3     <router-view />
4 </keep-alive>

2.属性

     include 包含的组件会被缓存

     exclude 排除不缓存的组件

2.为什么data是一个函数?

因为组件是需要复用,所有的组件实例都会复用data,如果data是一个对象,会影响到其他的组件,所以data要写成函数(组件之间不会互相影响)

3.Vue组件通讯有哪些?

prop emit

1.父向子 父组件把数据通过V-bind传递给子组件

 1 <template>
 2     <div>
 3         //数据通过V-bind传递给子组件
 4         <childrenCom :father-list="fatherList"></childrenCom>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 import childrenCom from ‘./child‘
10 export default {
11     props: {
12 
13     },
14     data() {
15         return {
16             fatherList:[‘orange‘,‘apple‘,‘banana‘]
17         };
18     },
19    
20     components: {
21         childrenCom
22     },
23 };
24 </script>
25 
26 <style scoped >
27 
28 </style>

子组件通过prop 来接收父组件传递过来的值

 1 <template>
 2     <div>
 3          <ul>
 4            <li v-for="(item,index) in fatherLit"
 5             :key="index">
 6             {{item}}
 7             </li>
 8        </ul>
 9     </div>
10 </template>
11 
12 <script>
13 export default {
14     props: {
15         fatherList:{
16             type:Array, //类型
17             defult:[] //默认值
18         }
19     },
20 }

2.子向父 子组件通过emit 把数据传递给父组件

 1 <template>
 2     <div>
 3        <ul>
 4            <li v-for="(item,index) in fatherList"
 5             :key="index"
 6             @click="tofather(item)"
 7             >
 8             {{item}}
 9             </li>
10        </ul>
11     </div>
12 </template>
13 
14 <script>
15 export default {
16     props: {
17         fatherList:{
18             type:Array,
19             defult:[]
20         }
21     },
22  
23     methods: {
24      tofather(item){
25          // 传值给父组件
26          this.$emit(‘sendFruits‘,item)
27      }
28     },
29     components: {
30 
31     },
32 };
33 </script>

父组件通过一个自定义方法来接收子组件传递过来的值

 1 <template>
 2     <div>
 3         <childrenCom :father-list="fatherList" @sendFruits="sonFruits"></childrenCom>
 4     </div>
 5 </template>
 6 
 7 <script>
 8 import childrenCom from ‘./child‘
 9 export default {
10     props: {
11 
12     },
13     data() {
14         return {
15             fatherList:[‘orange‘,‘apple‘,‘banana‘]
16         };
17     },
18     methods: {
19         sonFruits(item){
20             console.log(item);
21         }
22     },
23    
24     components: {
25         childrenCom
26     },
27 };
28 </script>
29 
30 <style scoped >
31 
32 </style>

3.在父组件使用children访问子组件,在子组件中使用parent访问父组件

4.在父组件使用 ref 可以直接拿到子组件里面的方法

 

兄弟组件通信

1.在main.js 全局绑定EvenBus

1 import Vue from ‘vue‘;
2 Vue.prototype.$bus = new Vue

2.使用

 1 <div @click="addCart">添加</div>
 2 export default{
 3     methods: {
 4         addCart(event){
 5             this.$bus.$emit(‘getTarget‘, event.target)
 6         }
 7     }
 8 }
 9 // 另一组件
10 export default{
11     created(){
12         this.$bus.$on(‘getTarget‘, target =>{
13             console.log(target)
14         })
15     }
16 }

 

通过 Vuex

Vuex 适用于 父子、隔代、兄弟组件通信 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

4.请说下你对vue生命周期的理解

如下图

技术图片

 

5.什么是nextTick?

nextTick是在下一次DOM更新接触之后再执行的回调。

当修改数据后,DOM并没有更新,使用nextTick可以获取更新后的DOM

简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。

 

 

6.为什么在v-for中使用key?

v-for中加key可以减少渲染次数,提升渲染性能。

 

7.Vuex页面刷新数据丢失怎么解决?

例如做电商项目购物车功能的时候,数据存放在vuex里,如果刷新页面,store的state存放的数据就会全部清空。购物车里面的商品就全都重置,这个时候就要做数据持久化。

使用 vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中



8.怎么动态添加对象的类型的值?

Vue 是不能检测对象属性的添加或删除

 1  data() {
 2         return {
 3             obj:{
 4                 name:‘Vue‘
 5             }
 6         };
 7     },
 8     mounted() {
 9         this.name = ‘zs‘ // 不是响应式的
10         this.$set(this.obj,‘name‘,‘lisi‘) //响应式
11     },

 

9.你在之前的Vue项目做过那些优化?

  • v-if和v-show 区分场景使用
  • computed 和 watch 区分场景使用
  • v-for 遍历必须加key,key最好是id值,且避免同时使用v-if
  • 图片懒加载
  • 路由懒加载
  • 第三方插件按需引入

 

 

初中级VUE面试题

标签:cli   功能   读取   ons   mamicode   提交   用户体验   影响   通讯   

原文地址:https://www.cnblogs.com/qdjj/p/13273649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!