概述
1. 引用类型与函数区别
引用类型与函数
object是引用类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了。
js中只有函数构成作用域(只有函数的{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会互相影响。
用法
JS中有三种执行上下文类型:
const MyComponent = function(){}; MyComponent.prototype.data = { a:1, b:2 } const component1 = new MyComponent(); const component2 = new MyComponent(); component1.data.a = component2.data.a; component1.data.b = 5; component2.data.b // 5
如果两个实例引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例必须有自己各自的作用域才行,需要通过下列方法进行处理
const Mycomponent = function(){ this.data = this.data(); } Mycomponent.prototype.data = function(){ return { a: 1, b: 2 } }
这样每一个实例的data属性都是独立的,不会互相影响。
这是js本身的特性带来的,跟vue本身设计无关。
参考:
本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛
原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。
原始发表时间:2020-06-08
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句