Vue3入门之三

标签： 无 分类： 未分类 创建时间：2023-05-06 10:21:12 更新时间：2025-01-17 10:39:23

1.获取实例 instance

在 vue2 中，我可以通过 this和this.$el获取到当前实例的dom元素，但是在Vue3的 组合式API中如何获取到Dom元素呢？可以通过 ref 定义的方式，这个问题我先不总结，就说使用 实例的形式进行获取。 如下的代码所示，我希望在点击按钮的时候，会弹出实例信息，但是经过测试，这个 instance 是一个 null。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div class="toolbar-wrap">
        <div class="toolbar-item model" @click="modelChange"></div>
    </div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from "vue"
/**
 * 工具栏
 */
const modelChange = () => {
    const instance = getCurrentInstance()
    console.log(instance)
}
</script>

【解决方案】
通过在 onMounted 中保存实例的引用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div class="toolbar-wrap">
        <div class="toolbar-item model" @click="modelChange"></div>
    </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted } from "vue"
/**
 * 工具栏
 */
let instance:any = null

const modelChange = () => {
    console.log(instance)
}

onMounted(() => {
	instance = getCurrentInstance()
})
</script>
参考文章:
【1】.hook 中getcurrentinstance() 返回值为Null 拿不到全局上下文对象的问题
【2】.vue3在setup中获取DOM元素 这是在 onMounted 函数中获取实例。
【3】.从 Composition API 源码分析 getCurrentInstance() 为何返回 null 这里在源码的角度表达了为什么获取到的实例为 null
【4】.关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充 大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能，否则在项目打包后，一定会报错的。

2.在setup中使用异步组件

在setup中使用异步组件，需要定义一个变量的形式进行。

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>
参考文章:
【1】.Async Components
【2】.Vue3 中使用 defineAsyncComponent 延迟加载组件

3.开启本地https调试

(1) 安装

1
pnpm vite-plugin-mkcert -D

(2) 使用

1
2
3
4
5
6
7
8
9
10
// vite.config.js
import {defineConfig} from'vite'
import mkcert from'vite-plugin-mkcert'
 
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true
  },
  plugins: [mkcert()]

(3) https 页面不允许嵌入 http，但是可以嵌入 http://localhost

参考文章:
【1】.vue3+vite如何在本地进行https调试 方式1:@vitejs/plugin-basic-ssl；方式二：vite-plugin-mkcert
【2】.https的页面内嵌入http页面报错的问题 浏览器将你需要访问的 HTTPS 和 HTTP 页面设置为安全。比如在Chrome浏览器中：设置 - 隐私设置和安全性 - 网站设置 - 不安全问题 - 允许，在允许里面将你的 HTTPS 页面域名和 HTTP 页面的域名都添加进去，请注意，必须两个都添加进去，否则没效果。
【3】.HTTPS站点使用WebSocket的错误及解决方案
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.获取实例 instance
  2. 2. 2.在setup中使用异步组件
  3. 3. 3.开启本地https调试
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文