vue2.0题目

1 .v-show和v-if的区别

• v-show 通过css display 控制显示和隐藏
• v-if 组件真正的渲染和销毁,而不是显示和隐藏
• 频繁的切换使用v-show

为何在v-for中用key

• 必须使用key,切不能是index和random
• diff算法中通过tag和key来判断,是否是saneNode
• 减少渲染次数,提升渲染性能

vue的生命周期

单组件生命周期

父子组件生命周期

1. 加载渲染过程
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2. 子组件更新过程
   父beforeUpdate->子beforeUpdate->子updated->父updated
3. 父组件更新过程
   父beforeUpdate->父updated
4. 销毁过程
   父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
   转载 https://www.cnblogs.com/status404/p/8733629.html

组件如何通讯

• 父子组件props和this.$emit
• 自定义事件 event.$no event.$off event.$emit
• vuex 所有组件传递信息

组件渲染和更新的过程

组件渲染和更新的过程.png

双向数据绑定 v-model 实现原理

• input 元素的 value= this.name
• 绑定 input 事件 this.name=$event.target.value
• data 更新触发 re-render

computed 特点

• 缓存,data不变,不会重新计算
• 提高性能

为何组件的data必须是一个函数

vue编译后实际上一个class类,用的时候相当于实例化,实例化data在闭包里

ajax请求应该放在哪个周期里?

• mounted里,渲染完成后出发请求
• js是单线程,ajax异步获取数据
• 放在mounted之前没有用,只会让逻辑更加混乱

如何将组件所有props传递给子组件(优先级不高)

• $props
• <User v-bind="$props" />

如何自己实现v-model

<template>
  <input type="text" :value="$emit('change',$emit.target.value)">
  <!-- change 和 model.event 对应起来即可 -->
</template>
<script>
export default {
  model:{
    props:"text",//对应到props 的text
    event:'change'
  },
  props:{
    text:String
  }
}
</script>

多个组件相同逻辑,如何处理

• mixin
  *mixin的一些确定

何时使用异步组件

• 加载大组件
• 路由异步加载

何时使用keep-alive

• 缓存组件,不需要重读渲染
• 多个静态tab页的切换
• 优化性能

何时使用beforeDestory

• 解除自定义事件 event.$off
• 清除定时器
• 解绑自定义的DOM事件,如window.scroll

什么是作用域插槽

<template>
  <a :href='url'> 
    <slot :website="website">
      {{website.subTitle}}
    </slot>
  </a>
</template>
<script>
export default {
  props:['url'],
  data(){
    return {
      website:{
        url:'www.baidu.com',
        title:"百度",
        subTitle:"贴吧"
      }
    }
  }
}
</script>

<template>
  <ScopedSlotDemo :url='website.url'>
    <template v-slot='slotProps'>
      <!-- slotProps 名字可自定义 -->
      {{slotProps.website.title}}
    </template>
  </ScopedSlotDemo>
</template>

vuex 中 action和 mutation 有何区别?

• action可以处理异步,mutation 不可以
• mutation 做原子操作
• action可以整合多个 mutation

vue-router 常用路由模式

• hash 默认
• h5 history 需服务端支持
• 比较

如何配置vue-router 异步加载

export default new Router({
  routers:[
    {
      path:'/',
      component:()=>import('./../components/Navigator')
    },
    {
      path:'/feedback',
      component:()=>import('./../components/feedback')
    },
  ]
})

请用vnode描述一个DOM解构

  <div id='div1' class='container'>
    <p>vdom</p>
    <ul style='font-size:20px'>
      <li>a</li>
    </ul>
  </div>

{
  tag:'div',
  props:{
    className:'container',
    id:'div1'
  },
  children:[
    {
      tag:'p',
      children:'vdom'
    },
    {
      tag:'ul',
      props:{style:'font-size:20px'},
      children:[{
        tag:'li',
        children:'a'
      }]
    }
  ]
}

监听data的核心api Object.defineProperty

• 深度监听,监听数组
• 优缺点

vue如何监听数组变化

• Object.defineProperty 不能监听数组变化
• 重新定义原型,重写push pop 等方法,实现监听
• proxy 可以原生支持监听数组变化

请描述响应式原理

• 监听data变化
• 组件渲染和更新过程

地方法算法的时间复杂度

• O(n)
• 在O(n^3)(n的三次方)上做了调整
  只比较同一层级,如何tag相同,则直接销毁重建,
  通过tag和key判断是不是同一个组件,如果是同一个组件,则不重复对比,使它的复杂度从n的三次方减到n

简述diff算法过程

• patch(elem,vnode) 和patch(vnode,newNode)
• patchVnode 和addVnodes 和removeVnodes
• updateChildren ,key的重要性(通过key判断是否同一个节点)

vue为何是异步渲染,$nextTick 何用?

• 异步渲染(以及合并data修改),以提高渲染性能
• $nextTick 在dom更新完以后,触发回调

vue常见性能优化方法

• 合理使用v-show ,v-if
• 合理使用computed
• v-for 加上key ,以及避免和v-if同时使用(v-for优先级高,每次v-for时,都要计算v-if)
• 自定义事件,DOM事件及时销毁
• 合理使用异步组件
• 合理使用keep-alive
• data 层级不要太深 (深度监听一次完成,计算次数多)
• 使用vue-loader在开发环境做预编译
• webpack 层面的优化
• 前端通用的性能优化.如图片懒加载
• 使用SSR(nuxt)