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)
  })

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