山地人

响应式数据

山地人
山地人
2021-05-13

前面,我们说到data里的数据是响应式的,响应式的数据当数据发生变化时,界面上关联的数据也跟着发生了变化。

为了验证counter响应式数据,我们在下面的例子里加入了一个定时器,用它不停改变counter的值,浏览器里的数字也跟着不停改变。

结构分析

  • mounted() 这个函数会在Vue将生成的DOM挂载到页面后,被调用。
  • this.counter 可以访问到data中定义的counter字段
  • counter被修改后,Vue内部的机制会通知页面上有这个counter字段的地方重新渲染。

原生JavaScript写法

下面的写法,我们不借助任何JavaScript框架,使用原生JavaScript来实现类似的功能。

练一练

修改上面的例子,将counter字段更换成别的字段,体会Vue的响应式数据的机制。