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 都能访问数据、修改数据使得视图产生"响应"么？

这三种写法都可以对数据进行访问、修改来使得视图发生变化

点击这里可在线编辑调试