Vue --- 区分vm.$data.msg、data.msg、vm.msg

最新推荐文章于 2023-06-21 09:30:51 发布

VGtime

最新推荐文章于 2023-06-21 09:30:51 发布

阅读量2k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/jkr10000/article/details/112724471

版权

本文探讨Vue实例中vm.$data.msg、data.msg与vm.msg的区别。Vue在创建实例时，将data对象的property加入响应式系统。vm.msg直接引用data.msg，两者通常指向同一地址，但在某些情况下，如在生命周期钩子之间赋值，仅修改data.msg不会触发视图更新。Vue实例的$data属性提供了一种访问data中属性的方式，而vm.msg则用于描述实例的msg属性，$watch监听通常基于vm对象。Vue实例还提供了许多以$开头的方法和property。

摘要由CSDN通过智能技术生成

上代码：

<body>
	<div id="app">
		{
   {
   msg}}
	</div>
	<script>
		let datas = {
      //声明一个名为data的对象
			msg: "hello"
		}
		let vm = new Vue({
   
			el: '#app',
			data: datas   //把声明的date对象赋值给date属性
		})
		//现在，有三种方法可以获取到msg的值
		console.log(datas.msg);  //=> hello
		console.log(vm.msg);	//=> hello
		console