学习vue3的笔记

news2025/1/2 23:46:46

一、vue和react的对比

1、基础介绍

vue：https://cn.vuejs.org/

vue3是2020年创建的

react：https://react.dev/

react是一个2013年开源的JavaScript库，严格意义上来说不是一个框架

2、diff算法

两个框架采用的都是同级对比策略

两节点对比时

对比时的不同策略

vue3策略：找出最长递增子序列，首尾对比直到不同停止

比如下图时cd不变把b放到cd后面

react：节点的索引对比，从左往右移动

二、搭建VUE3的开发环境+初始vue3

1、node环境安装：https://nodejs.org/en/down (选择18以上的版本)

2、开发编辑工具Vscode(Visual Studio Code)：https://code.visualstudio.com/Download

3、安装谷歌浏览器

三、创建Vue3项目（cmd运行）

1、切换镜像源

npm config set registry https://registry.npmmirror.com/

2、安装pnpm

npm install -g pnpm

如果淘宝镜像在下载过程中不行就切换回来官方的镜像，然后再切换回来淘宝（淘宝的 npm 镜像源可能存在证书过期的问题。您可以尝试将 npm 源切换回官方的 npm 源，然后重新安装依赖。）

npm config set registry https://registry.npmjs.org

3、实际上使用npm没有下载成功pnpm，是下载了cnpm之后，再使用cnpm下载的pnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm install -g pnpm

4、使用pnpm创建vue3文件

pnpm create vite

5、使用pnpm安装文件的包

pnpm i

6、启动文件

pnpm run dev

四、文件运行中学习代码新的知识

1、<script setup>实现模块化

vue2是选项式，vue3是模块化

选项式需要暴露很多，比如data{return }之类的，setup不需要

之后的代码都是在setup的情况下写的:https://cn.vuejs.org/api/sfc-script-setup.html#script-setup

2、ref,响应式数据

vue2的数据是放在data，vue3用ref https://cn.vuejs.org/api/reactivity-core.html#ref

3、v-cloak

如果不是通过官方语句脚手架创建的vue文件，只是普通的html文件然后引入就会造成的现象，正常通过官方语句创建的vue文件不会

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

会造成数据还没初始化就已经渲染了，造成页面数据闪烁，加入v-cloak就不会：https://cn.vuejs.org/api/built-in-directives.html#v-cloak

4、nextTick

5、ref和reative的区别

https://cn.vuejs.org/api/reactivity-core.html#reactive

6、计算属性computed

https://cn.vuejs.org/api/reactivity-core.html#computed 和vue2的写法不一样

使用缓存，减少性能消耗

<script setup>
import { ref,computed } from 'vue';

const list=ref({
  book:["语文","数学","英文"]
})

const f=ref(0)
const l=ref(2)

const listC=computed({
  get(){
    return f.value
  },

  set(newValue){
    [f.value,l.value]=newValue.split(" ")
  }

})
listC.value='78'

</script>

<template>
  <div>是否也有书：</div>
  <span>{{ listC }}</span>
</template>