极乐门资源网

Vue为什么要谨慎使用$attrs与$listeners
网络编程 2024/11/17 佚名
2 0
极乐门资源网 Design By www.ioogu.com

前言

在 Vue 开发过程中，如遇到祖先组件需要传值到孙子组件时，需要在儿子组件接收 props ，然后再传递给孙子组件，通过使用 v-bind="$attrs" 则会带来极大的便利，但同时也会有一些隐患在其中。

隐患

先来看一个例子：

Vue为什么要谨慎使用$attrs与$listeners

父组件：

{
 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">Vue为什么要谨慎使用$attrs与$listeners


无情……，于是我打开看了看，尤大说了这么一番话我就好像明白了：


Vue为什么要谨慎使用$attrs与$listeners


那既然不是“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" 时，会多收集到一个依赖。


Vue为什么要谨慎使用$attrs与$listeners


会有一个 id 为 8 的 dep 里面收集了 $attrs 所在的 Watcher ，我们再对比一下有无 v-bind="$attrs" 时的 set


派发更新状态：





 set: function reactiveSetter (newVal) {
 var value = getter "text-align: center">Vue为什么要谨慎使用$attrs与$listeners


这里可以明显看到也是 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 产生了一些副作用，对于这两者的使用，建议在没有数据频繁变化时可以使用，或者使用上面的奇淫技巧，以及……把产生频繁变化的部分扔到一个单独的组件中让他自己自娱自乐去吧。


                                

                                

                                     

                                

                                    标签：
                                        
Vue,$attrs,$listeners

                                     

                                
极乐门资源网 Design By www.ioogu.com

                            

                        

                        

                            

                                极乐门资源网
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
极乐门资源网 Design By www.ioogu.com

                        

                            

                                
                                
                                    评论“Vue为什么要谨慎使用$attrs与$listeners”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无Vue为什么要谨慎使用$attrs与$listeners的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com