数据与方法

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

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
  // 数据对象
  let data = { a: '张三' };
  // 该对象被加入到一个 Vue 实例中
  let vue=new Vue({
     el:"#app",
     data: data

  })
  // 获得这个实例上的属性
  // 返回源数据中对应的字段
  console.log(vue.a == data.a) //结果：true
  // 设置属性也会影响到原始数据
  vue.a = '李四'
  console.log(data.a) //结果：李四
  //反正亦然
  data.a = '王五';
  console.log(vue.a) //结果：王五

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Vue实例里面的data也可以是一个方法，代码如下：

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
  // 数据对象
  let data = { a: '张三' };
  // 该对象被加入到一个 Vue 实例中
  let vue=new Vue({
     el:"#app",
     data(){
      return data
    }
  })
    // 获得这个实例上的属性
    // 返回源数据中对应的字段
    console.log(vue.a == data.a) //结果：true
    // 设置属性也会影响到原始数据
    vue.a = '李四'
    console.log(data.a) //结果：李四
    //反正亦然
    data.a = '王五';
    console.log(vue.a) //结果：王五
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

data为什么要用函数初始化数据而不是对象?

data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己的私有空间，它们只负责维护各自的数据，不会造成混乱。而写成对象形式，所有的组件实例共用了一个data，这样改一个全都改了，可以理解成函数相当于局部作用域，对象相当于全局作用域。

#Vue基础

上次更新: 2022/05/25 12:16:46

← 创建Vue实列生命周期→