Vue数据监听（watch、computed、keyup）
1、watch
watch的使用方法
（1）简单监听
（2）深度监听
（3）监听数据变化并执行某个方法
（1）简单监听
watch: { mydata(val, newval) { console.log(val) console.log(newval) } }
（2）深度监听
watch: { myData: { handler(newVal) { this.change_number++ }, deep: true } }
（3）监听数据变化并执行某个方法
watch: { mydata： 'changeData' // 值可以为methods的方法名 }， methods: { changeData(curVal,oldVal){ conosle.log(curVal,oldVal) } }
watch监听数据变化详解见这里：https://www.cnblogs.com/meiyanstar/p/14047456.html
watch监听路由变化详解见这里：https://www.cnblogs.com/meiyanstar/p/14047622.html
2、computed计算属性
在computed中，可以定义一些属性，这些属性叫作计算属性。
计算属性的本质：就是一个方法，只不过在我们使用这些计算属性的时候，是把它们的名称直接当作属性来使用，并不会把计算属性当作方法去调用。
注意1：
- computed和methods平级
- 计算属性，在引用时，不要加（）去调用，直接当作普通属性去使用就好了
- 只要计算属性的function内部，所用到的任何data中的数据发生了变化，就会重新计算这个计算属性的值。
<body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', }, methods: {}, watch: {}, computed: { 'fullname': function(){ return this.firstname + '-' + this.lastname } } }); </script> </body>
注意2：
- fullname没有在data中定义
- 在computed定义fullname后直接return出去就好
- 计算属性的求值结果，会被缓存起来，方便下次直接使用;如果计算属性方法中所有的任何属性都没有发生变化，则不会重新对计算属性求值。
3、利用keyup事件来实现，结合methods
在input标签里绑定keyup事件
<input type="text" v-model="firstname" @keyup="getFullname"> + <input type="text" v-model="lastname" @keyup="getFullname"> = <input type="text" v-model="fullname">
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullname() {
this.fullname = this.firstname + '-' + this.lastname
}
}
});
总结对比
- watch:主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是
computed和methods的结合体 - computed:属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
- methods:方法表示一个具体的操作，主要书写业务逻辑。
