vue3

于 2023-11-20 20:20:59 发布
阅读量88 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_73918953/article/details/134517246
版权
本文探讨了Vue3中的新特性，如组合式API、setup的使用、响应式工具（reactive、ref、computed、watch）及其深度监视，以及父子组件间的通信、Pinia状态管理库和新特性如defineOptions和defineModel。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue3的优势

在这里插入图片描述

vue2先选式api VS vue3组合式api

在这里插入图片描述

create-vue

在这里插入图片描述

使用create-vue创建项目

在这里插入图片描述

项目目录和关键文件

在这里插入图片描述

组合式API

setup选项和执行时机

  1. 执行时机：比beforeCreate还要早

  2. setup函数中，获取不到this，this是undefined

  3. 在这里插入图片描述

  4. 在setup选项中编写数据和函数，最后需要return才能在模板中应用在这里插入图片描述

  5. setup语法糖在这里插入图片描述

reactive和ref函数

reactive

在这里插入图片描述

ref函数

  1. 本质：是在原有传入数据的基础上，外层包成了复杂类型对象
  2. 底层：包成复杂类型对象后，再借助 reactive 实现的响应式
  3. 注意点：
    • 在脚本中访问数据，需要通过 变量.value访问
    • 在template中，则不需要

在这里插入图片描述

computed

在这里插入图片描述
在这里插入图片描述

watch

在这里插入图片描述
在这里插入图片描述

deep深度监视

  1. watch默认的是浅层监视，即ref传入的是简单数据类型，可以直接监视，但若传入复杂数据类型则监视不到，需要配置deep深度监视
  2. deep深度监听复杂对象的每一个属性的变化情况

精确监听对象的某个属性

在这里插入图片描述

生命周期函数

在这里插入图片描述

父子通信

父传子

在这里插入图片描述

defineProps原理

在这里插入图片描述

子传父

在这里插入图片描述

模板引用

  1. 调用ref函数，生成一个ref对象
  2. 通过ref标识，进行绑定
  3. 通过ref对象.value即可访问到绑定的元素(必须渲染完成后才能拿到，在onMounted函数里引用)在这里插入图片描述

defineExpose()

在这里插入图片描述

provide 和 inject

  1. 作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据

在这里插入图片描述

跨层传递响应式数据

在这里插入图片描述

跨层传递函数 => 给子孙后代传递可以修改数据的方法

在这里插入图片描述

vue3新特性 - defineOptions

在这里插入图片描述

vue3.3新特性 - defineModel

在这里插入图片描述

  • 使用v-model后
    在这里插入图片描述
  • 这是一个试验性质的特性，需要在vite.config.js里面配置在这里插入图片描述

Pinia

什么是Pinia

在这里插入图片描述

手动添加Pinia到vue项目

在这里插入图片描述

  1. 安装pinia包在这里插入图片描述
  2. 创建pinia实例并挂载到vue上
    在这里插入图片描述
  3. 具体使用
    在这里插入图片描述
  4. 修改数据 — actions和getters
    在这里插入图片描述

actions异步实现

在这里插入图片描述

storeToRefs()

  1. store是一个用reactive包装的对象，如果直接对其进行结构，会破坏响应式

  2. 为了解决这个问题，可以使用storeToRefs()函数在这里插入图片描述

  3. 方法可以直接解构

Pinia持久化插件

在这里插入图片描述

大大咧咧40
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值