项目中总结

我就活该是个小仙女

已于 2023-08-01 11:54:44 修改

阅读量309

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-24 16:57:17 首次发布

本文链接：https://blog.csdn.net/dudu_hope/article/details/131899086

版权

1、declare global

2、`getCurrentInstance()`

vue3的setup中没有this时需要使用getCurrentInstance()来获取。getCurrentInstance()可以用来获取当前组件实例

let { proxy } = getCurrentInstance();

etCurrentInstance是一个function方法，getCurrentInstance()是一个对象，proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性，通过对象的解构赋值方式拿到proxy。

getCurrentInstance只能在setup或生命周期钩子中使用。

开发中只适用于调试！不要用于线上环境，否则会有问题！

解决方案：let { proxy } = getCurrentInstance();

添加一个可以在应用的任何组件实例中访问的全局 property。

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

//当我们想在组件内调用http时需要使用getCurrentInstance()来获取。
import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { proxy } = getCurrentInstance(); //获取上下文实例，proxy=vue2的this
    onMounted(() => {
      proxy.http();
    });
  },
};

3、unplugin-auto-import，Vue3自动引入api插件

Vue3项目，定义数据、方法都要引入对应的api，比如ref、reactive、onMounted等等，很是麻烦，所以有了自动引入的插件，安装配置后都不用再引api，而可以直接使用了

在根目录下会生成一个auto-import.d.ts文件，和main.ts平级。这个文件就是替你去引入各种api的集成文件

4、vite的环境变量 import.meta.env

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。

5、onMounted、onUnmounted

onMounted比setup晚一些，setup会先执行，和书写顺序没关系

setup() {
    onMounted(() => {
      //组件挂载的过程 包括数据 dom等
      console.log("onMounted");
    });
    console.log("setup");
}

输出  
setup
onMounted

onMounted有哪些用法

需要在组件完全挂载到 DOM 树上后再对 DOM 或组件进行操作，就可以使用 onMounted 这个钩子函数

1：发请求
要通过跟后端交互来获取一些数据，就可以放在onMounted里面来发一些数据请求、

2：做一些数据初始化的操作
比如说最常见的就是接收路由传递的参数

通过当前组件定义的数据来接收传递过来的数据

3：处理DOM元素

使用 onMounted 钩子函数，可以确保 DOM 元素已经完全挂载到页面上后再进行操作，这样可以避免操作未挂载完毕的元素

onUnmounted组件卸载时的生命周期，一般用于清除定时器清除闭包函数

6、setup

setup就是Vue3的一个新的语法糖，在setup函数中，所有的ES模块导出都被认为是暴露给上下文的值，并且包含在setup()返回对象中（从生命周期钩子的视角来说，它会在beforeCreate钩子之前被调用）

如果将setup写在script标签中的话，那么内容就不再需要去暴露
如果使用setup()这种形式去写，就会需要return去进行暴露

7、确定赋值断言 let x: number; （Variable 'x' is used before being assigned.）

允许在实例属性和变量声明后加一个 ! 号，从而告诉 TypeScript 这个属性会被明确赋值。
通过 let x!: number; 确定赋值断言，TypeScript 编译器就会知道该属性会被明确地赋值。

let x: number;
setX();
// Variable 'x' is used before being assigned.
// 变量“x”在赋值之前使用
console.log(2 * x); // Error
 
function setX() {
  x = 10;
}
使用 确定赋值断言

let x!: number;
 
function setX() {
  x = 10;
}
 
setX();
console.log(2 * x); // ok ===> 20