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