【架构师（第三十三篇）】 Vue 中的实例及本地图片预览

Vue 世界中的实例

Vue2 中的实例

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

代码语言：javascript复制

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

Vue3 中的三种实例

应用实例(Application Instance)

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

代码语言：javascript复制

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 获取的都是组件实例

代码语言：javascript复制

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

组件内部实例(Internal Component Instance)

这是一个神奇的混合实例

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

代码语言：javascript复制

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

本地图片预览的两种方式

URL.createObjectURL(File)

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

代码语言：javascript复制

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

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

FileReader.readAsDataURL(File)

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

代码语言：javascript复制

// 创建一个 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

获取图片原始尺寸

代码语言：javascript复制

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

php 编程算法 node.js vue.js 面向对象编程

0 人点赞