2021最新Vue面试题含源码解析

v-for = “user in activeUsers”

:key = “user.id”

{ { user.name }}

• 事件销毁

created(){

this.timer = setInterval(this.refresh,2000)

},

beforeDestroy(){

clearInterval(this.timer)

}

• 图片懒加载(vue-lazyload)

• 第三方插件按需引入

import Vue from ‘vue’

import { Button,Select } from ‘element-ui’

Vue.use(Button)

Vue.use(Select)

• 无状态的组件标记为函数式组件

• 子组件分割

• 长性能列表的优化

• 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应式

export default {

data: () => ({

users:[]

})

async created(){

const users = await axios.get(‘/api/users’)

this.users = object.freeze(users)

}

}

• 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域内容

[](()描述Vue组件生命周期（父子组件）

---

• 见上文梳理

[](()Vue组件如何通讯（常见）

---