18丨习题解答(1)
具体的还是使用了Object.defineProperty的API
看代码
input框在输入后会触发修改this.info.name的行为,
在父组件里面,我们之生命了info这个对象。这个info里面有没有这个name字段,我们是不知道的。并没有声明name的key
现在依然在子组件内成功的修改了父组件的内容。
这段代码放开,在created生命周期中,声明了一个带name属性的this.temp临时对象,然后对这个name的key做了个proxy的代理。
修改的时候,控制台直接输出了警告信息。
那么我不直接更改,让父组件来更改。
proxy具体做了什么,精简了 vue的底层更新机制,
isUpdatingChildComponent.如果我是子组件回调过来的,这里值做了改变。设置为true
上面设置为true就绕过了if的提示,这是vue底层去做这样一件事情,也是通过这样的一个机制。在我们组件更新的时候,如果是父组件触发的组件的更新,它会有一个标志位,
习题2
返回值就是this。如果想要返回值,就可以使用回调参数的形式来解决这个问题。
最后一个参数是一个回调
这个回调就是在父组件内handleEventChange方法的第二个参数callback。如果子组件需要父组件传递过来的值,然后我就使用这个callback把这个值传递过去就可以了。而不是使用return的形式。
问题3
都写了v-solt:title,后面的会替换前面的。
老语法
问题4
通过父组件传递一个validate,就是校验的一个函数,来去非空校验和合法的校验,合格校验我们使用正则判断11位的手机号。
message比较简单
具体什么时候调用,watch监听这个手机号
11位的时候正常显示。
问题5
直接看demo
每次添加添加都会添加一个文本框+删除的按钮。
分别在输入框内输入
这个时候删除第二个
删除222,但是最后显示如下,却把333给删除了。
每次添加push了一个key
循环的时候用了index做为key
children里面是一个文本框,里面维护了phone的信息。
删除的222也就是删除了我的第二条信息,当我删除第二条信息之后,然后组件开始更新,更新完成层后这个list变成了1、2,key也变成了1、2。但是我实际上删除是第二条信息。
最后就变成了我留了我的第二条信息。把第三条信息给删除了。
用传入的key作为key
删除222
删除后
这就是我们用index做为key很容易引起的bug问题。如果你用一个span或者div原生的html元素 因为内部没有状态,可能不会出现这样的问题。但是依然还是有性能的问题的
问题6
‘
结束
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET制作智能桌面机器人:结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(四):结合BotSharp
· Vite CVE-2025-30208 安全漏洞
· 《HelloGitHub》第 108 期
· MQ 如何保证数据一致性?
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
2019-04-28 Flutter实战视频-移动电商-58.购物车_删除商品功能制作
2019-04-28 Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段
2019-04-28 Flutter实战视频-移动电商-56.购物车_商品数量控制区域制作
2019-04-28 Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
2019-04-28 TypeScript完全解读(26课时)_6.TypeScript完全解读-泛型
2019-04-28 TypeScript完全解读(26课时)_5.TypeScript完全解读-函数