Vue学习笔记-数据
今天开始准备重拾Vue
,学习第一步打开官网文档,第二步照着撸#(赞一个)......
先上个文档,对着看效果更佳。
文档中说:当一个 Vue 实例被创建时,它将
data
对象中的所有的 property 加入到Vue
的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
这里我用官网上的例子撸了一遍
<div id="app">
{{ message }}
</div>
var data = {message: 'Hello Vue!', data: '我是data'};
var app = new Vue({
el: '#app',
data: data
});
结合文档我有以下的疑问,并做了一一验证
1. 我们自定义的data
后加入属性是否也在Vue
的响应式系统中?
不能。data
需要在实例化Vue对象时就定义好,如果有后续用到的property,需要预先赋初值。
data.num = 1; // 在实例化后再添加属性,不ok,会报错
app.massage
得到的是data.massage
的值,那对Vue的实例app
添加属性,是否有用呢?
app.num = 1; // 会和上面报一样的错误
//"[Vue warn]: Property or method 'b' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in <Root>)"
2.app.$data.message
能访问到属性么?
可以。
文档中说:除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀
$
,以便与用户定义的 property 区分开来。
我对其做了一下验证
console.log(app.message === data.message && data.message === app.$data.message); // true
3.如果定义的data
中有属性$data
,那么app.$data
访问的是Vue
实例app
的data
还是自定义data
中的属性$data
?
这么定义直接会报错,所以在自定义的data中属性名不要以$
开头(为了避免属性名与Vue中定义的相同,经过测试如果$
+在Vue实例中不存在的property不会报错)
var data = {message: 'Hello Vue!', data: '我是data', $data: '我是data中的$data'};
// Uncaught SyntaxError: Invalid or unexpected token
4.app.message
、app.$data.message
、data.message
都能访问数据、修改数据使得视图产生"响应"么?
这三种写法都可以对数据进行访问、修改来使得视图发生变化
点击这里可在线编辑调试