个人博客

1. 【reactive 创建：对象类型的响应式数据】 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错） 语法：let 响应式对象= reactive(源对象)。 **返回值：**一个Proxy的实例对象，简称：响应式对象。 注意点：reactive定义的响应式数据是“深层次”的。 1234567891011121314151617181920212223242526272829303132333435363738394041424344<template> <div class="person"> <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2> <h2>游戏列表：</h2> <ul> <li v-for="g in games"...

1. 【ref 对比 reactive】宏观角度看： ref用来定义：基本类型数据、对象类型数据； reactive用来定义：对象类型数据。 区别： ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。 reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。 使用原则： 若需要一个基本类型的响应式数据，必须使用ref。 若需要一个响应式对象，层级不深，ref、reactive都可以。 若需要一个响应式对象，且层级较深，推荐使用reactive。

1. 【ref 创建：基本和对象类型的响应式数据】 **作用：**定义响应式变量。 语法：let xxx = ref(初始值)。 **返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。 注意点： JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。 1234567891011121314151617181920212223242526272829303132333435<template> <div class="person"> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button...

1. 【vue中的setup】setup 概述setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视……等等，均配置在setup中。 特点如下： setup函数返回的对象中的内容，可直接在模板中使用。 setup中访问this是undefined。 setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。 12345678910111213141516171819202122232425262728293031323334353637<template> <div class="person"> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button...

1. 【一个简单的效果】Vue3向下兼容Vue2语法，且Vue3中的模板中可以没有根标签 123456789101112131415161718192021222324252627282930313233<template> <div class="person"> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">年龄+1</button> <button @click="showTel">点我查看联系方式</button> ...

1. 创建Vue3工程2.1. 【基于 vue-cli 创建】点击查看官方文档 备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。 1234567891011121314151617## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/cli npm install -g @vue/cli## 执行创建命令vue create vue_test## 随后选择3.x## Choose a version of Vue.js that you want to start the project with (Use arrow keys)## > 3.x## 2.x## 启动cd vue_testnpm run serve 2.2. 【基于 vite 创建】(推荐)vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下： 轻量快速的热重载（HMR），能实现极速的服务启动。 对 TypeScript、JSX、CSS...

配置eslint什么是eslint? ESLint 是一个 JavaScript 和 TypeScript 的静态代码分析工具，它用于识别代码中的问题并提供一致性和规范性。简单来说，它的作用是： 检测错误和潜在的问题： ESLint 可以帮助你找到代码中的错误、潜在的 bug 以及不规范的写法，从而提高代码的质量和稳定性。 强制执行代码风格规范： 它可以根据预定义的规则或自定义的规则来强制执行一致的代码风格，以确保团队成员之间的代码风格一致，提高代码的可读性和可维护性。 提供自定义规则和插件支持： ESLint 允许你根据项目的特定需求定义自定义规则，并且支持各种插件，可以满足不同项目的特定需求。 总的来说，ESLint 可以帮助开发人员编写更加干净、可靠和符合规范的代码。 安装命令12# 方案1 pnpm i -D eslint 规则方案12345# 使用集成方案，内置好了所需规则pnpm i -D @antfu/eslint-config # eslint默认方案，通过命令初始化eslint规则npx eslint...

Linux服务器一键测速脚本使用以下命令可以快速测试服务器的网络性能: 1wget -qO- --no-check-certificate https://ghproxy.cc/https://raw.githubusercontent.com/oooldking/script/master/superbench.sh | bash 该脚本将测试: 服务器基础信息 网络带宽 磁盘I/O速度 全球各地区到服务器的延迟