Vue学习笔记六--Vue3学习

1、Vue3的优势

Vue学习笔记六--Vue3学习_第1张图片

Vue学习笔记六--Vue3学习_第2张图片

Vue学习笔记六--Vue3学习_第3张图片

2、创建Vue3工程

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

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

Vue学习笔记六--Vue3学习_第4张图片

然后执行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 命令来验证是否成功更改

Vue学习笔记六--Vue3学习_第5张图片

升级node及npm包

Vue学习笔记六--Vue3学习_第6张图片

Vue学习笔记六--Vue3学习_第7张图片

Vue学习笔记六--Vue3学习_第8张图片

3、组合式Api

Vue学习笔记六--Vue3学习_第9张图片

Vue学习笔记六--Vue3学习_第10张图片

Vue学习笔记六--Vue3学习_第11张图片

Vue学习笔记六--Vue3学习_第12张图片

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

reactive和ref

Vue学习笔记六--Vue3学习_第13张图片

Vue学习笔记六--Vue3学习_第14张图片

Vue学习笔记六--Vue3学习_第15张图片

Vue学习笔记六--Vue3学习_第16张图片

在模板中读取数据: 不需要.value,直接:

{{xxx}}

Vue学习笔记六--Vue3学习_第17张图片

Vue学习笔记六--Vue3学习_第18张图片

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

Vue学习笔记六--Vue3学习_第19张图片

5、计算属性--computed

Vue学习笔记六--Vue3学习_第20张图片

Vue学习笔记六--Vue3学习_第21张图片

Vue学习笔记六--Vue3学习_第22张图片

6、watch函数

Vue学习笔记六--Vue3学习_第23张图片

Vue学习笔记六--Vue3学习_第24张图片

Vue学习笔记六--Vue3学习_第25张图片

Vue学习笔记六--Vue3学习_第26张图片

Vue学习笔记六--Vue3学习_第27张图片

Vue学习笔记六--Vue3学习_第28张图片

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

Vue学习笔记六--Vue3学习_第29张图片

7、生命周期函数

Vue学习笔记六--Vue3学习_第30张图片

Vue学习笔记六--Vue3学习_第31张图片

7、toRef与toRefs

Vue学习笔记六--Vue3学习_第32张图片

Vue学习笔记六--Vue3学习_第33张图片

Vue学习笔记六--Vue3学习_第34张图片

8、父子通信

Vue学习笔记六--Vue3学习_第35张图片

Vue学习笔记六--Vue3学习_第36张图片

9、其他

获取dom对象或组件实例对象

Vue学习笔记六--Vue3学习_第37张图片

defineExpose函数

Vue学习笔记六--Vue3学习_第38张图片

数据传递

Vue学习笔记六--Vue3学习_第39张图片

Vue学习笔记六--Vue3学习_第40张图片

defineOptions

你可能感兴趣的:(Vue,vue.js,学习,笔记)