Vue3 01 -- 初识Vue3

Vue3 组合式API

 

在vue2的版本里,数据和函数是分开维护的,并且调用时还要用到mount或者Create。

但是在vue3的版本里,经过setup的语法糖,能够实现集中式维护,一个功能写的代码能放在一起,且代码量更少了。

 

使用create-vue创建项目

  1. 在工作目录下,用命令行运行npm init vue@latest
  2. 按照指示一步步建立。
  3. 成功建立后,在项目目录下运行npm install 下载环境,然后运行。

 项目目录和关键文件

项目配置文件变成了基于vite的配置

核心依赖还是package.json

入口文件还是main.js

根组件还是app.vue 但是vue格式发生了变化

首先script到了最上面,template到了中间。

template不再需要根div元素

script支持vue3最大的特色,组合式api。

 

Set up

 

setup 可以写在vue2的形式里,发生在beforeCreate函数之前,组件挂载完毕之后。

 

 默认的写法,在定义完数据和函数之后,需要将数据return。

使用的时候和vue2一样,直接绑定click事件,用{{}}绑定数据。

 

 用setup语法糖,这样只需要定义数据和方法就行,return工作已经完成了。

经过语法糖的封装能更简单的使用组合式api。

 

ref()

 ref简单来说就是生成一个响应式对象。

用这些函数都要有一个通用的过程,1 导入 2 执行接收

 

reactive()

 

 用法与ref类似,但是只能传入类型为对象的初始值。

 

ref和reactive异同点:

reactive和ref函数都是通过函数调用的方式生成响应数据。

reactive不能处理简单类型的数据

ref参数类型支持更好但是必须通过.value访问修改

ref函数的内部实现依赖于reactive

更推荐使用ref函数,更加灵活。

 

computed 计算属性函数

 通用的步骤还是没少,1 、导入 2、用变量接收

用变量接收 computed函数,里面参数是一个回调函数,return的是基于响应式数据做计算的值。

 

watch函数

 

watch的作用是侦听一个或者多个数据的变化,数据变化时执行回调函数

 通用的步骤一样 1 导入 2 执行函数

watch函数的基础用法,有2个参数:

1. 侦听变化的数据

2. 回调函数,回调函数里有2个参数,前者是更新后的值,后者是更新前的值

 

侦听多个数据和单个数据类似,

只是参数里面装的是数组。

 

 

 

watch函数有两个额外的参数:

1. immediate

2. deep

immediate通常用来给出相应的搜索提示,侦听器刚创建的时候就会调用。

watch监听的ref对象是浅层的,如果是对象里的某个值发生改变,则不会调用watch函数,此时要加deep参数。

 

但是deep函数消耗的资源很多,一般不推荐这样写,因为对象侦听通常是针对对象的某个属性,所以可以用下面的进阶写法。

精确侦听对象的某个属性

 这里的watch函数,

第一个参数的位置,从某个需要侦听的变量,修改成了一个回调函数,回调函数需要指明需要侦听的对象的某个属性。

第二个参数不变。

 

作为watch函数的第一个参数,ref对象不需要添加.value。

不开启deep,需要在第一个参数写成函数的写法,返回需要监听的具体属性。

 

生命周期函数

这里的生命周期函数 vue3与vue2相比,绝大多数前面只需要加一个on就行了。

但是beforeCreate和created的API被组合成了setup。

 

 

使用起来很简单,1 导入 2 调函数。

 

 

可以执行多次,使用的业务场景就是原来的函数太复杂,在不动代码的情况下加一些业务逻辑,可以直接再起一个函数。

父子通信

父组件要传变量值给子组件的时候,

父组件要在子组件内绑定属性,这一点和vue2一样。

子组件通过defineProps函数接收,这个叫“编译器宏”之后会讲到。

接受的时候名字要对应,数据类型也要指明。

 

子传父的做法是绑定事件,通过绑定事件接收子组件传过来的变量。

子组件通过编译器宏defioneEmits生成emit方法,里面放的是绑定事件的名称。

通过emit(事件名称,传的数据)向父组件传递。

父组件通过该事件的回调函数,设一个参数接收这个数据。

 

模板引用

 

vue2是通过$refs得到绑定的ref对象的

 

在vue3中,得到了更快捷的方式。

只需要先用ref生成一个ref对象,

再通过ref标识绑定ref对象到标签即可使用。

 

 provide和inject

 

project 和 inject 的 作用就是实现跨层组件通信,某个父级组件和子级组件进行通信。

 

 

 

使用方法很简单,不再赘述。

 

 

这里需要说明的是,每个组件只能修改本组件的数据,如果要实现跨组件修改,可以传递方法,底层组件调用方法修改顶层组件中的数据。

 

posted @   小超和你  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek “源神”启动!「GitHub 热点速览」
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
点击右上角即可分享
微信分享提示