位置: IT常识 - 正文

web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)(web前端面试基础知识)

编辑:rootadmin
web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式) 系列文章目录内容参考链接JavaScript 面试高频考点HTML、CSS、JavaScript、ES6、AJAX、HTTP 面试考点 Vue2.x 面试高频考点Vue2.x 面试高频考点Vue3.x新增API生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式Vue3.x升级的重要功能emits属性、生命周期、多事件、Fragment、移出.async、异步组件写法、移出 filter、Teleport、Suspense…Vue3.x响应式Composition API的逻辑复用、Proxy实现响应式Vue3.x深入理解v-model参数用法、watch和watchEffect区别等文章目录系列文章目录一、Vue3 比 Vue2 有什么优势?二、Vue2 和 Vue3 生命周期区别1、Options API 生命周期2、Composition API 生命周期三、如何理解 Composition API 和 Options API1、Composition API 带来了什么2、Composition API 和 Options API 如何选择?3、如何选择4、别误解 Composition API四、如何理解 ref、toRef 和 toRefs1、ref2、ref 扩展(获取模板的dom元素)3、toRef4、toRefs五、ref、toRef 和 toRefs 的最佳使用方式一、Vue3 比 Vue2 有什么优势?性能更好体积更小更好的 ts 支持更好的代码组织更好的逻辑抽离更多新功能二、Vue2 和 Vue3 生命周期区别

推荐整理分享web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)(web前端面试基础知识),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:web前端面试题2021及答案,web前端面试题最新,web前端面试常问知识,web前端面试题最新,web前端面试常问知识,web前端高频面试题,web前端面试宝典,web前端面试宝典,内容如对您有帮助,希望把文章链接给更多的朋友!

App.vue 父组件:

<template> <div> <life-cycles :msg="msg" v-if="flag" /> <button @click="changeHandler">change msg</button> <button @click="changeFlagHandler">change flag</button> </div></template><script>import LifeCycles from "./components/LifeCycles.vue";export default { data() { return { msg: "hello vue3", flag: true, }; }, methods: { changeHandler() { this.msg = "hello vue3" + Date.now(); }, changeFlagHandler() { this.flag = !this.flag; }, }, components: { LifeCycles },};</script>1、Options API 生命周期

LiftCycles.vue 子组件:

Vue2.x 的形式点击按钮进行 组件更新 和 组件销毁(查看控制台输出内容)<template> <p>生命周期 {{ msg }}</p></template><script>export default { name: "LiftCycles", props: { msg: String, }, beforeCreate() { console.log("beforeCreate"); }, created() { console.log("created"); }, beforeMount() { console.log("beforeMount"); }, mounted() { console.log("mounted"); }, beforeUpdate() { console.log("beforeUpdate"); }, updated() { console.log("updated"); }, beforeUnmount() { console.log("beforeUnmount"); }, unmounted() { console.log("unmounted"); },};</script>

