关于vue3的一些前端面试题

1.ref()

  • 响应式对象
  • 顶级响应式对象,可以在模板中直接使用不用添加 .value,可以直接使用
  • ref() 对像更新,Vue会自动检测更新,然后更新Dom
  • 深层次的对象也可以是响应式,也会被追踪
  • shallowRef() 是ref的浅层次表现,深层次的浅套不起作用
  • triggerRef() 强制触发依赖于一个浅层 ref 的副作用,这通常在对浅引用的内部值进行深度变更后使用。
  • toRef() 复制reactive()内的对象变成 ref
  • toRefs() 复制reactive()内的对象变成 ref`
  const obj = reactive({name: 'wangxuan',age: 18})const rName = toRef(obj, 'name')// rName.value = 'wangxuan'const rObj = toRefs(obj)// rObj.name.value = 'wangxuan'// rObj.age.value = 18

2.reactive()

  • reactive()本身具有响应式,不用添加 .value
  • 深层次的对象也可以是响应式,也会被追踪
  • 深层次的对象,如果只修改了内部属性,不会触发更新,需要使用 shallowReactive(),推出深层次
  • reactive()有局限性,所以推荐使用 ref()

    • 只对对象、数组、Set、Map等具有深层次的响应,不能对 stringnumberboolean等基本类型进行响应式
    • 不能替换整个对象,整个替换会失去响应式
    • 对解构操作不友好。要想结构出到本地对象还是响应式,可以用ref() 对象包裹,例子:
    const state = reactive({count: 0
    })
    // 结构出来的count就失去了响应式
    const { count } = state// 需要这样
    const state = reactive({count: ref(0)
    })
    // 结构出来的count是响应式
    const { count } = state

3.computed

  • 计算属性的返回值也是一个ref()对象,具有响应式。
  • 计算属性会缓存,只有当依赖的响应式发生变化时才会重新计算。
  • 计算属里 不要改变其他状态、在 getter 中做异步请求或者更改 DOM,这些操作可以在watch()中完成
  • 计算属性最好只作为一个只读的属性,官方推荐。
  • 想要更改计算属性的返回值,需要重新写计算属性的getter()setter()方法,一下例子:
  const state = ref('已读')const state1 = ref('回复')// 更改计算属性的返回值const countRef = computed({get: () => {return state.value + ' ' + state1.value},set: (val) => {[state.value, state1.value] = val.split(' ')}})countRef.value = '已读 乱回'console.log(state.value) // 已读console.log(state1.value) // 乱回

4.watch

-浅层监听

  // 监听单个属性watch(state, (newVal, oldVal) => {console.log(newVal, oldVal)})// 监听多个属性,多个属性的监听,newValue是一个位置与监听源一致的数组watch([state, state1], (newVal, oldVal) => {console.log(newVal, oldVal)})// 监听reactive对象, satae对象的任意属性都会被监听// 监听响应式对象的单个属性值的时候需要用getter函数的形式监听watch(()=> state.value, (newVal, oldVal) => {console.log(newVal, oldVal)})// 监听整个响应式对象watch(state, (newVal, oldVal) => {console.log(newVal, oldVal)})// 监听getter函数,函数被调用就会执行watch(()=> sate.value + state1.value, (newVal, oldVal) => {console.log(newVal, oldVal)})

-深层监听添加{deep: true}属性,一般不使用渐层监听其实已经带了,添加{deep: true}会遍历整个监听对象,降低性能没有必要的时候避免使用
-{immediate:true}属性可以在创建监听起的时候就触发监听器
-{once:true}属性只监听一次
-{flush:'pre'}属性在DOM更新前执行监听器
-{flush:'post'}属性在DOM更新后执行监听器
-{flush:'sync'}属性在DOM更新前执行监听器

5.watchEffect

  • 不需要指定监听源,在回调里被用到的响应式属性都会被监听
  • 想要监听的对象,在回调中多个属性被用到都会触发监听
  • watch的区别就在于不需要指定监听源,watchEffect会更高效,写法也会更简洁
  • 在异步回调中使用监听器需要手动停止监听,返回一个停止函数,调用停止函数即可停止监听
const stop = watchEffect(() => {console.log(state.value)
})
stop() // 手动停止监听

6.组件传值

  • 模版引用可以 <ChildComponent ref="childRef" />childRef就是子组件的引用,可以访问自组件所有属性, 子组件要通过defineExpose先暴露属性值
  • 保持单项数据流
  • 双向绑定,子组件使用defineModel()声明,父组件使用v-model绑定,子组件发生改变,父组件也会变化
  • 父组件通过props属性传递数据给子组件
// 父组件 -> 子组件
<ChildComponent :name="name" :age="age" />
// 子组件接收
const props = defineProps({name: String,age: Number,text: String,// 参数校验,必填与默认值text1: {type: String,default: 'hello',required: true}
})// 子组件 -> 父组件
const emit = defineEmits({'change': null,// 事件校验'click': ()=> {return true}})
emit('change', 'hello')// 子组件 -> 父组件
const emit = defineEmits(['change'])
emit('change', {name: 'hello',age: 18
})

7.provide/inject

  • 父组件通过provide传递数据,子组件通过inject接收数据
  • 子组件可以接收父组件传递的数据,也可以接收祖先组件传递的数据
  • 保证数据流是单向的,也可以提供更改父组件数据的方法,在子组件中调用
// 父组件
const state = reactive({name: 'hello',age: 18
})
provide('state', state)// 子组件
const state = inject('state')

8.v-if vs v-for

  • v-if 优先级更高,如果同时使用,v-if先执行
  • 不推荐同时使用

9.v-for 也可以使用 of替代in这样写更接近js的迭代器的语法

作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

JNPF可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。

当然,我更建议大家成为一个全栈,不要把自己的定位局限于前端。

感谢阅读本文

如果有什么建议,请在评论中让我知道。我很乐意改进。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/39928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ollama+OpenWeb UI搭建最简单的大模型交互界面

Open WebUI是一个专为大型语言模型&#xff08;LLMs&#xff09;设计的Web用户界面。这个界面提供了一个直观、响应迅速且易于使用的平台&#xff0c;使用户能够与本地运行的语言模型进行交互&#xff0c;就像与云服务中的模型交互一样。可以非常方便的调试、调用本地模型。你能…

贴片电阻:01A、01B、01C、01D分别是什么意思?

贴片电阻的识别方法&#xff1a; 1、数字索位标称法 (一般矩形片状电阻采用这种标称法) 数字索位标称法就是在电阻体上用三位数字来标明其阻值。它的第一位和第二位为有效数字&#xff0c;第三位表示在有效数字后面所加“0”的个数&#xff0e;这一位不会出现字母。例如&…

测试开发面试题和答案

Python 请解释Python中的列表推导式&#xff08;List Comprehension&#xff09;是什么&#xff0c;并给出一个示例。 答案&#xff1a; 列表推导式是Python中一种简洁的构建列表的方法。它允许从一个已存在的列表创建新列表&#xff0c;同时应用一个表达式来修改或选择元素。…

项目实战-MySQL极佳优化方案---前缀索引

一、应用背景 由于公司项目数据量较大&#xff0c;开发小程序和APP过程中&#xff0c;SQL查询超过1.5s以上的等待时间&#xff0c;因此需要对SQL或者数据表结构设计进行优化。就不讲SQL语句优化啦&#xff0c;而是记录一下数据表结构设计优化的前缀索引实现。 二、MySQL索引 …

python学习-基础1

一.简介 Python的特点和优势是什么&#xff1f; Python是一种解释型语言、动态类型语言、面向对象编程语言&#xff0c;具有丰富的库和广泛的应用领域。 python大小写敏感&#xff0c;靠缩进保证代码的执行 二.Python中的数据类型 Python的八种数据类型八种数据类型分别是…

昇思25天学习打卡营第10天|使用静态图加速

昇思25天学习打卡营第10天|使用静态图加速 前言使用静态图加速背景介绍动态图模式静态图模式 静态图模式的使用场景静态图模式开启方式基于装饰器的开启方式基于context的开启方式 静态图的语法约束JitConfig配置选项静态图高级编程技巧 个人任务打卡&#xff08;读者请忽略&am…

UE4_材质_水体的反射与折射制作_Ben教程

在这个教程中&#xff0c;将制作水的反射和折射&#xff0c;上个教程&#xff0c;我们主要讲了制作水涟漪&#xff08;水面波纹&#xff09;和水滴法线混合&#xff0c;水深计算&#xff0c;我们首先要谈的是反射和产生折射的问题。我们将所有从干扰从场景中分离出去&#xff0…

英伟达(NVIDIA)数据中心GPU介绍

英伟达&#xff08;NVIDIA&#xff09;数据中心GPU按性能由高到低排行&#xff1a; 1. NVIDIA H100 架构&#xff1a;Hopper 核心数量&#xff1a;18352 CUDA Cores, 1456 Tensor Cores 显存&#xff1a;80 GB HBM3 峰值性能&#xff1a; 单精度&#xff08;FP32&#xff09…

一个动画形式的分形树

要在Python中使用matplotlib来创建并展示一个动画形式的分形树&#xff08;例如&#xff0c;基于递归的L系统生成的树&#xff09;&#xff0c;我们需要结合使用matplotlib的动画功能以及递归函数来生成树的形状。下面是一个简单的示例&#xff0c;展示如何使用matplotlib和Fun…

Fish Shell 中创建一个自定义函数来简化命令并复制输出到剪贴板

在 Fish Shell 中创建一个自定义函数来简化命令并复制输出到剪贴板是一个非常实用的技巧。如果你想让这个函数更通用&#xff0c;不仅仅局限于 tree 命令&#xff0c;你可以修改函数定义&#xff0c;使其接受任意命令作为参数。下面是如何创建一个更通用的函数&#xff0c;你可…

Ubuntu + SSH密钥连接服务器

1. 下载VSCode 下载链接 cd到下载文件夹后&#xff0c;使用命令安装&#xff0c;把xxx复制为文件名 sudo dpkg -i xxx.deb2. 为VSCode换皮肤 3. 下载SSH插件 4. 配置SSH 把密钥key文件放在/home/your_user_name/.ssh/里面&#xff0c;然后在/home/your_user_name/.ssh/confi…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【18】认证服务02—微博社交登录

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【18】认证服务02—微博社交登录 微博社交登录图示原理前置准备实现流程完整代码 参考 微博社交登录 OAuth&#xff1a; OAuth&#xff08;开放授权&#xff09;是一个开放标准&#xff0…

Flutter详细使用socketIo实现实时通讯

文章目录 1. NodeJS2. SocketIo3. 服务端实现3.1 Express 4 Flutter总结 1. NodeJS 首先使用Node创建一个服务端&#xff0c;让Node来对所有接受到的数据进行一个获取和存储已经转发。通过在Node中编写接口来对数据进行一个具体的操作。不懂接口可以查看这篇文章。[接口](https…

如何正确面对GPT-5技术突破

随着人工智能技术的快速发展&#xff0c;预训练语言模型在自然语言处理领域取得了显著的成果。其中&#xff0c;GPT系列模型作为代表之一&#xff0c;受到了广泛关注。2023年&#xff0c;GPT-5模型的发布引起了业界的热烈讨论。本文将从以下几个方面分析GPT-5的发布及其对人工智…

Spring Boot2.x教程:(四)Spring Boot2.6及之后版本整合Knife4j的问题

Spring Boot2.6及之后版本整合Knife4j的问题 1、概述2、问题出现原因及解决办法3、拓展3.1、为什么发生这种变化 4、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以扫描下方二维码关注我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、概述 今天在2.7…

java-迭代器

## Java中的迭代器 ### 1. 介绍 迭代器&#xff08;Iterator&#xff09;是Java集合框架中一个重要的接口&#xff0c;用于遍历集合中的元素。迭代器提供了一种通用的方法来访问集合中的每个元素&#xff0c;而不需要了解集合的底层实现。Java中的迭代器支持集合的顺序遍历&a…

文本生成模型API比拼!KimiGPT 和 GLM-4 哪个更适合你?

在当今信息时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展正以前所未有的速度和深度改变着我们的生活和工作方式。随着大数据、计算能力和算法的不断提升&#xff0c;各类大模型的涌现使得AI的应用领域日益广泛&#xff0c;从自然语言处理到图像识别&#…

标准卷积的初始化和详细计算步骤,在代码中哪一步开始更新卷积核(权重)

标准卷积的初始化和详细计算步骤&#xff0c;在代码中哪一步开始更新卷积核&#xff08;权重&#xff09; flyfish 卷积 - 感受野&#xff08;Receptive Field&#xff09; 在卷积神经网络&#xff08;CNN&#xff09;中为什么可以使用多个较小的卷积核替代一个较大的卷积核&…

互联网盲盒小程序的市场发展前景如何?

近几年来&#xff0c;盲盒成为了大众热衷的消费市场。盲盒是一个具有随机性和惊喜感&#xff0c;它能够激发消费者的好奇心&#xff0c;在拆盲盒的过程中给消费者带来巨大的愉悦感&#xff0c;在各种的吸引力下&#xff0c;消费者也愿意为各类盲盒买单。如今&#xff0c;随着盲…

VSCode里python代码不扩展/级联了的解决办法

如图 解决办法&#xff1a;重新下载新的扩展工具 步骤如下 1、在左边工具栏打开Extensions 2、搜索框输入python&#xff0c;选择别的扩展工具&#xff0c;点击Install - 3在扩展工具所在的目录下&#xff0c;新建一个文件&#xff0c;就可以用了