文章来自 https://mp.weixin.qq.com/s/nJsfOUNNKYQdvB9o9BXVVQ

1. Vue2.x 和 Vue3.x 生命周期方法的变化

文档地址:https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

Vue2.x 和 Vue3.x 生命周期方法的变化蛮大的,先看看:

2.x 生命周期 3.x 生命周期 执行时间说明
beforeCreate setup 组件创建前执行
created setup 组件创建后执行
beforeMount onBeforeMount 组件挂载到节点上之前执行
mounted onMounted 组件挂载完成后执行
beforeUpdate onBeforeUpdate 组件更新之前执行
updated onUpdated 组件更新完成之后执行
beforeDestroy onBeforeUnmount 组件卸载之前执行
destroyed onUnmounted 组件卸载完成后执行
errorCaptured onErrorCaptured 当捕获一个来自子孙组件的异常时激活钩子函数

2. script-setup 模式中父组件获取子组件的数据

文档地址:https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

这里主要介绍父组件如何去获取子组件内部定义的变量,关于父子组件通信,可以看文档介绍比较详细:https://v3.cn.vuejs.org/guide/component-basics.html

我们可以使用全局编译器宏defineExpose宏,将子组件中需要暴露给父组件获取的参数,通过 {key: vlaue}方式作为参数即可,父组件通过模版 ref 方式获取子组件实例,就能获取到对应值:

// 子组件
<script setup>
let name = ref("pingan8787")
defineExpose({ name }); // 显式暴露的数据,父组件才可以获取
</script> // 父组件
<Chlid ref="child"></Chlid>
<script setup>
let child = ref(null)
child.value.name //获取子组件中 name 的值为 pingan8787
</script>

注意

  • 全局编译器宏只能在 script-setup 模式下使用;
  • script-setup 模式下,使用宏时无需 import可以直接使用;
  • script-setup 模式一共提供了 4 个宏,包括:defineProps、defineEmits、defineExpose、withDefaults。

1、 vue3项目本地热更新时报错TypeError: parentComponent.ctx.deactivate is not a function

解决方法: 在keep-alive、component上设置key进行排序(即加个key)

3、vue3中为什么不可以用this?

  因为vue3中的setup方法是在befoerCerate生命函数之前进行的,并没有任何data数据,所以也就不存在this,因此也可以使用箭头函数。

4、使用ref动态绑定

<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p> <!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component> <!-- 当动态绑定时,我们可以将 ref 定义为回调函数,显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>

关于 ref 注册时机的重要说明:因为 ref 本身是作为渲染函数的结果而创建的,在初始渲染时你不能访问它们——它们还不存在!$refs 也是非响应式的,因此你不应该试图用它在模板中做数据绑定。

vue3项目一些小坑的更多相关文章

  1. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  2. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  3. vue项目向小程序迁移调研

    概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...

  4. EF Core 小坑:DbContextPool 会引起数据库连接池连接耗尽

    DbContextPool 是 ASP.NET Core 2.1 引入的新特性,可以节省创建 DbContext 实例的开销,但没有想到其中藏着一个小坑. 最近有一个 ASP.NET Core 项目持 ...

  5. EF Core HasQueryFilter 的小坑

    这是今天在实际项目中遇到的一个问题,Entity Framework Core 2.2 生成了下面的 SQL 语句,INNER JOIN 部分丑陋的 SQL 语句让人无法忍受. SELECT TOP( ...

  6. net core 小坑杂记之配置文件读取(不定期更新)

    其实很早就想写了,原想等积累差不多了再写的,但是发现遇到一个当时记下效果会比较好,所以就不定期更新这个系列了,后面获取会整个整理一下. 此篇记载net core入门时踩的一些坑,网上教程太少了,也不规 ...

  7. vue移动端flexible.js结合Muse-ui使用和vux的小坑

    因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么 ...

  8. 首个threejs项目-前端填坑指南【转】

    http://www.cnblogs.com/pursues/p/5226807.html 第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水 ...

  9. 【手记】小心在where中使用NEWID()的大坑 【手记】解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题 【C#】组件分享:FormDragger窗体拖拽器 【手记】注意BinaryWriter写string的小坑——会在string前加上长度前缀length-prefixed

    [手记]小心在where中使用NEWID()的大坑 这个表达式: ABS(CHECKSUM(NEWID())) % 3 --把GUID弄成正整数,然后取模 是随机返回0.1.2这三个数,不可能返回其它 ...

  10. Excel催化剂开源第13波-VSTO开发之DataGridView控件几个小坑

    Excel催化剂内部大量使用了DataGridView,这其中有一些小坑,花了力气才解决的,在此给广大开发者作简单分享. 为何要使用DataGridView而不是其他控件如ListBox.ListVi ...

随机推荐

  1. 《机器人SLAM导航核心技术与实战》第1季:第4章_机器人传感器

    <机器人SLAM导航核心技术与实战>第1季:第4章_机器人传感器 视频讲解 [第1季]4.第4章_机器人传感器-视频讲解 [第1季]4.1.第4章_机器人传感器_惯性测量单元-视频讲解 [ ...

  2. 【分析笔记】NXP PCF85263 设备驱动分析笔记

    驱动移植 供应商无法提供相应的驱动程序,不过在 linux 最新的内核倒是有一份 pcf85363 的驱动,看代码并核对寄存器功能,是可以兼容 pcf85263 芯片.只是我们用的内核比较老 linu ...

  3. DataX二次开发——新增HiveReader插件

    一.研发背景 DataX官方开源的版本支持HDFS文件的读写,并没有支持基于JDBC的Hive数据读写,很多时候一些数据同步不太方便,比如在读取Hive之前先执行一些sql.读取一些Hive的视图数据 ...

  4. 1月9日内容总结——linux相关知识简介、虚拟化软件vmware、远程链接工具xshell

    目录 一.linux常见岗位 二.计算机的种类与服务器 三.服务器品牌 四.服务器内部组成 五.服务器磁盘阵列 六.linux简介 1.什么是linux 2.linux发展史 3.Linux系统的特点 ...

  5. ChatGPT与人工智能

    一.ChatGPT相关信息 1.微软新版Bing搜索引擎集成ChatGPT,访问地址:https://www.bing.com/new 2.谷歌版ChatGPT灾难级发布,市值一夜狂跌7000亿,熬夜 ...

  6. Docker安装elasticsearch、kibana

    一.Docker 安装elasticsearch 7.10 1. 拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.10 ...

  7. STM32F4库函数初始化系列:三重ADC——DMA

    1 void _DMA_Configuration(void) 2 { 3 DMA_InitTypeDef DMA_InitStructure; 4 5 /* DMA2 Stream0 channel ...

  8. setInterval()的使用

    setInterval() 作用  这个函数可以将一个函数每隔一段时间执行一次 参数  1.回调函数,该函数会每隔一段时间被调用一次  2.每次调用间隔的时间,单位是毫秒 返回值  返回一个Numbe ...

  9. openfoam UPstream类探索(二)

    前言 接上次的博文,本篇补全以下几个函数的介绍: Pstream::nProcs() Pstream::parRun() UPstream::exit() 简述几个常用的函数如下: Pstream:: ...

  10. Docker安装配置Oracle详细教程(以作持久化处理)

    Docker安装Oracle 1,拉取Oracle镜像,拉取成功后查看  docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11 ...