Vue实例中的数据对象

最新推荐文章于 2024-07-22 13:48:08 发布

i前端小学生

最新推荐文章于 2024-07-22 13:48:08 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_57959437/article/details/116671510

版权

本文探讨了Vue实例中的数据对象，说明如何创建响应式属性，并指出只有在Vue实例创建时就存在的属性才会响应式。同时，介绍了如何使用`Object.freeze()`阻止属性修改，确保数据不可变。此外，还解释了在Vue实例中使用`$`符号来标识内部属性和方法的用途。

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

当一个Vue实例被创建时，它将 data 对象中的所有属性加入到Vue的响应式系统中。当这个属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

代码示例：

// 声明数据对象
var data = { 
    msg: "hello" 
}

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

上面代码中，可以将我们声明的对象赋值到Vue实例中，使用 vm.msg == data.msg 比较时，结果为true。

当我们直接修改Vue实例中data属性的值，结果将会影响到原始数据对象，代码示例：

// 设置Vue实例中的属性会影响到原始数据
vm.msg = "hai"
data.msg // => hai

// ……反之亦然
data.msg = "hello world"
vm.msg // => hello world

只有当Vue实例被创建时就已经存在于data中的属性修改后才是响应式的，如果我们直接操作一个没有在Vue实例中定义的属性，或者是我们直接用赋值的形式为实例添加一个属性，例如：

var vm = new Vue({
	el: '#app',
	data: {
		msg: 'hello'
	}
})
			
vm.val = 'world';

上面代码中的，对 val 属性做修改不会触发任何视图的更新ÿ

关注

专栏目录