华山资源网

Vue为什么要谨慎使用$attrs与$listeners
网络编程 2024/12/23 佚名
3 1

前言

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


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

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