Skip to main content

Vue

源码​

数据响应

架构 Observer Watcher Dep definedProtype与Proxy差异 数组监听变化 computed、watch原理 v-model nextTick 组件通信 keep-alive virtual dom key的作用 diff算法 mixin

问题​

什么是MVVM
生命周期
          有哪些、作用
         子组件父组件生命周期顺序
哪个生命周期接口请求
单向数据流
SPA优缺点
spa,404
computed和watcher场景
组件通信方式
vue和react选型、区别
vue性能优化
vue-lazyloader
vue3优势
          类似于hooks原理
$listener、$attrs

其他​

vue渲染过程 ssr vuex vue-router 单元测试

require.context()​

require.context(directory,useSubdirectories,regExp)

  • directory：说明需要检索的目录
  • useSubdirectories：是否检索子目录
  • regExp: 匹配文件的正则表达式,一般是文件名

场景:如页面需要导入多个组件,原始写法:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components: {
  titleCom, bannerCom, cellCom
}

这样就写了大量重复的代码,利用 require.context 可以写成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components: modules

递归组件​

  • 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置 name 组件就可以了。
  • 不过需要注意的是，必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
  • 组件递归用来开发一些具体有未知层级关系的独立组件。比如：联级选择器和树形控件
<template>
  <div v-for="(item,index) in treeArr"> {{index}} <br/>
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

清除定时器或者事件监听​

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候，定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器事件监听，即在页面卸载（关闭）的生命周期函数里，清除定时器。

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {//清除定时器
		clearInterval(this.timer)
    this.timer = null
	}
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

参考​