Vue 中 computed 和 watch 区别？分别适用于什

### ① CSS 中，有哪些方式可以隐藏页面元素？有什么区别?

在 CSS 中，有以下几种方式可以隐藏页面元素：

1. display: none; ：完全隐藏元素，并且不占据任何空间，对文档流没有影响；

2. visibility: hidden; ：隐藏元素，但仍会占据空间，对文档流有影响；

3. opacity: 0; ：将元素透明度设置为 0，元素仍然存在并占据空间，但不可见；

4. height: 0; / width: 0; ：将元素的高度或宽度设置为 0，元素仍然存在，但不占据水平或垂直空间。

这些方法的区别如下：

1. display: none; 和 visibility: hidden; 的区别主要在于是否占据空间。display: none; 完全不占据空间，而 visibility: hidden; 仍占据空间；

2. opacity: 0; 和 height/width: 0; 的区别在于对元素占据空间的影响。opacity: 0; 仍占据空间，而 height/width: 0; 不占据空间。

根据实际需求，选择合适的方式来隐藏元素。如果需要完全隐藏元素并从文档流中移除，则使用 display: none;。如果需要保留元素所占据的空间并隐藏元素，则使用 visibility: hidden;。如果需要隐藏元素但仍希望元素占据空间，则使用 opacity: 0; 或将高度/宽度设置为 0。

###② 什么是 JS 对象的可枚举性（enumerable）？

在 JavaScript 中，每个对象都有一个属性描述对象（property descriptor），其中包含了一些元信息，包括属性是否可枚举。

一个可枚举的属性是指该属性可以被枚举到，例如使用 for...in 循环遍历对象时会枚举对象中所有可枚举的属性。默认情况下，对象字面量和一些内置对象原型上的方法（如 Object.prototype.toString()）定义的属性是可枚举的。

可以通过 Object.defineProperty() 或 Object.defineProperties() 方法来控制属性的可枚举性，将 enumerable 属性设置为 false 可以让属性不可枚举。

可枚举性是一个很重要的概念，它可以用于控制对象的属性是否可以被外部访问，或者在遍历对象属性时选择需要遍历的属性。在某些情况下，不希望某些属性被外部访问或者遍历，这时可以将其设置为不可枚举。

③ Vue 中 computed 和 watch 区别？分别适用于什么场景？

Vue 中的 computed 和 watch 都是用于响应式数据的处理，但它们的作用略有不同。

computed 是计算属性，它的值会被缓存，在依赖的数据发生变化时才会重新计算。computed 的使用场景通常是需要根据现有数据计算得到某个新的值，并且这个值不会频繁发生变化。例如，计算购物车中商品数量及总价等。

watch 是观察者，当监听的数据发生变化时，会执行相应的回调函数。watch 的使用场景通常是需要在数据变化时执行异步或开销较大的操作，或者需要执行一些副作用（side effect），例如请求后台数据、搜索关键词联想等。

两者的区别可以总结如下：

1. computed 是计算属性，watch 是观察者；

2. computed 会缓存计算结果，watch 不会；

3. computed 的值只有在相关依赖发生改变时才会重新计算，watch 监听的数据变化时都会执行回调函数；

4. computed 适用于计算得出某个新值，并且该值不会频繁发生变化的场景；watch 适用于需要在数据变化时执行异步或开销较大的操作，或者执行一些副作用的场景。

总之，computed 和 watch 在 Vue 中都是非常实用的工具，选择哪种方式取决于具体的业务需求。