vue.js进行数据监听

在表单文本框写入文本时，将文本同步显示

数据监听.gif

实现此效果有多种方式。

事件监听方式

具体代码

keyup事件监听

watch监听

具体代码

watch会自动监听data中定义的数据

watch监听

computed计算属性

具体代码

当computed中用到的数据，有任何一个变动时，就会触发重新计算

computed计算属性

computed vs methods vs watch

• computed 结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用
• methods 表示一个具体的操作，主要用于写业务逻辑
• watch 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体