学习vue3的笔记-EW帮帮网

一、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>

使用computed是因为，如果模板更新，数据没有变化，可以直接拿computed的缓存数据不需要二次计算，如果直接写在模板会每一次刷新都会重新计算一次

7、类与样式的绑定

class直接赋值

<script setup>
import { computed, ref } from 'vue';
const isA=ref(true) 
const isT=ref(true)
const classC=computed(()=>({active:isA,title:isT}))

const act=ref("act")
const tit=ref("tit")

</script>

<template>
  <div :class="{isA,isT}">小</div>  //1、写在对象里

  <div :class="classC">小</div>  //2、使用computed

  <div :class="[act,tit]">小</div> //3、写在数组里

  <div :class="[{act:isA},isT?'tit':'']">11</div>//4、在数组里可以使用三目表达式和对象

</template>

style的绑定

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

const col=ref('red')
const fs=ref(40)
const sty={color:col.value,fontSize:fs.value+'px'}
</script>

<template>
  <div :style="{color:col,fontSize:fs}"></div> //1、直接在对象赋值

  <div :style="sty">11</div> //2、直接拿对象值
</template>

const sty={color:col.value,fontSize:fs.value+'px'} 这句一定要记得写.value,不能直接写{color:col,fontSize:fs+'px'}

学习vue3的笔记