VUE

##### 工作原理

Vue 3 在组件挂载时，会自动将模板中 `ref="hello"` 对应的 DOM 元素或组件实例赋值给 `hello.value`。

这类似于 Vue 2 中的 `this.$refs.hello`，但更加类型安全和直观。

#### `reactive`

* 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
* 语法：const代理对象=reactive（源对象）接收一个对象（或数组），返回一个代理对象（proxy对象）。
* reactive定义的响应式数据是深层次的”。
* 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

`reactive`函数只能代理对象类型，代理之后，就是深层次的代理

#### `computed`

与Vue2.x中computed配置功能一致

#### `watch`函数

与Vue2.x中watch配置功能一致。两个小“坑：

* 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
* 监视reactive定义的响应式数据中某个属性时：deep配置有效。

```css
watch(person,(newValue,oldValue)=>{
  console.log(newValue)
},{
  immediate: true,
  deep: true,
})

watch([person,school],(newValue,oldValue)=>{
  这时候value全是数组
})

watch(person.name,(newValue,oldValue)=>{
  ...
})

watch(()=>person.name,(newValue,oldValue)=>{
  ...
})
同理，某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
  ...
})

let person ={
  name:"HelloWorld",
  age:18,
  job:{
    j:{
      salary:20
    }
  }
}
person=reactive(person)
watch(person.job,(newValue,oldValue)=>{//person.job也是代理对象，因此默认是深度监视的
  console.log('检测到变化')
})
watch(()=>person.job,(newValue,oldValue)=>{//但是按照函数返回值的写法，监视不会深度监视，只检测浅层次的
  console.log('检测到变化')
})

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。 
watchEffect(()=>{
    const x1 =sum.value 
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

import {onMounted, reactive} from "vue";

export default function(){
    //数据
    let point=reactive({
        x:0,y:0
    })
    //方法
    function savePoint(){

    }
    //生命周期
    onMounted(function () {})
    return point
}

import userPoint from "@/hooks/userPoint";
let point = userPoint()

setup(props,context){

}

shallowReactive({
	name:'zhangSan',
	age:18
})
//只能用来代理普通对象，如果用来代理响应式对象，那就不会起作用

//shallowRef也只能用来代理普通对象，不能代理响应式对象！
person=shallowRef({那么：‘zhangSan})
//它的原理就是每次返回的value类型不是Proxy，而是Object

let person ={
  name:"HelloWorld",
  age:18,
  job:{
    j:{
      salary:20
    }
  }
}
person=reactive(person)
person=readonly(person)//响应式数据变成只读
person=shallowReadonly(person)//响应式数据变成只读

person = reactive(person)					//person是一个响应式对象

person.son = {name:'liHua',age:18}			//son属性最后也会变成响应式
person.son = markRaw({name:'liHua',age:18})	//这样添加son属性就还是Object

function myRef(value){
  return customRef((track, trigger)=>{
    let timer
    return {
      get(){
        track()//通知vue追踪数据的变化
        return value;
      },
      set(newValue){
        clearTimeout(timer)
        timer = setTimeout(()=>{
          value=newValue
          trigger();//通知vue重新解析代码
        },500)

      }
    }
  })
}
let name=myRef("zhangSan")
return {
  name
}

setup(){
	...
	provide('car',{name:'hhw'})
}

setup(){

	let car = inject('car')
}

<teleport to="移动位置">
<div v-if="isshow"class="mask"

<div class="dialog">
≤h3>我是一个弹窗</h3>
<button@click="isShow=false">关闭弹窗</button>
</div> </div>

</teleport>
如果想传入最外层，就可以使用 to="body"

setup(){
	onBeforeMount(()=>{})
}

let p = new Proxy(person,{
  get(target, propName) {
    return Reflect.get(target, propName);
  },
  set(target, propName, newValue) {
    return Reflect.set(target, propName, newValue);
  },
  deleteProperty(target, propName) {
    return Reflect.deleteProperty(target, propName);
  }
})

import { createLocalVue, mount } from '@vue/test-utils'

// 创建一个扩展的 `Vue` 构造函数
const localVue = createLocalVue()

// 在 “local” Vue构造函数上 “全局地” 安装插件
localVue.use(MyPlugin)

// 将 `localVue` 传入挂载选项
mount(Component, { localVue })

import { createApp } from 'vue'

const app = createApp({})

const { createApp } = Vue

const app = createApp({})

Vue.component()//注册全局组件
Vue.directive()//注册全局命令
...

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      window.open(fileUrl);
    }
  }
};
</script>

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      axios.get(fileUrl, { responseType: 'blob' })
        .then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      fetch(fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', fileName);
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const fileUrl = '/path/to/' + fileName; // 文件的URL地址
      this.$download(fileUrl, fileName);
    }
  }
};
</script>

<template>
  <div>
    <button @click="downloadFile('file1.pdf')">下载文件1</button>
    <button @click="downloadFile('file2.jpg')">下载文件2</button>
  </div>
</template>
<script>
export default {
  methods: {
    downloadFile(fileName) {
      const folderPath = '/path/to/folder/'; // 文件所在的文件夹路径
      const fileUrl = folderPath + fileName; // 拼接文件夹路径和文件名
      const link = document.createElement('a');
      link.href = fileUrl;
      link.setAttribute('download', fileName);
      link.click();
    }
  }
};
</script>

vueCopy Code<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const fileUrl = require('@/assets/aaaa.txt');
      const link = document.createElement('a');
      link.href = fileUrl;
      link.download = 'aaaa.txt';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

vueCopy Code<script>
export default {
  methods: {
    async downloadFile() {
      const fileUrl = require('@/assets/aaaa.txt');
      try {
        const response = await fetch(fileUrl);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'aaaa.txt';
        a.click();
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

https://example.com/#/user/profile
        │         │       └── 前端路由路径
        │         └── 哈希起始符
        └── 服务器实际接收的 URL

mermaidCopy Codegraph TD
    A[用户点击链接] --> B{URL 哈希变化}
    B -->|触发 hashchange 事件| C[前端路由解析哈希]
    C --> D[加载对应组件/数据]
    D --> E[局部更新 DOM]

vue create test-webpack

npm create vue@latest	#(官方教程)
npm create vite@latest my-vue-app	#AI给的教程

operateRender(row) {
      const funcPermissions = this.funcPermissions;
      const operateButtons = [];
      const checkButton = this.createAuditOrViewButton(false, '查看', row);
      switch (row.status) {
        case refundStatusEnum.waitApprove: {
          if (funcPermissions.refundOperatePms.display) {
            operateButtons.push(
              <el-tooltip
                class="item"
                effect="dark"
                content="提醒审核人"
                placement="top-start"
              >
                {this.createButton(
                  '提醒',
                  row,
                  this.remindApprove,
                  row.isReminding
                )}
              </el-tooltip>
            );
          }
          operateButtons.push(
            funcPermissions.approveRefund.display && row.canAudit
              ? this.createAuditOrViewButton(true, '审核', row)
              : checkButton
          );
          break;
        }
        case refundStatusEnum.refundFailed: {
          operateButtons.push(
            this.createButton('查看原因', row, this.checkRefundFailedReason)
          );
        }
        // eslint-disable-line [no-fallthrough]
        case refundStatusEnum.waitRefund: {
          operateButtons.push(
            funcPermissions.refundOperatePms.display &&
            row.payType === payTypeEnum.origin
              ? this.createButton('退费', row)
              : checkButton
          );
          break;
        }
        case refundStatusEnum.waitClosePms: {
          operateButtons.push(
            funcPermissions.refundOperatePms.display
              ? this.createButton('关闭权限', row)
              : checkButton
          );
          break;
        }
        default: {
          operateButtons.push(checkButton);
        }
      }
      return operateButtons;
    },

<router-view v-slot="{ Component, route }">
<keep-alive>
  <component 
	:is="Component" 
	v-if="route.meta.keepAlive" 
	:key="route.name"
  />
</keep-alive>
<component 
  :is="Component" 
  v-if="!route.meta.keepAlive" 
  :key="route.name"
/>
</router-view>