vue3笔记

water4484

已于 2022-08-07 10:41:16 修改

阅读量2.9k

点赞数 1

文章标签： vue.js javascript

于 2022-04-01 22:59:52 首次发布

本文链接：https://blog.csdn.net/qq_44846544/article/details/123642879

版权

此帖子为在学习过程中记录的笔记，可能存在错误
内容存在一定程度的摘抄并非纯原创

全局挂载

//main.js
const apps = createApp(App);
// 全局挂载
apps.config.globalProperties.$_lodash = lodash;

// 组件中
import { getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();
//取值
let res = proxy.$_lodash.cloneDeep(res0);

获取原始对象用 toRaw

在ajax请求放入参数的时候可能会用到

  setup() {
    let obj={name:'lj',age:18}
    let state=reactive(obj)
    let obj2=toRaw(state)   
    console.log(obj===obj2); //true
    
    function myFn(){
      obj2.name='zs'
      console.log(state); //Proxy {name: "zs", age: 18}
      console.log(obj2);  //{name: "zs", age: 18}
    }
    return {
      myFn,state
    }
  },

process.cwd()

process.cwd() 方法返回 Node.js 进程的当前工作目录。

import { cwd } from 'process';

console.log(`Current directory: ${cwd()}`);

Env变量和模式

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相反)

Production Replacement

在生产过程中，这些env变量被静态地替换。因此，必须始终使用完整的静态字符串引用它们。例如，像import.meta这样的动态密钥访问。env[key]不起作用。
它还将替换JavaScript字符串和Vue模板中出现的这些字符串。这应该是一个罕见的情况，但它可能是无意的。有一些方法可以解决这个问题:
对于JavaScript字符串，你可以用一个unicode零宽度的空格来分隔字符串，例如。“import.meta \ u200b.env.MODE”。
对于被编译成JavaScript字符串的Vue模板或其他HTML，你可以使用标签，例如import.meta.env.MODE。

.env Files

Vite使用dotenv从你的项目根目录下的以下文件中加载额外的环境变量:

.env

__dirname

__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
当你在 /d1/d2/myscript.js 文件中写了 __dirname，它的值就是 /d1/d2 。
例如在vite中配置别名

resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src")
  },
},

vite共享配置 mode

类型： string

默认： ‘development’（开发模式），‘production’（生产模式）

在配置中指明将会把 serve 和 build 时的模式都覆盖掉。也可以通过命令行 --mode 选项来重写。

export default(({mode})=>{
 return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src")
      },
    },
    base: "/",
    build: {
      brotliSize: false,
      chunkSizeWarningLimit: 1024,
    },
    server: {
      // host: "localhost",
      port: 3030,
      // 是否自动在浏览器打开
      open: false,
      // 是否开启 https
      https: false,
      proxy: {
        '/api': {
          target:  loadEnv(mode,process.cwd()).VITE_ADMIN_BASE_API,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        },
        '/psi': {
          target:  loadEnv(mode,process.cwd()).VITE_PDS_BASE_API,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/psi/, '')
        },
        '/Cti': {
          target:  loadEnv(mode,process.cwd()).VITE_BASE_API,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/Cti/, '')
        }
      },
    },
  });

})

关于v3 ref 和 reactive 的坑

reactive 有个比较大的缺点不能整体重新赋值重置数据麻烦。想要整体赋值的话需要在对象中创建一个属性对这个属性进行整体值的切换。最后还是避免不了内部引用。
例如使用element的多选框组使用 reactive 直接创建一个数组的话是不起作用的

const info = reactive(data:{xxx:'ooo'})
更新时：
info.data = {xxx:'aaa'}
使用ref
const info = ref({xxx:'ooo'})
更新
info.value = {xxx:'aaa'}

总结：除对象/json/复杂的嵌套数组外。其他全用 ref ：如基本类型、一维数组

关于资源、组件引入时的后缀

v3的项目中引入组件和api接口的时候，最好把后缀也带上。否则有可能出现找不到模块的问题

v3组件传值

script setup 中的传值方式

defineProps
defineEmits
Provide / Inject

defineProps父传子
和props的用法几乎一样

//子组件中
const props = defineProps({
  foo: String
})
//取值
props.foo

defineEmits子传父
和Emit用法几乎一样

//子组件
let emit = defineEmits(['submission']);
emit('submission',{a:1,b:2});
//父组件
<myCustomTimeSection @submission="customTimeFn" />
let customTimeFn = (val)=>{
	console.log(val)  // {a:1,b:2}
}

Provide / Inject
依赖注入
可以将依赖注入看作是“长距离的 prop”除了

父组件不需要知道哪些子组件使用了它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里

