1.computed
- computed是一种计算属性，用来监听属性的变化；
- computed里面的方法调用的时候不需要加()，并且里面的方法必须要有一个返回值；
- computed里面的方法不是通过事件来去触发的，而是当data中的属性发生了改变的时候会被触发；
- computed最大的特点是当属性没有发生改变的时候，当前方法的值会从缓存中读取。
1 <div id="app">
2 <input type="text" v-model.number="a">
3 <input type="text" v-model.number="b">
4 <button @click="handleAdd()">计算</button>
5 <p>结果为:{{sum}}</p> <!-- 执行methods中的handleAdd()方法后返回的结果 -->
6 <p>computed结果：{{count}}</p> <!-- 执行computed中的count()方法后返回的结果 -->
7 </div>
1 new Vue({
2 el:"#app",
3 data:{
4 a:"",
5 b:"",
6 sum:""
7 },
8 methods:{
9 handleAdd(){
10 this.sum = this.a+this.b; //只有点击事件触发时才会改变
11 }
12 },
13 computed:{
14 count(){
15 return this.a+this.b; //实时监听，只要data中数据发生改变返回的结果就会改变
16 }
17 }
18 })
2. watch
- watch用来监听每一个属性的变化；
- watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数是不需要调用的；
- 当属性发生改变时就会触发watch中的函数,每一个函数都会接受到2个值，一个值是新值，一个是旧值。可以在watch当中进行新旧值的判断来减少虚拟DOM的渲染；
- 只要属性发生改变就会触发它所对应的函数；
- 如果我们需要对对象进行监听的时候，需要将属性设置为key值，val值为一个对象。对象中有2个参数，一个是handler函数，另一个是deep为true，这样才能实现深度监听。
1 <div id="app">
2 <input type="text" v-model.number="a">
3 <input type="text" v-model.number="b">
4 <p>结果:{{sum}}</p>
5 <hr>
6 <input type="text" v-model="obj.name">
7 <input type="text" v-model="obj.age">
8 </div>
1 new Vue({
2 el:"#app",
3 data:{
4 a:"",
5 b:"",
6 sum:"",
7 obj:{
8 name:"pinpinkc",
9 age:18
10 }
11 },
12 watch:{
13 a(newVal,oldVal){
14 if(newVal != oldVal){
15 this.sum = newVal+this.b;
16 }
17 console.log("a发生了改变",newVal,oldVal)
18 },
19 b(newVal,oldVal){
20 this.sum = newVal+this.a;
21 console.log("b发生了改变",newVal,oldVal)
22 },
23 obj:{
24 handler(newVal){
25 console.log("obj发生了改变",newVal)
26 },
27 deep:true
28 }
29 }
30 })
3. computed与watch的区别
- computed在调用的时候不需要加() , watch不需要调用；
- computed如果属性没有发生改变的时候会存缓存中读取值 ， watch当属性发生改变的时候会接受到2个值，一个为新值，一个为旧值；
- computed里面的函数必须要有一个return返回结果；
- watch如果需要监听对象的情况下必须设置深度监听；
- computed里面函数的名称可以随意命名，但是watch中函数的名称必须是data中属性的名称。