个人在网站怎么做,视频网站软件有哪些,如何把网站放到百度,WordPress浏览计数插件一、vue和react的对比
1、基础介绍
vue#xff1a;https://cn.vuejs.org/
vue3是2020年创建的
react#xff1a;https://react.dev/
react是一个2013年开源的JavaScript库#xff0c;严格意义上来说不是一个框架
2、diff算法
两个框架采用的都是同级对比策略 两节点对…一、vue和react的对比
1、基础介绍
vuehttps://cn.vuejs.org/
vue3是2020年创建的
reacthttps://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 --registryhttps://registry.npmmirror.comcnpm 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的数据是放在datavue3用ref https://cn.vuejs.org/api/reactivity-core.html#ref
3、v-cloak
如果不是通过官方语句脚手架创建的vue文件只是普通的html文件然后引入就会造成的现象正常通过官方语句创建的vue文件不会
script srchttps://unpkg.com/vue3/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 listref({book:[语文,数学,英文]
})const fref(0)
const lref(2)const listCcomputed({get(){return f.value},set(newValue){[f.value,l.value]newValue.split( )}})
listC.value78/scripttemplatediv是否也有书/divspan{{ listC }}/span
/template 使用computed是因为如果模板更新数据没有变化可以直接拿computed的缓存数据不需要二次计算如果直接写在模板会每一次刷新都会重新计算一次
