五，computed选项和methods的区别

一，computed选项

computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

简单来说就是以下三点功能

• 1.对数据的监听，数据变化时触发
• 2.有缓存
• 3.如果监听的数据没有变化就从缓存中取值

那么methods选项和computed选项相同的功能都能实现，那么他们之间的区别就是
methods需要事件驱动来执行，无缓存，每次执行时需要重新计算

那么我们就举一个例子，分别用computed和methods来实现，输入长宽算面积

长<input type="text" v-model="height"><br>
 宽<input type="text" v-model="width"><br>
 面积<P >{{fn}}</P>
 面积<P>{{fn}}</P>
 面积<P>{{fn}}</P>
</div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){ 
            return{
             height:0,
             width:0
            }
        },
        //放置各种功能函数
        computed:{
            fn(){
                console.log("执行computed一次");
                return this.height * this.width;
                
      
      }
        
        }

5.gif

这个computed是实现了对数据的监听,数据发生变化时触发,而且还有一个缓存的机制,就是当多次调用时(当值不改变的情况下)整个业务逻辑只执行一次,提升性能
computed:

例
虽然面积这个方法调用了3次,但是执行了一次,非常提升性能

---

methods里面的业务逻辑整个执行了多次

长<input type="text" v-model="height"><br>
 宽<input type="text" v-model="width"><br>
 面积<P >{{fn()}}</P>
 面积<P>{{fn()}}</P>
 面积<P>{{fn()}}</P>
</div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){ 
            return{
             height:0,
             width:0
            }
        },
       
        methods:{
            fn(){
                console.log("执行computed一次");
                 return this.height * this.width;
            }
        }

例

执行了三次,不如computed性能好