基于vue2快速上手vue3

创建vue项目

基于vue2快速上手vue3
首先现在德vue3已经成为了默认德版本了,现在的创建vue项目的方式有两种:
1:使用脚手架,不走和vue2大致是一样的但是需要注意的是我们vue的版本必须要在4.5以上才能创建vue3项目,现在如果你还再使用vue2过渡到vue3的时候必须要更新开发者工具,不然它无法工作
基于vue2快速上手vue3
基于vue2快速上手vue3
2:使用一个新的构建工具vite这是vue团队基于vue推出的一套工具,它于weakpack不同之处就在于weaked是将我们所有的代码打包好后,然后将所有的志愿上传到服务器,然后再生成一个服务器端口,vite的原理是我先给你一个端口,你需要访问那部分资源,我再去加载
使用vite,需要自己打开项目文件夹去下载依赖

下面的知识点依然是基于脚手架去学习

分析vue3工程结构

main.js的变化

  1. vue2引入的是vue,vue3引入的是creatApp
    基于vue2快速上手vue3
    基于vue2快速上手vue3
  2. 因为引入的不再是一个构建函数所以创建的也不再是vm,而是app,app和vm有什么区别?其实他们的作用是类似的只不过app里去除了许多用不上的方法,属性

基于vue2快速上手vue3
注意vue3并不兼用vue2的写法

App的变化

app中最大的变化即使书写html时不必加上一个根标签,当然你习惯了写也可以,其他的变化不大

基于vue2快速上手vue3

常用的Composition API

组合式API

了解setup

基于vue2快速上手vue3
例子如下:
基于vue2快速上手vue3

基于vue2快速上手vue3

首先式这个setup配置项的作用:在vue2的时候我们习惯于将数据放在data配置项中,方法放在methods配置项中,在vue3中就不再这样使用了,我们统一将这些数据方法都放在setup配置项中,然后将这些数据作为一个对象返回即可,在vue3中依然可以使用data,methods这些配置项,但不推荐混合使用因为setup无法访问data与methods中的数据,其次就是重名的问题

ref函数

我们之前学习 vue2的时候有一个ref属性,这个属性的作用是为了获取dom节点

ref函数的作用

在上面的那个例子中我们提到了一个响应式数据的问题,也就是说我们上面的数据并不是响应式的我们更改setup中的数据后,页面的数据并不会更新,所以要实现相应式的数据我们必须要使用ref函数

ref函数的工作原理

我们将数据交给ref后,它会生成一个ref引用实例对象,然后它会将我们的数据保存在value中,并生成代理(set,get函数),然后根据set和get的调用页面进行更新,所以我们在使用ref函数后如果需要在setup中使用ref代理的数据就应该使用该ref引用对象中的value属性 ,但在模版中就不需要再使用value了,因为vue会自动帮我们调用.value

基于vue2快速上手vue3
基于vue2快速上手vue3

例子如下:
基于vue2快速上手vue3

ref处理对象类型的数据

基于vue2快速上手vue3
为普通的数据添加ref对象的时候:使用代理后可以直接通过使用value来使用对象,对象也是一样的使用,应为它深层已经为我们设置好了,就不需要我们自己考虑了

例子如下:
基于vue2快速上手vue3

reactive函数

基于vue2快速上手vue3
作用:同样是生成响应式数据,不过这个函数式用于生成对象类型的响应式数据,而ref则什么数据都可以使用

上一篇:Vue3的事件绑定的实现逻辑是什么


下一篇:Vue3 main.js文件