Vue3入门二

标签： 无 分类： 未分类 创建时间：2021-12-08 06:54:47 更新时间：2024-11-15 10:49:44

1.EnventBus

事件总线这种方式到底该不该用，或者该如何使用，我觉得在网络上有不同的意见，有人说可以用，有人说这种没法朔源的方法，对大型的程序，完全是一种破坏。

(1) 安装mitt

1
npm install mitt -S

(2) 新建事件总线

1
2
3
4
5
6
7
8
9
10
11
12
/* bus.js */

import mitt from "mitt";

const bus = {}
const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

(3) 监听

1
2
3
4
5
6
7
8
9
10
import eventBus from "./bus.js"

export default {
    setup(){
        eventBus.$on("eventname",function(){
            console.log("事件触发了");
        })
    }
}

(4) 触发

1
2
3
4
5
6
7
8
import eventBus from "./bus.js"

export default {
    setup(){
        eventBus.$emit("eventname")
    }
}

注意
这里我倒是没有遇见过，有人遇到过了，就是在使用路由的时候，路由切换，组件销毁的时候，这个消息总线还是在监听，可能是因为组件虽然销毁了，但是原型链还是存在，如果遇到了，可以注意下,类似与参考文章3。

参考文章:
1.Vue 3 中如何优雅的使用eventBus（事件总线） 不借助插件的原生使用方式，还有使用 vue3-eventbus 的方式
2.Vue3使用Mitt替代EventBus 这里是一个完整的例子，从头创建了一个 vue3.0 的项目，但是有些不合理，比如全局挂载的方式，如果不使用this，全局挂载就应该挂载到getInstance上
3.(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？ 这里是关于 setInterval 函数在组件销毁之后还在执行的问题。
4.vue-router切换，组件不销毁

2.组件库

参考文章:
1.2021年最佳VUE3 UI框架推荐 Element UI、Vant、Vuetify
2.在 vue-cli 3 中使用

3.scss

默认创建的项目，不包含scss加载器的，需要手动增加。

1
2
3
4
5
6
7
## 增加预处理器,
## @vue/cli 4.5.15 目前还不支持 sass-loadder 11和12
## 这里要增加sass-loader的版本号 10,否则回报this.getOptions 不是函数的错误
pnpm add sass-loader@10.1.1 sass -D

## Vite创建的项目
pnpm add sass -D

安装之后，还是报错，提示需要webpack，这个可以忽略，直接运行:pnpm serve，就可以了。

参考文章:
1.vue3.0项目增加less/sass
2.CSS 相关
3.使用预处理器 在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。
4.TypeError: this.getOptions is not a function I had the same problem resolved by downgrading sass-loader to 10.1.1. I am using @vue/cli 4.5.8 that includes webpack@4.46.0.
5.sass-loader
6.Webpack 5 走起! - Loaders(9) - Sass/SCSS
7.vite 配置 scss

4.setup单文件

参考文章：
1.在实验 vue3.2中 的
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.EnventBus
  2. 2. 2.组件库
  3. 3. 3.scss
  4. 4. 4.setup单文件
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 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 ——— 美文