关于vue data 值传递的理解

示例代码

data() {
		// 定义对象变量（与表单无关）
		let form2 = {
		  name: '',
		  password: '223',
		  hello: 'hello world',
		}

		// 打桩输出
		console.log("this is form2:")
		console.log(form2)

		// 延时变更变量对象
		setTimeout(()=>{
		  delete form2.hello
		},5000)

		// 返回对象
		return {
		  form: form2,
		  rules: {
		    name: [
		      // 地址传递
		      // { validator: validator.validContrastDate(form2), trigger: ['blur', 'change'] },
		      // 固定值传递
		      { validator: validator.validContrastDate(form2.password), trigger: ['blur', 'change'] },
		    ]
		  }
		}
	}

个人理解

1. 当页面首次加载时，data中会按顺序执行代码（定义对象变量、打桩输出、延时变更对象、返回对象），且只执行一次；
2. 与页面表单进行值绑定的不是data 中的form2 变量对象，而是return 中的新建的对象form（与表单绑定:model 同名）属性；
3. 关于return 中值传递问题，对于地址传递，对象地址在首次加载时便传入方法中，且后续操作不会变更该地址值，当对象中属性值变化时，会自动更新；对于固定值传递同理，首次加载传入固定值，且值不会因后续操作而变化；
   如示例
   （1）对于地址传递：首次加载传入form2的地址，后续表单name 值变化触发校验，会将绑定的form2 的值传递到校验方法中；
   （2）对于固定值传递：首次加载传入form2.password 固定值，后续name 值变化触发校验，但该值在首次加载时传入，且不可被改变，故校验中获取的还是初始固定值；
4. 关于表单值变化时，会实时的响应到data return 中的form 对象里，而不会更新到data 中的form2 里；故data 中的form2 只是在内存中开辟一块空间，存放一个变量对象，用于传递return 中form 的一个媒介；
5. 关于获取data 中form2 变量对象，可通过获取return 中的form 来获取，但如果form2 中的属性与return 中form 的属性同名，则会被return form 中的覆盖；

【以上内容通过极简化汇总，并由个人整理所得，如有错误，希望留言提出，大家一起共同学习。】