「2022」打算跳槽涨薪

在这种情况下，请将 users 替换为一个计算属性，让其返回过滤后的列表。

v-for=“user in activeUsers”

:key=“user.id”

{{ user.name }}

computed: {

activeUsers: function () {

return this.users.filter(function (user) {

return user.isActive

})

}

}

5、谈谈对 vue 组件化的理解。

---

5.1、组件化的定义

组件是独立和可复用的代码组织单元，组价系统是 vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用。

也可以通俗介绍，把一些用户在程序中一些独立的功能和模块单独提取出来，然后切分为更小的块，这些块有独立的逻辑，有更好的复用性。

组件按照分类有：页面组件(导航)、业务组件(登录)、通用组件(输入框)。

5.2、组件化特点

vue 的组件是基于配置的，通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于 VueComponent 这个类扩展于 vue 。

常见的组件化技术有：prop 属性、自定义事件、插槽等，这些主要用于组件之间的通信等。

组件之间遵循单向数据流原则。

5.3、组件化的优点

组件化的开发能大幅提高开发效率、测试性和复用性等。

合理的划分组件能够大幅提升应用性能，组件应该是高内聚，低耦合的。

6、为什么 data 在组件内必须是函数，而 vue 的根实例则没有此限制？

---

vue 组件可能存在多个实例，如果使用对象形式定义 data ，则会导致它们公用一个 data 对象，那么状态变更将会影响所有组件实例，这是不合理的。

如果采用函数的形式，在实例化组件时，data 会被当做工厂函数返回一个全新的 data 对象，有效规避多实例之间状态污染问题。

所以在组件中的 data 必须是函数，不能使用对象形式。那为什么 vue 根实例没有限制呢？

在 vue 中根实例只能有一个，所以不需要担心多实例的问题，所以根实例中的 data 可以是函数也可以是对象。

7、你了解哪些 vue 性能优化的方法？

---

我所了解的 vue 性能优化方法分别有：

1>、路由懒加载

Vue.use(VueRouter)

// 传统写法

import Home from ‘@/views/login/index.vue’

//路由懒加载

const Login = ()=> import(‘@/views/login/index.vue’)

const router = new VueRouter({

routes: [

{ path: ‘/login’, component: Login },

{ path: ‘/home’, component: Home },

]

export default router

使用路由懒加载，项目打包的时候体积会大幅减小，访问项目时，这些组件也会按需进行加载，大大提升了项目性能。

2>、keep-alive 缓存页面

使用 keep-alive 之后会缓存页面，第一次加载之后，关闭再次打开，页面不会重新渲染。keep-alive 的属性：

• include：字符串或正则表达式。如果只缓存个别页面，可以使用 include 属性，只缓存匹配组件。

• exclude：字符串或正则表达式。如果个别页面不需要缓存时，可以使用 exclude 属性，任何匹配的组件都不会缓存。

3>、v-for遍历避免同时使用 v-if

v-for=“user in activeUsers”

:key=“user.id”

{{ user.name }}

computed: {

activeUsers: function () {

return this.users.filter(function (user) {

return user.isActive

})

}

}

4>、长列表性能优化

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

export default{

data(){

return {

users:[]

}

},

created(){

const user = await axios(“/api/user”)

this.users = Object.freeze(user)

}

}

Object.freeze 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 () 方法可以冻结一个对象，对象被冻结之后不能被修改，可以让性能大幅度提升。

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容。可采用三方 vue-virtual-scroll。

5>、事件的销毁

vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。

created(){

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

},

beforeDestory(){

clearInterval( this.timer )

}

6>、图片懒加载

对于图片过多的页面，为了加快页面的加载速度，所以很多时候，需要把未出现在可视区域的图片暂不进行加载，滚动到可视区域之后再开始加载。

可以使用三方的 vue-lazyload 库。

7>、第三方插件按需引用

使用三方库时，可以按需引入避免体积太大。比如 element-ui ：

import { Button } from “element-ui”

8>、无状态的组件标记为函数式组件

组件内容

通过 functional 将组件标记为函数式组件，因为函数式组件没有实例，所以运行时耗费资源较少。

另外还有 v-show 复用 DOM、子组件分割、SSR 等。

8、computed 与 methods 、watch 的区别？

---

computed VS methods

computed:{

yyds(){

log(“computed show”)

return “计算属性”

}

},

methods:{

show(){

log(“method show”)

return “计算属性”

}

}

computed 是计算属性，methods 内都是方法，所以调用不同分别为：