V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xubingok
V2EX  ›  Vue.js

在 data 属性外部定义的变量,到底是单个组件实例内部独享还是多个组件实例共享?

  •  
  •   xubingok · 2023-05-19 09:11:59 +08:00 · 1594 次点击
    这是一个创建于 565 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <script>
    	let a = "";
    	export default {
    		data() {
    			return {
    				b: ""
    			};
    		},
    
    
    	};
    </script>
    

    代码如上图所示.环境是 vue2.

    因为一些性能和循环引用问题.想把某些变量放在 data 外面.但是这个组件本身在页面上是多实例的.

    不知是实例内部独享还是多个实例共享呢?

    个人理解:组件似乎在打包过程中变成闭包了?应该是每个实例各自隔离吧?

    6 条回复    2023-05-22 14:42:13 +08:00
    coyoteer
        1
    coyoteer  
       2023-05-19 09:23:38 +08:00
    我试验了一下是共享的
    wu67
        2
    wu67  
       2023-05-19 09:40:36 +08:00
    闭包是值的跨作用域传递...
    ChefIsAwesome
        3
    ChefIsAwesome  
       2023-05-19 09:58:02 +08:00
    你那个 export 的玩意是工厂函数,拿来造组件实例的,不是实例本身啊。
    daliusu
        4
    daliusu  
       2023-05-19 13:41:30 +08:00
    你这跟 vue 半毛钱关系没有把,你把一个对象放在 data 外边,data 是每次实例创建的时候调用一下 return 一个新的对象,但是这个对象内部一些属性引用的不还是你外边的对象吗?如果不想,你可以 deepclone 一下,或者把这个外部对象也改写成调用函数获取的形式,const getData = () => ({x:1})
    xubingok
        5
    xubingok  
    OP
       2023-05-22 11:07:32 +08:00
    懂了!醍醐灌顶!感谢各位解惑!
    xubingok
        6
    xubingok  
    OP
       2023-05-22 14:42:13 +08:00
    那如果不需要加入响应式,但又每个实例隔离的话,怎么写呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5511 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 08:00 · PVG 16:00 · LAX 00:00 · JFK 03:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.