MENU

Vue学习笔记-数据

• December 5, 2020 • Read: 559 • Code

今天开始准备重拾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实例appdata还是自定义data中的属性$data

这么定义直接会报错,所以在自定义的data中属性名不要以$开头(为了避免属性名与Vue中定义的相同,经过测试如果$+在Vue实例中不存在的property不会报错)

var data = {message: 'Hello Vue!', data: '我是data', $data: '我是data中的$data'};
// Uncaught SyntaxError: Invalid or unexpected token 

4.app.messageapp.$data.messagedata.message 都能访问数据、修改数据使得视图产生"响应"么?

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

点击这里可在线编辑调试

1607151536GZ.png