Vue学习笔记六--Vue3学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue学习笔记六--Vue3学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、Vue3的优势

npm run build vite command not found,Vue,vue.js,学习,笔记

2、创建Vue3工程

前提：node -v 查看node版本，需要在16.0及以上

创建命令 npm init vue@latest,先安装create-vue然后创建项目

npm run build vite command not found,Vue,vue.js,学习,笔记

然后执行npm run dev 提示
sh: vite: command not found,需要执行npm i重新安装依赖，之后再执行npm run build，再执行 npm run dev 可以正常运行了

更换npm淘宝源

首先打开命令提示符或者终端。
输入以下命令来查看当前的镜像源设置：npm config get registry。如果显示为默认值 https://registry.npmjs.org/，则说明已经使用了官方镜像源。
若想切换到其他镜像源，可以通过运行以下命令将镜像源修改为淘宝 NPM 镜像（也称为 cnpm）：npm config set registry https://registry.npm.taobao.org/.
确保新的镜像源生效后，再次运行 npm config get registry 命令来验证是否成功更改

npm run build vite command not found,Vue,vue.js,学习,笔记

升级node及npm包

npm run build vite command not found,Vue,vue.js,学习,笔记

3、组合式Api

npm run build vite command not found,Vue,vue.js,学习,笔记

4、生成响应式数据--ref与reactive

reactive和ref

npm run build vite command not found,Vue,vue.js,学习,笔记

在模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

npm run build vite command not found,Vue,vue.js,学习,笔记

//ref加工之后生成一个 RefImpl引用对象，该对象的原型对象上可以发现，底层其实还是Object.defineProperty通过
      // get 和set实现的响应式数据
 因此改变数据需要用到RefImpl引用对象中的value属性

npm run build vite command not found,Vue,vue.js,学习,笔记

5、计算属性--computed

npm run build vite command not found,Vue,vue.js,学习,笔记

6、watch函数

npm run build vite command not found,Vue,vue.js,学习,笔记

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

npm run build vite command not found,Vue,vue.js,学习,笔记