user-select是一个CSS属性,用于控制用户是否可以选中元素的文本内容。该属性有以下可选值:

  • none:禁止用户选择元素中的文本内容;
  • auto:允许用户选择元素中的文本内容;
  • text:类似auto,但只有文本内容可选中,其他元素不可选中;
  • contain:类似auto,但元素中的所有内容都可选中。

例如,以下代码将禁止用户选择所有div元素中的文本内容:

div {
  user-select: none;
}

该属性适用于多种情况,例如可以用于禁止用户选择页面上的某些元素、提高表单的易用性等等。

will-change是CSS属性,用于提前告诉浏览器哪些元素的属性可能会被修改,从而优化性能。

当使用CSS进行动画或过渡效果时,浏览器通常需要重新计算页面布局和绘制。这可能会导致卡顿和性能问题。使用will-change属性,可以让浏览器提前知道哪些元素可能会发生变化,从而进行预先优化,减少动画效果的卡顿和性能问题。

will-change属性可以设置的值包括:

  • auto:默认值,不进行任何优化
  • scroll-position:表示元素的滚动位置可能会发生变化
  • contents:表示元素的内容可能会发生变化
  • transform:表示元素的变换属性(如transformtranslatescale等)可能会发生变化
  • opacity:表示元素的不透明度可能会发生变化
  • leftrighttopbottom:表示元素的定位属性(如positionleftrighttopbottom)可能会发生变化

需要注意的是,过度使用will-change属性可能会导致性能问题,因为它会强制浏览器创建一个新的图层,从而增加了内存和计算的负担。因此,只有在需要优化性能的情况下才应该使用will-change属性。

aspect-ratio是CSS的一个新属性,用于设置一个元素的宽高比。它可以用于代替使用padding或伪元素实现的宽高比技术,使代码更简洁、可读性更高,并且可以让我们更轻松地控制元素的宽高比。

aspect-ratio属性有两个值:一个数字,表示宽高比,和一个可选的关键字auto,表示元素的高度应该自动计算以匹配元素的宽度和宽高比。例如,aspect-ratio: 16/9表示元素的宽高比为16:9。

使用aspect-ratio时,可以像这样将其应用于任何具有宽度的元素:

.container {
  aspect-ratio: 16/9;
}

这将使容器元素保持一个16:9的宽高比。如果容器元素的宽度为100px,那么它的高度将自动计算为100px * (9 / 16) = 56.25px,从而保持16:9的宽高比。

需要注意的是,aspect-ratio是一个比较新的属性,目前还不是所有浏览器都支持,因此在使用时需要进行兼容性考虑。

在 Vue 中连接 WebSocket 可以使用 WebSocket 对象,也可以使用第三方库如 socket.io-client、vue-native-websocket 等。

使用原生 WebSocket 对象连接 WebSocket 时,可以在 Vue 组件中通过 created() 或 mounted() 钩子函数创建 WebSocket 对象并进行连接:

created() {
  const wsUrl = 'ws://localhost:3000';
  this.ws = new WebSocket(wsUrl);
  this.ws.onopen = this.handleOpen;
  this.ws.onmessage = this.handleMessage;
  this.ws.onclose = this.handleClose;
  this.ws.onerror = this.handleError;
},
methods: {
  handleOpen() {
    console.log('WebSocket connected');
  },
  handleMessage(event) {
    console.log(`WebSocket received message: ${event.data}`);
  },
  handleClose() {
    console.log('WebSocket closed');
  },
  handleError(error) {
    console.error('WebSocket error', error);
  },
},
beforeDestroy() {
  this.ws.close();
},

在上面的代码中,我们在 created() 钩子函数中创建了一个 WebSocket 对象,并注册了 onopen、onmessage、onclose、onerror 四个事件的回调函数。在组件销毁时我们需要手动关闭 WebSocket 连接,以避免内存泄漏。

当然,为了避免代码重复和管理 WebSocket 连接状态,也可以把连接 WebSocket 的逻辑封装成一个 Vue 插件或 Mixin,供多个组件复用。

在封装axios时,可以通过添加请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。在请求拦截器中,可以对请求做一些处理,如设置请求头、添加token等;在响应拦截器中,可以对响应做一些处理,如统一处理错误信息、返回的数据格式等。

以下是一个示例代码,假设有两个不同域名的接口,其中一个返回的数据格式是{status: 0, data: {}},另一个返回的数据格式是{code: 0, result: {}}:

import axios from 'axios'

const instance1 = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

const instance2 = axios.create({
  baseURL: 'http://api.anotherexample.com',
  timeout: 5000
})

// 添加请求拦截器
instance1.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance1.interceptors.response.use(
  response => {
    const { status, data } = response.data
    // 统一处理返回的数据格式
    if (status === 0) {
      return data
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加请求拦截器
instance2.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance2.interceptors.response.use(
  response => {
    const { code, result } = response.data
    // 统一处理返回的数据格式
    if (code === 0) {
      return result
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export { instance1, instance2 }

在组件中使用时,可以根据不同的接口调用对应的实例:

import { instance1, instance2 } from './axios'

instance1.get('/api1/someEndpoint')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

instance2.post('/api2/someEndpoint', { someData: 'data' })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

这样就可以通过请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。