Vue 世界中的实例

Vue2 中的实例

每个 Vue 应用 都是 new Vue 函数创建的一个新的实例，创建的时候将 data 作为 property 添加到响应式系统中

const vm = new Vue({
    // options
})

Vue3 中的三种实例

应用实例(Application Instance)

• 使用 createApp 创建一个 应用实例(Application Instance)
• 应用实例用来注册应用中的全局内容
• 大多数方法支持链式调用，返回应用实例本身

import { createApp } from 'vue';
import App from './App.vue';
// 返回应用实例
const app = createApp(App);
app.use(Antd).use(router).use(vuex);
app.mount('#app');

组件实例(Component Instance)

• createApp 传递的组件，称之为根组件(root component)
• mount 方法用来将应用实例挂载到 Dom 节点上，返回的是组件实例(Component Instance)
• 通过 refs 获取的都是组件实例

import { createApp } from 'vue';
// 根组件
import App from './App.vue';
const app = createApp(App);
// 返回组件实例
const vm = app.mount('#app');

组件内部实例(Internal Component Instance)

这是一个神奇的混合实例

• proxy 属性，可以拿到组件实例上面的内容
• appContext ，可以拿到应用实例上的部分属性

import { getCurrentInstance } from 'vue';
const internal = getCurrentInstance()

本地图片预览的两种方式

URL.createObjectURL(File)

• 创建一个 DOMString，返回一个 URL，URL 和 document 绑定，表示指定的 file 对象
• 如果类型不支持转换会报错

try {
  url = URL.createObjectURL(File)
} catch (error) {
  console.log('File transform error', error)
}

url 是一个以 blol 开头的地址，指向内存中存放图片的地址，使用 uft-16 字符串进行保存。

FileReader.readAsDataURL(File)

• FileReader 上面的实例方法，读取指定的 File 对象，读取完成的时候触发回调，返回 base64 格式的字符串。
• 如果类型不支持转换会报错

// 创建一个 FileReader 实例
const fileReader = new FileReader()
fileReader.readAsDataURL(File)
// 需要绑定事件
fileReader.addEventListener('load', () => {
  // 结果保存在 fileReader.result 中
  url = fileReader.result
})
// 错误处理事件
fileReader.addEventListener('error', () => {
  console.log('upload transform error', error)
})

url 是一个以 data 开头的 base64 格式的字符串。

两种方法比较

• 返回值

  • URL.createObjectURL(File) 得到的是内存中存放图片的地址，使用 uft-16 字符串进行保存。
  • FileReader.readAsDataURL(File) 得到的是 base64 格式的字符串。

• 执行机制

  • URL.createObjectURL(File) 直接返回，同步执行
  • FileReader.readAsDataURL(File) 通过回调的方式返回，异步执行

• 内存清理

  • URL.createObjectURL(File) 存在于当前 document 中，清除方式只有 unload() 事件 URL.revokeObjectURL() 方法手动清除
  • FileReader.readAsDataURL(File) 依照 JS 垃圾回收机制自动从内存中进行清理

• 总结

  • URL.createObjectURL(File) 得到本地内存容器的 URL 地址，同步使用，比较方便快捷，多次使用需要注意手动释放内存的问题，性能优秀。
  • FileReader.readAsDataURL(File) 胜在直接将文件转为 base64 格式，可以直接用于业务，无需二次转化格式。

Element 类型家族之间的关系

• img dom 节点有个神奇的类型称之为 HTMLImageElement ，它是标准 webAPI 的一部分，还有很多类似的 HTML 标签类型

  • HTMLInputElement
  • HTMLDivElement

• HTMLImageElement 继承自 HTMLElement

• HTMLElement 继承自 Element

  • HTMLElement
  • SVGELement

• Element 继承自 Node

  • 一个基本的抽象类，没有一个真正的 Node 对象
  • 所有对象实现的都是基于它的子类
    • Document
    • Element
    • DocumentFragment

• Node 继承自 EventTarget

  • 是一个最基本的Dom接口
  • 可以接收事件，创建监听器等
    • Element，Document，Window
    • XHLHttpRequest

获取图片原始尺寸

export const getImageDimensions = (url: string | File) => {
  return new Promise<{ width: number; height: number }>((resolve, reject) => {
    const img = new Image();
    img.src = typeof url === 'string' ? url : URL.createObjectURL(url);
    img.addEventListener('load', () => {
      const { naturalWidth: width, naturalHeight: height } = img;
      resolve({ width, height });
    });
    img.addEventListener('eror', () => {
      reject(new Error('there was some problem with the image'));
    });
  });
};