2、Composition API 生命周期beforeDestroy 改为 beforeUnmountdestroyed 改为 unmounted其他沿用 Vue2 的生命周期<template> <p>生命周期 {{ msg }}</p></template><script>import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,} from "vue";export default { name: "LiftCycles", props: { msg: String, }, // 等于 beforeCreate 和 created setup() { console.log("setup"); onBeforeMount(() => { console.log("onBeforeMounted"); }); onMounted(() => { console.log("onMounted"); }); onBeforeUpdate(() => { console.log("onBeforeUpdate"); }); onUpdated(() => { console.log("onUpdated"); }); onBeforeUnmount(() => { console.log("onBeforeUnmount"); }); onUnmounted(() => { console.log("onUnmounted"); }); },};</script>

三、如何理解 Composition API 和 Options API

Options API 对比 Composition API:

1、Composition API 带来了什么更好的代码组织更好的逻辑复用更好的类型推导2、Composition API 和 Options API 如何选择?不建议共用,容易引起代码混乱Composition API 用于复杂的业务情况Options API 用于简单的业务情况3、如何选择不建议乱用,会引起混乱小型项目、业务逻辑简单,用 Options API中大型项目、逻辑复杂,用 Composition API4、别误解 Composition APIComposition API 属于高阶技巧,不是基础必会Composition API 是为解决复杂业务逻辑而设计Composition API 就像 Hooks 在 React 中的地位四、如何理解 ref、toRef 和 toRefs1、ref生成值类型的响应式数据可以用于 reactive,也可以用于模板(不需要 .value)用 .value 去修改值所有的 ref 变量,尽量使用 xxxRef 的格式命名,便于区分

Ref.vue 组件

ref 用来定义响应式的值类型reactive 用来定义响应式的引用类型ref 定义的值类型可在 reactive 和 模板中直接使用(不需要 .value)修改值的时候要使用 .value<template> <p>ref demo {{ ageRef }} {{ state.name }}</p></template><script>import { ref, reactive } from "vue";export default { name: "Ref", setup() { const ageRef = ref(21); // 值类型 响应式 const nameRef = ref("杂货铺"); const state = reactive({ name: nameRef, }); setTimeout(() => { console.log("ageRef", ageRef.value); ageRef.value = 18; // .value 修改值 nameRef.value = "前端杂货铺"; }, 1000); return { ageRef, state, }; },};</script>

web前端面试高频考点——Vue3.x新增API(生命周期,ref、toRef 和 toRefs 的理解和最佳使用方式)(web前端面试基础知识)

2、ref 扩展(获取模板的dom元素)

RefTemplate.vue 组件

ref 本身的意思就是一个引用,给它传什么,它就是指向什么传一个 DOM 当然就指向 DOM 了<template> <p ref="elemRef">我是一行文字</p></template><script>import { ref, onMounted } from "vue";export default { name: "RefTemplate", setup() { const elemRef = ref(null); onMounted(() => { console.log('ref template', elemRef.value.innerHTML, elemRef.value); }) return { elemRef, }; },};</script>

3、toRef针对一个响应式对象(reactive)的 prop(属性)创建一个 ref,具有响应式两者保持引用关系

toRef.vue 组件

toRef(对象, "属性") 修改响应式对象的属性改变 ageRef 时, state.age 也会改变改变 state.age 时,ageRef 也会改变<template> <p>toRef demo - {{ ageRef }} - {{ state.name }} - {{ state.age }}</p></template><script>import { reactive, toRef } from "@vue/reactivity";export default { name: "ToRef", setup() { const state = reactive({ age: 20, name: "杂货铺", }); // toRef 如果用于普通对象(非响应式对象),产出的结果不具备响应式 // const state = { // age: 20, // name: '杂货铺' // }// 修改响应式对象(reactive)的一个属性(age) const ageRef = toRef(state, "age"); setTimeout(() => { state.age = 25; }, 1000); setTimeout(() => { ageRef.value = 30; // 用 .value 修改值 }, 2000); return { state, ageRef, }; },};</script>

4、toRefs将响应式对象(reactive 封装)转换为普通对象对象的每个 prop 都是对应的 ref两者保持引用关系

toRefs 组件

toRefs,将响应式对象变为普通对象(仍然具有响应式)对象的每个属性都是对应的 ref<template> <p>toRefs demo {{ ageRef }} {{ nameRef }}</p></template><script>import { toRefs, reactive } from "vue";export default { name: "ToRefs", setup() { const state = reactive({ age: 20, name: "杂货铺", }); // 将响应式对象,变为普通对象 const stateAsRefs = toRefs(state); // 每个属性,都是 ref 对象 const { age: ageRef, name: nameRef } = stateAsRefs; setTimeout(() => { state.age = 25 }, 1000) return { ageRef, nameRef, }; },};</script>

或者这么写(推荐):

直接返回这个普通对象注意此时模板内容也发生了变化,直接写对象里面的属性<template> <p>toRefs demo {{ name }} {{ age }}</p></template><script>import { toRefs, reactive } from "vue";export default { name: "ToRefs", setup() { const state = reactive({ age: 20, name: "杂货铺", }); // 将响应式对象,变为普通对象 const stateAsRefs = toRefs(state); setTimeout(() => { state.age = 25 }, 1000) return stateAsRefs },};</script>

五、ref、toRef 和 toRefs 的最佳使用方式用 reactive 做对象的响应式,用 ref 做值类型的响应式setup 中返回 toRefs(state),或者 toRefs(state, ‘xxx’)ref 的变量命名都用 xxxRef合成函数返回响应式对象时,使用 toRefs

xxx.js 文件

定义函数和响应式对象返回时转为 refimport { toRefs, reactive } from "vue"function useFeatureX() { const state = reactive({ x: 1, y: 2 }) // 逻辑运行状态,省略 N 行 // 返回时转换为 ref return toRefs(state)}export default useFeatureX

xxx.vue 组件

使用时直接写对象的属性就可以export default { setup() { // 可以在不是去响应式的情况下破坏结构 const { x, y } = useFeatureX() return { x, y } } }

不积跬步无以至千里 不积小流无以成江海

这篇文章如果对你有些许帮助,还请铁铁 三连 + 关注 支持一波,优质好文,正在产出…

本文链接地址:https://www.jiuchutong.com/zhishi/297874.html 转载请保留说明!

上一篇:移动端ui框架(好用的移动端ui框架)

下一篇:〖2023·新星计划·第四季〗开启,计算机视觉方向火爆预热中~(新星计划2021)

  • 高档香水品牌大全排行前十名1

    高档香水品牌大全排行前十名1

  • c# listview(C# listview 填写字符)

    c# listview(C# listview 填写字符)

  • 米家石英表怎么调时间(米家石英表怎么强制解绑换手机)

    米家石英表怎么调时间(米家石英表怎么强制解绑换手机)

  • MIUI13怎么恢复原版时钟(miui系统恢复)

    MIUI13怎么恢复原版时钟(miui系统恢复)

  • 抖音直播记录可以隐藏吗(抖音直播记录可以看到访客吗)

    抖音直播记录可以隐藏吗(抖音直播记录可以看到访客吗)

  • iphonex设备管理找不到(iphonex设备管理找不到描述文件)

    iphonex设备管理找不到(iphonex设备管理找不到描述文件)

  • 微信设置仅聊天朋友圈怎么显示(微信设置仅聊天给别人点赞能看见吗)

    微信设置仅聊天朋友圈怎么显示(微信设置仅聊天给别人点赞能看见吗)

  • 对于将运行多个虚拟机的计算机两个硬件要求是什么(在多个已运行的应用程序之间进行切换选择的组合键是)

    对于将运行多个虚拟机的计算机两个硬件要求是什么(在多个已运行的应用程序之间进行切换选择的组合键是)

  • 2.0ah是多少毫安(2.0ah是多少毫安电池比手机电池大吗)

    2.0ah是多少毫安(2.0ah是多少毫安电池比手机电池大吗)

  • 淘宝补差价链接怎么弄(淘宝补差价链接选什么类目)

    淘宝补差价链接怎么弄(淘宝补差价链接选什么类目)

  • 中评对店铺有影响吗(一个中评对网店的影响)

    中评对店铺有影响吗(一个中评对网店的影响)

  • 拼多多退款判订单异常(拼多多退款判订金怎么办)

    拼多多退款判订单异常(拼多多退款判订金怎么办)

  • 网易音乐怎么显示歌词桌面(网易音乐怎么显示车载音乐)

    网易音乐怎么显示歌词桌面(网易音乐怎么显示车载音乐)

  • 华为铃声是什么歌中文(华为铃声是什么名字)

    华为铃声是什么歌中文(华为铃声是什么名字)

  • 对方的电话一直在通话中是怎么了(对方的号码一直在通话中)

    对方的电话一直在通话中是怎么了(对方的号码一直在通话中)

  • 抖音买赞会不会封号

    抖音买赞会不会封号

  • nfc开锁是什么意思(nfc开门功能是什么意思)

    nfc开锁是什么意思(nfc开门功能是什么意思)

  • 向视图与基本视图的区别(向视图基本视图)

    向视图与基本视图的区别(向视图基本视图)

  • 短信字体大小怎么设置(短信字体大小怎么设置小米手机)

    短信字体大小怎么设置(短信字体大小怎么设置小米手机)

  • mipush是什么文件夹(mipush是啥)

    mipush是什么文件夹(mipush是啥)

  • 无线网显示加密不可上网怎么回事(无线网显示加密怎么回事)

    无线网显示加密不可上网怎么回事(无线网显示加密怎么回事)

  • 手机卡显示hd怎样设置(手机卡显示hd怎么取消)

    手机卡显示hd怎样设置(手机卡显示hd怎么取消)

  • 苹果可以下载应用宝吗(苹果可以下载应用的软件还有哪些)

    苹果可以下载应用宝吗(苹果可以下载应用的软件还有哪些)

  • 数据备份是什么意思(数据备份是什么的基础)

    数据备份是什么意思(数据备份是什么的基础)

  • 收藏的图片在哪里找(收藏的图片在哪里找出来)

    收藏的图片在哪里找(收藏的图片在哪里找出来)

  • 共享单车如何找到具体位置(共享单车如何找工作)

    共享单车如何找到具体位置(共享单车如何找工作)

  • iphonexs充电发烫(iphonexs充电发烫是什么原因)

    iphonexs充电发烫(iphonexs充电发烫是什么原因)

  • excel设置标题行(Excel设置标题行高)

    excel设置标题行(Excel设置标题行高)

  • 360安全路由器设置(360安全路由器设置教程)

    360安全路由器设置(360安全路由器设置教程)

  • 做胃镜多少钱及无痛胃镜多少钱(做胃镜多少钱了)

    做胃镜多少钱及无痛胃镜多少钱(做胃镜多少钱了)

  • python中如何使用np.concatenate()拼接numpy数组(python如何运行)

    python中如何使用np.concatenate()拼接numpy数组(python如何运行)

  • 个体工商户怎么补交个人所得税
  • 期初余额有误怎么在本期做调整凭证
  • 研发费用属于哪个费用
  • 流动负债占比低于50%,是什么结构类型
  • 减免税属于政府转移支付吗
  • 优惠政策所得税计算
  • 失业保险稳岗返还是政府补助吗
  • 开票服务费全额抵扣分录
  • 2019小微企业10万免税需要如何办理
  • 外贸企业的会计
  • 车辆报废收入如何处理
  • 什么费用可以列支拆迁补偿费
  • 无形资产后续支出计入什么科目
  • 企业自行去税务开具房租发票税款怎么做?
  • 年薪制离职补偿金如何计算?
  • 通行费机打发票查询
  • 税控盘抵税申报表如何撤销
  • 小规模免征增值税政策
  • 预付油卡怎么入账
  • 合理损耗算入账价值吗
  • 应交税费重分类分录
  • 退还工会经费会退回吗
  • 无偿赠送的原材料怎么处理
  • 纳税申报怎么做
  • 认缴出资额和实缴出资额的时间
  • win11打开软件出现????????
  • php上传进度条
  • 进货返利会计分录
  • php splqueue
  • php .htaccess
  • 查补以前年度收入怎么做会计分录
  • javascript - localStorage 本地存储(新增、删除、修改)使用教程
  • vue项目更新后还是老代码
  • modulenotfounderror
  • 所得税汇算会计处理
  • 购买方享受的现金折扣
  • 财务人员如何做一个合格的党员
  • 建筑行业 营改增
  • mysql "too many connections" 错误 之 mysql解决方法
  • 资产持有过程中缴纳的税收有哪些
  • 非独立核算门市部销售自产应税消费品
  • 短期借款预提利息通过短期借款科目核算
  • 企业所得税季度申报表怎么填
  • 设备转固的前提条件
  • 纳税调整调减有哪些
  • 实收资本什么时候交齐
  • 预付房租收到发票后如何做账
  • 卖二手车买卖
  • 收承兑汇票的利息怎么算
  • 公司注销帐务怎么处理
  • 进项税认证未抵扣怎么做账
  • 加班餐补需要发票嘛
  • 应付账款暂估会计分录怎么写
  • 银行回单借贷标志贷表示什么
  • 营改增后被挂靠的企业如何做账?
  • 史上最简单的不读书法成甲
  • sql2000怎么修改默认实例名
  • Windows移动中心里没有无线网络
  • 神墓凌云
  • win8一键恢复出厂设置
  • linux中的文件
  • 手把手教你安装使用国家反诈中心
  • win32api.exe - win32api是什么进程
  • .exe是什么意思
  • xp administrator隐藏如何找回解决方案
  • linux arp -s
  • win8.1系统怎么样
  • 激活 win7
  • 搭建android开发环境实验原理
  • dos命令语法
  • python定时利用QQ邮件发送天气预报的实例
  • django框架mvt
  • angular实战
  • javascript入门教程
  • 刨根问底造句
  • 如何彻底删除android
  • javascript编程语言
  • jqueryw3c
  • 河北省电子税务局官网app
  • 关于船舶吨税的最新法律规范
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设