数据结构与算法：链表、树、图、堆、散列表

1.vue的原理?

image.png

关键词: 虚拟DOM树+访问器属性

• 解释一下:响应式原理?

• vue为什么不支持IE8及更低版本?

2. vue有哪些缺点

1. Vue 不能检测数组和对象的变化

3.为什么vue不能检测对象的变化

• 追问:那如何解决上述问题?

4.讲一下 $set 的实现原理

核心代码如下

export function set(target: Array | Object, key: any, val: any): any {
  // target 为数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
   // 修改数组的长度, 避免索引>数组长度导致splice()执行有误
    target.length = Math.max(target.length, key);
    // 利用数组的splice变异方法触发响应式
    target.splice(key, 1, val);
    return val;
  }

  // target为对象, key在target或者target.prototype上 且必须不能在 Object.prototype 上,直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }

  // 以上都不成立, 即开始给target创建一个全新的属性
  // 获取Observer实例
  const ob = (target: any).__ob__;
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val;
    return val;
  }

  // 进行响应式处理
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}

复制

5.new Vue()实例中,data 可以直接是一个对象,为什么在 vue 组件中,data 必须是一个函数呢?

关键词:复用+污染 + 函数返回 + 数据拷贝

6.computed 和 watch 有什么区别?

image.png

追问:computed 和 watch 应用场景? 关键词 computed+缓存

追问 :能使用箭头函数定义computed和watch吗?

7.MVC和MVVM的原理

• MVC

image.png

实现流程

• MVVM

image.png

8.vue数据绑定是双向还是单向的

9.v-model双向绑定的原理?

原理如下:

9.全局导航钩子函数应用场景?

应用场景：

1. 可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！ 2.进入页面登录判断、管理员权限判断、浏览器判断

10 .v-if和v-for在同一个标签中的执行顺序?

如果需要使用判断,建议使用计算属性

<ul>  <li    v-for="user in activeUsers"    :key="user.id">    {{ user.name }}  </li></ul>

computed: {  activeUsers: function () {    return this.users.filter(function (user) {    return user.isActive    })  }}

复制

10.路由独享的守卫(路由内钩子)

路由独享的守卫(路由内钩子)你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({ routes: [   
 {    
    path: '/foo',     
    component: Foo,    
    beforeEnter: (to, from, next) => {         
    // 处理
    ...
    next()     
    }
    }  ]

复制

11.vue-loader是什么？它有什么作用？

 解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代 码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

复制

12.vue中怎么重置data？

this .$options.data可以获取到组件初始化状态下的datathis.$data获取当前状态下的data// 将数据拷贝到this.$data中即可Object.assign(this.$data, this.$options.data())

复制

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

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

1. 给模板上绑定key值,通过修改key值,实现组件刷新<SomeComponent :key="theKey"/>//选项里绑定datadata(){ return{ theKey:0 }}//刷新key达到刷新组件的目的theKey++;

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

parent.event来调用父组件的方法 2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

3：父组件把方法传入子组件中，在子组件里直接调用这个方法父组件如何调用子组件的方法?给子组件设置属性ref <子组件 ref="name" />可以在子组件中加上ref，然后通过this.$refs.ref.method调用

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

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

18.<template></template>有什么用？

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

1. 通过props属性传值
2. 通过

on传值

1. (

children ) / $refs

1. provide/inject

listeners

20.route和router有什么区别？

21.怎样动态加载路由?

 let router=new VueRouter({
       routes:[           
             {path:'/product',component:a,name:'product'} 
        ]
        });  
      router.addRoutes([     
         {path:'/user',component:c,name:'user'},       
         {path:'/address',component:address,name:'address'}  
       ]);

复制

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

23.为什么vue使用异步更新组件?

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

1.通过keep-alive组件缓存需要缓存的组件

 <keep-alive includes="组件1name,组件2name">
      <router-view>
  </keep-alive>

复制

2.当组件激活后,会触发钩子函数actived,在这个钩子函数中,做数据更新.

25.vue怎么获取DOM节点？

26.vuex中actions和mutations有什么区别？

27. 怎么监听vuex数据的变化？

watch:{ 
     '$store.state.test':function(value){    
          console.log('数据修改了',value) 
      }}

复制

28.开启vuex中的严格模式有什么好处?

A.在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 B. 不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

如何使用?

const store = new Vuex.Store({  
  // 让构建工具自动帮我们处理
  strict: process.env.NODE_ENV !== 'production'
  })

复制

30.你了解双向绑定的计算属性的应用场景吗?

<input type="text" v-model="username">

复制

如果我们想要监听用户输入变化,我们首先会想到下面的方法

<input type="text" v-model="username" @input="onChange">

复制

其实我们可以使用双向绑定的计算属性来实现

 data() {    
   return {      _username:''    }; 
 },  computed:{   
  username:{     
  get(){        
      return this._username     
    },     
  set(value){         // 监听数据变化      
      console.log('监听数据变化',value)   
      this._username = value   }
    }
  }

复制

当我们使用了Vuex时,并且开启了严格模式,那么我们就不能直接绑定状态值了, 在用户输入时，v-model 会试图直接修改状态name的值,这样会抛出异常<input v-model="$store.state.name">这个时候我们需要使用双向绑定的计算属性来解决这个问题

<input v-model="name">
computed: {  
  name: {    
   get () {     
       return this.$store.state.name   
   }, 
   set (value) {      
     this.$store.commit('updateName', value)  
    } 
 }}

复制

30.vue中的指令v-on如何绑定多个属性?

  <input  type="text"  v-on="{input:onInput,focus:onFocus}"/>

复制

31.vue中使用delete删除对象的属性,页面会更新吗?

32.watch怎么深度监听对象变化?

 data() {    
      return {     
         data:{},    
         user:{      
            info:{  name:123        }   
          }
       };
      }

复制

比如我们要对user.info 属性进行监听,如果info属性有任何更改触发通知

watch:{     'user.info':{    
   handler(value){     
     console.log("数据变化",value)  
     }
   }
  }

复制

此时我们调用

this.user.info.name = "8888888"handle方法不会被触发.这个user.info是一个对象 Vue只响应对象的地址变化进行响应. 如果我们需要让Vue对整个info里面的属性变化,进行监听, 就需要开启深度监听属性deep:true

watch:{   
  'user.info':{       
   handler(value){       
   console.log("数据变化",value) 
  },     
   deep:true
  }
 }

复制

33 .vue组件会在什么时候下被销毁?

33.怎么使css样式只在当前组件中生效

原理vue中的scoped属性的效果主要通过PostCSS转译实现, PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom.

<div  adfs-888-123213 ></div>