chatGtp
Unocss
Vue3相比Vue2有哪些优势
zhuanlan.zhihu.com/p/266897739…
1. 性能提升
静态提升、预字符串化等技术、实现响应式根源方法发生改变（静态节点提升到render外面）
** 静态提升**：使得不参与更新的元素只会被创建一次，在渲染时直接复用，优化运行时内存占用。
**预字符串化（最厉害）**：则是当编译器遇到大量（连续20个节点）连续的静态内容时，将其编译为一个普通字符串节点，避免了创建虚拟DOM的开销。
**缓存事件处理函数**：给事件打标机cache，如果有cache标记则事件处理函数不生成，只生成一次。
**Block Tree**：这个和预字符串有关系,将模版分为很多块，每个块包含多个节点。
Vue3使用Proxy来监听变量，不需要深度遍历、直接可以监听动态属性添加、数组的索引变化等。
2、响应式系统改进
Vue2要深度遍历每个属性添加getter和setter，遇见复杂对象，要深度遍历。Vue3的Proxy检测的书整个对象，准确捕获这个变化。并通知相关依赖进行更新，从而实现了响应式。
3、更简单的组件开发方式
Vue3 是用的是Composition API，可以写hook函数，js文件。Vue2不支持Hook函数
4、更好的ts支持
5、更好的懒加载支持
Vue3默认开启组件的懒加载，内置‘defineAsyncComponent’函数来实现组件的懒加载
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
);
export default {。
components: {
AsyncComponent
}
};
Vue2没有内置函数包裹组件需要自定义；
const AsyncComponent = () => ({
component: import('./components/AsyncComponent.vue'),
loading: LoadingComponent,
error: ErrorComponent,
delay: 200,
timeout: 3000
});
export default {
components: {
AsyncComponent
}
};
Vue3和Vue2的区别
vue2:
首先他在main.js里。先导入import Vue from ‘vue’；
const app = new Vue(options); //返回组件实例
Vue.use();//插件挂在在Vue上
Vue.component();
app.$mount('#app');
this的指向组件实例；
option api
object.definedProperty();//递归遍历所有属性key值，在beforeCreate之后，created之前已经完成数据响应的遍历，所以新增的属性就检测不到。
v-model双向绑定，还有:text.sync=""，两者都是双向绑定；
vue3:
不存在构造函数vue（所以说import Vue from ‘vue’；就会报错没有默认导出）；
import {createApp} from 'vue';
const app = createApp(App[根组件]); //返回的应用对象实例
app.use();//插件挂在在应用实例上；
app.component();
app.mount('#app');
this指向代理对象Proxy
composition api
setup(){
//没有this
let count = 0;
const increase = () => {
count++;//但是只是普通的变量，在模版中没有重新渲染，所以要ref包裹成为响应式对象
}
return{//返回就会返回到组件实例上去
count,
increase
}
}
Proxy对象，new Proxy()--->返回一个动态的代理的响应式对象，要什么就返回什么的动态代理对象。
没有.sync。用v-model:text代替。
Vue3 v-if权限比v-for高。
vite与webpack对比
浏览器认识EsModule，不能使用commonJS（require这种浏览器不认识）
webpack先查找各个模块的依赖，进行打包，打包完后，在启动devServer运行打包后的文件。
vite就没有打包过程，直接启动koa服务器，（跟项目大小没有关系）但这只是针对开发环境，
<script type="module" src="/src/main.ts"></script>有一个type="module"不支持IE
路径改动
vite是一个搭建工程的脚手架，他搭建什么项目都可以。
当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在于开发阶段。
vite利用的是ES Module，因此在代码中不可以使用CommonJs，但是webpack里面可以用，因为在开发环境还是要编译才运行。
vue3为什么要去掉构造函数
vue2的全局构造函数带来了很多问题：
Vue.use().componet()等影响的是整个Vue，不利于隔离不同应用；
vue3初步搭建
现在vue-cli脚手架里面是vite不是webpack（vite是构建工具，vite也可以搭建react，是刘禹锡）
npm create vue@latest
Uniapp
watch和watchEffect的区别
watch(响应式对象, (newValue,oldValue) => {
//不会立即执行，响应式对象 () => state.b,不能是表达式，写成一个函数；
},
immediate: true
);
watch([响应式对象,()=>state.a], ([newValue1,newValue2],[oldValue1,oldValue2]) => {
//响应式对象 () => state.b,不能是表达式，写成一个函数；
},
immediate: true
);
watchEffect(()=>{
//立即执行，自动跟踪依赖
//一开始就执行，而且是一个异步，延时执行，watch也是异步的
});
判断响应式数据类型
import {xxx} from 'vue';
isProxy：判断某个数据是否由reactive或readonly；
isReactive： 判断某个数据是否通过reactive创建的；
isReadonly：判断某个数据是否是通过readonly创建的；
isRef：判断某个数据是否是一个Ref对象；
toRefs：里面的每一项都变成ref对象，都包含value
return{
...toRefs(reactive),//如果不包裹，展开运算符就失去响应试了。
}
响应式（reactive Api）Api和Compostion Api
响应式Api： 可以脱离组件的，可分离出去；（ref等……）；
Compostion Api： 与组件有深度绑定的，不能脱离组件，setup(props,ctx){//已经完成数据响应式},生命周期函数+setup函数
vite.config.js配置
开发服务器的代理
原来的api地址： "/api/gdp.json"
proxy：{
"/api":{
target: 'https://127.0.0.1:5500/07.shdkaj/', //他当以/api开头的时候，转跳到
rewrite: (path) => path.replace(/^\/api/,"")
}
}
实际上请求https://127.0.0.1:5500/07.shdkaj/api/gdp.json--->然后api路径重写了，相当于请求：
https://127.0.0.1:5500/07.shdkaj/gdp.json
共享数据
vuex编写起来比较复杂
blog.csdn.net/qq_47040462… www.cnblogs.com/czhowe/p/18…
2、chatGtp tongyi.aliyun.com/qianwen/?st… askchat.com.cn/index.html#…
3、element-plus的icon unocss.dev/interactive…: icon-sets.iconify.design/
4、 npm create vue@latest
当您运行这个命令时，它会将最新版本的 Vue CLI 安装到全局环境中
vue create projectName
这个要全局安装vue-cli，使用全局下载好的vue-cli脚手架；
- 已安装 18.3 或更高版本的 Node.js
- vite也需要node版本在18以上或者20以上