Provide
中允许定义两个参数
1、name (String 类型)
2、value

Provide 能够正确传递 ref reactive 的响应式数据，但要尽可能将对响应式property的所有修改限制在provide的组件内部
如果需要Inject接收注入的组件内部更新数据的话。这种情况下最好用Provide传入一个方法来负责在子组件中改变父组件的数据

//父组件
let addClose = ()=> {
  addSwitch.value = false
}
provide('addCloseFn',addClose)
//子组件
<span @click="addCloseFn" >x</span>
const addCloseFn = inject('addCloseFn');

如果要确保通过 provide 传递的数据不会被 inject 的组件更改建议使用 readonly

<script setup >
import { provide, reactive, readonly, ref } from 'vue';
const location = ref('North Pole')
const geolocation = reactive({
  longitude: 90,
  latitude: 135
})
provide('location', readonly(location))
provide('geolocation', readonly(geolocation))
</script>

Inject
1、要 inject 的 property 的 name
2、默认值 (可选)

//子组件中
<script setup >
import { inject } from 'vue'
const userLocation = inject('location', 'The Universe')
const userGeolocation = inject('geolocation')
</script>

v3动态组件

如果是在 script setup 单文件组件中使用的话
这时候组件被引用为变量而不是作为字符串键来注册
所以书写方式要有一定改变

<component :is="currentElementComponent[componentPoint]"></component>
// script setup 中
import { ref } from "vue";
import demonstrationOne from './conView/demonstrationOne.vue'
import demonstrationTwo from './conView/demonstrationTwo.vue'
let currentElementComponent = {
  'demonstrationOne':demonstrationOne,
  'demonstrationTwo':demonstrationTwo
}
let componentPoint = ref('demonstrationOne')

git删除远程仓库链接地址

常用于本地不想影响到远程的时候

//查看当前远程仓库链接
git remote -v
//根据第一步查询出来的链接删除别名即可
git remote rm origin
//git remote -v 没有查询出东西来表示删除成功了

动态组建可以像普通组建一样传值

在这里插入图片描述

插槽传值

Map.vue 组件中
在这里插入图片描述
使用Map.vue组件

Map.vue 组件
在这里插入图片描述
使用Map.vue 组件

props

在设置默认值的时候对象或数组的默认值必须从一个工厂函数返回

props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }

slot

无论是使用jsx还是模板,最终都会编译成render函数，并且render函数在执行之后会输出 Virtual Dom

所有的模板会被编译成创建vnode的函数。
父组件中传递给子组件的插槽（每个插槽都是一个函数，即名字不同的插槽为不同的函数）内容模板也会被编译成函数并且传递给子组件，模板中如果使用了父组件的变量，那么会通过闭包的形式在插槽函数中被使用。
子组件在接收到父组件传递的插槽内容函数，会以在slot暴露的变量（只有作用域插槽有这些变量）为参数执行这个函数，返回vnode，这个vnode会作为子组件vnode的一部分。

watch

watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

vuex 的使用

在setup语法糖中使用vuex

import { useStore } from 'vuex';
const store = useStore();

配合modules使用

import { createStore } from 'vuex'
import monitor from "./modules/monitor.js";
 
export default createStore({
  // 外部模块
	modules:{
	    monitor
	  },
})

monitor 下的 mutations 中的 m_createdDotidentification

store.commit('monitor/m_createdDotidentification');

monitor 下的 state 中的 exhibitionDot

store.state.monitor.exhibitionDot

v3使用全局变量

setup

//main.js
import lodash from 'lodash';
const apps = createApp(App);
apps.config.globalProperties.$_lodash = lodash;
//组件中
import {  getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();
proxy.$_lodash.cloneDeep()

选项卡

// main.js
import mitt from "mitt";
const apps = createApp(App);
apps.config.globalProperties.$mybus = new mitt();
//组件中
this.$mybus.on();
this.$mybus.emit();

打开新窗口

let DataUrl = this.$router.resolve({
  path: "/aaa",
  query:{
    ruleChat: row.id
  },
});
window.open(DataUrl.href, "_blanks");

history模式下上线刷新页面404

nginx

location / {
  try_files $uri $uri/ /index.html;
}

这种情况的成因是这样的
history模式是通过js才改变浏览器地址栏的路径，并没有发起http请求。刷新浏览器等于重新发起http请求请求不到对应的参数直接就404了

vite解决跨域问题

实际上跨域方案就这么几个

vue中的proxy跨域（原理是Node中间件代理）
Jsonp跨域
cors （跨域资源共享）
nginx反向代理

这里说一下proxy跨域

vite.config.ts文件中

proxy: {
        "/api": {
          target: 'http://crmeb.cimns.com/api',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },