前言
在 Vue
开发过程中,如遇到祖先组件需要传值到孙子组件时,需要在儿子组件接收 props
,然后再传递给孙子组件,通过使用 v-bind="$attrs"
则会带来极大的便利,但同时也会有一些隐患在其中。
隐患
先来看一个例子:
父组件:
{ template: ` <div> <input type="text" v-model="input" placeholder="please input"> <test :test="test" /> </div> `, data() { return { input: '', test: '1111', }; }, }
子组件:
{ template: '<div v-bind="$attrs"></div>', updated() { console.log('Why should I update"text-align: center">![]()
无情……,于是我打开看了看,尤大说了这么一番话我就好像明白了:
那既然不是“bug”,那来看看是为什么吧。
前因
首先介绍一个前提,就是
Vue
在更新组件的时候是更新对应的data
和props
触发Watcher
通知来更新渲染的。每一个组件都有一个唯一对应的
Watcher
,所以在子组件上的props
没有更新的时候,是不会触发子组件的更新的。当我们去掉子组件上的v-bind="$attrs"
时可以发现,updated
钩子不会再执行,所以可以发现问题就出现在这里。原因分析
Vue
源码中搜索$attrs
,找到src/core/instance/render.js
文件:export function initRender (vm: Component) { // ... defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true) defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true) }噢,amazing!就是它。可以看到在
initRender
方法中,将$attrs
属性绑定到了this
上,并且设置成响应式对象,离发现奥秘又近了一步。依赖收集
我们知道
Vue
会通过Object.defineProperty
方法来进行依赖收集,由于这部分内容也比较多,这里只进行一个简单了解。Object.defineProperty(obj, key, { get: function reactiveGetter () { const value = getter "htmlcode">Object.defineProperty(obj, key, { set: function reactiveSetter (newVal) { const value = getter "htmlcode">notify () { // stabilize the subscriber list first const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } }了解到这些基础后,我们再回头看看
$attrs
是如何触发子组件的updated
方法的。要知道子组件会被更新,肯定是在某个地方访问到了
$attrs
,依赖被收集到subs
里了,才会在派发时被通知需要更新。我们对比添加v-bind="$attrs"
和不添加v-bind="$attrs"
调试一下源码可以看到:get: function reactiveGetter () { var value = getter "$attrs" 时,会多收集到一个依赖。会有一个
id
为8
的dep
里面收集了$attrs
所在的Watcher
,我们再对比一下有无v-bind="$attrs"
时的set
派发更新状态:
set: function reactiveSetter (newVal) { var value = getter "text-align: center">![]()
这里可以明显看到也是
id
为8
的dep
正准备遍历subs
通知Watcher
来更新,也能看到newVal
与value
其实值并没有改变而进行了更新这个问题。
问题:$attrs 的依赖是如何被收集的呢?
我们知道依赖收集是在
get
中完成的,但是我们初始化的时候并没有访问数据,那这是怎么实现的呢?答案就在
vm._render()
这个方法会生成Vnode
并在这个过程中会访问到数据,从而收集到了依赖。那还是没有解答出这个问题呀,别急,这还是一个铺垫,因为你在
vm._render()
里也找不到在哪访问到了$attrs
...柳暗花明
我们的代码里和
vm._render()
都没有对$attrs
访问,原因只可能出现在v-bind
上了,我们使用vue-template-compiler
对模板进行编译看看:const compiler = require('vue-template-compiler'); const result = compiler.compile( // ` // <div :test="test"> // <p>测试内容</p> // </div> // ` ` <div v-bind="$attrs"> <p>测试内容</p> </div> ` ); console.log(result.render); // with (this) { // return _c( // 'div', // { attrs: { test: test } }, // [ // _c('p', [_v('测试内容')]) // ] // ); // } // with (this) { // return _c( // 'div', // _b({}, 'div', $attrs, false), // [ // _c('p', [_v('测试内容')]) // ] // ); // }这就是最终访问
$attrs
的地方了,所以$attrs
会被收集到依赖中,当input
中v-model
的值更新时,触发set
通知更新,而在更新组件时调用的updateChildComponent
方法中会对$attrs
进行赋值:// update $attrs and $listeners hash // these are also reactive so they may trigger child update if the child // used them during render vm.$attrs = parentVnode.data.attrs || emptyObject; vm.$listeners = listeners || emptyObject;所以会触发
$attrs
的set
,导致它所在的Watcher
进行更新,也就会导致子组件更新了。而如果没有绑定v-bind="$attrs"
,则虽然也会到这一步,但是没有依赖收集的过程,就无法去更新子组件了。奇淫技巧
如果又想图人家身子,啊呸,图人家方便,又想要好点的性能怎么办呢?这里有一个曲线救国的方法:
<template> <Child v-bind="attrsCopy" /> </template> <script> import _ from 'lodash'; import Child from './Child'; export default { name: 'Child', components: { Child, }, data() { return { attrsCopy: {}, }; }, watch: { $attrs: { handler(newVal, value) { if (!_.isEqual(newVal, value)) { this.attrsCopy = _.cloneDeep(newVal); } }, immediate: true, }, }, }; </script>总结
到此为止,我们就已经分析完了
$attrs
数据没有变化,却让子组件更新的原因,源码中有这样一段话:// $attrs & $listeners are exposed for easier HOC creation. // they need to be reactive so that HOCs using them are always updated
一开始这样设计目的是为了
HOC
高阶组件更好的创建使用,便于HOC
组件总能对数据变化做出反应,但是在实际过程中与v-model
产生了一些副作用,对于这两者的使用,建议在没有数据频繁变化时可以使用,或者使用上面的奇淫技巧,以及……把产生频繁变化的部分扔到一个单独的组件中让他自己自娱自乐去吧。免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com暂无“Vue为什么要谨慎使用$attrs与$listeners”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】