6.数据与方法---(vue入门 文档学习记录)
程序员文章站
2022-06-06 19:05:41
...
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
我们首先分析一下上面的代码:
1.可以先声明对象,再将对象加入到Vue实例中,使其加入到响应式系统中,并且在数据data声明后的任意地方对其进行重新赋值,都可以直接响应到vue实例中反馈到页面上.
2.vue实例中的数据调用方式
在js中 :vm.a 与data.a
在页面上{{a}}
3.vm.a == data.a 并且对两个式子中任意一个重新赋值.另外的值也随之改变,这就是双向绑定.
4.只有vue实例被创建时data中存在的属性才是响应式的.以后添加的属性都不是.
5.Object.freeze()方法可以用来阻止vue参数改变时的响应,原理(TODO),猜测是解掉了双向绑定,感觉双向绑定是使用的中间件(或者是对象)来实现的.这里先猜测一下,具体的原理,循序渐进的学吧.但是看看下面是object.freeze()的用法:
<body>
<div>
<span id="app8">
{{message}}
</span>
</div>
<script>
var data={
message:"dddd"
}
Object.freeze(data)
var vm= new Vue({
el:"#app8",
data:data
})
data.message=4
</script>
</body>
方法的调用放在了data声明与vue声明之间,这时,可以阻断.
那么放在它们两个下面呢?
<div>
<span id="app8">
{{message}}
</span>
</div>
<script>
var data={
message:"dddd"
}
var vm= new Vue({
el:"#app8",
data:data
})
Object.freeze(data)
data.message=4
</script>
这时发现页面仍然可以响应数据的变化.
所以,该方法只是阻断了两者的绑定,如果两者已经绑定了,那么,这个方法将没有任何效果.