前言

⚠️ 下面介绍的内容中，有部分是目前还没有接触到的知识点，比如 v-on 指令，事件绑定，等等。这些内容都会在后续笔记中介绍到。对于这些内容，暂时不要求会写，只要求能大致看懂是啥含义即可。

比如 v-on:click="handleClick"表示绑定一个点击事件，事件处理函数为 handleClick。

第3节数据与方法 - 图1

重点内容

「数据响应式」
Object.freeze()

参考资料

「vue」Vue 实例：链接

数据响应式

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据与方法</title>
</head>
<body>
  <div id="app">
    {{ a }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 我们的数据对象
    var data = {
      a: 1
    }
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      el: "#app",
      data: data
    })
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a // => true
    console.log(vm.a === data.a) // => true
    // 1s
    setTimeout(() => {
      // 设置 property 也会影响到原始数据
      vm.a = 2
      data.a // => 2
      console.log(vm.a, data.a) // => 2 2
    }, 1000);
    // 2s
    setTimeout(() => {
      // ……反之亦然
      data.a = 3
      vm.a // => 3
      console.log(vm.a, data.a) // => 3 3
    }, 2000);
  </script>
</body>
</html>

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据与方法</title>
</head>
<body>
  <div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var obj = {
      foo: 'bar'
    }
    Object.freeze(obj)
    new Vue({
      el: '#app',
      data: obj
    })
  </script>
</body>
</html>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 **$**，**以便与用户定义的 property 区分开来**。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据与方法</title>
</head>
<body>
  <div id="app">
    <p>{{ a }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var data = {
      a: 1
    }
    var vm = new Vue({
      el: '#app',
      data: data
    })
    vm.$data === data // => true
    vm.$el === document.getElementById('app') // => true
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
      console.log('a 改变之前的值是：', oldValue); // => a 改变之前的值是： 1
      console.log('a 改变之后的值是：', newValue); // => a 改变之后的值是： 123
    })
    vm.$data.a = 123;
  </script>
</body>
</html>

以后你可以在 API 参考中查阅到完整的实例 property 和方法的列表。

第3节 数据与方法

前言

数据响应式

第3节数据与方法