computed计算属性和 watch监听属性以及他们的区别

一.computed与watch的异同

不同点

1.触发条件不同
  computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。

  watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。

2.执行速度不同
  computed计算属性的值是直接从缓存中获取，而不是重新编译执行一次，因而其性能要高一些，尤其是在data属性中的值无变化，而重复调用computed回调函数时更是如此，所以说在Vue中，应该尽可能的多使用computed替代watch。

  watch中的值需要data属性重新编译执行，因而其性能方面会有所损失。

3.使用方式不同
  computed计算属性的回调函数方法可以直接在页面中通过插值表达式——{{}}来获取。此时我们不需要再data数据域中再定义一个与方法名相同的属性。

  watch中的方法名必须是data数据域中所存在的，否则无法使用。

相同点
  都可以实现通过监控data数据域中属性值的变化来触发相应的回调函数，进而实现我们特殊的逻辑业务处理功能。

总结：

注意：

1.computed能做的watch都可以做，watch可以做的，computed不一定能做

  2.使用vm.$watch方法时，需要使用普通函数

   3.对于定时器，函数回调，ajax回调,promise回调,建议使用箭头函数

二： computed计算属性

        规则：

        1.用已有的属性计算不存在的属性

         2.默认调用一次get()

        3.简写：只有值不发生改变才可以是用简写（函数），

         值发生改变必须使用对象，才可以配置set()方法

        4.底层原理使用Object.definproperty(目标对象,键名,{get(){},set(value){}})

        5.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

例如：

  <div id="app">
        <div>
            <h1>今天的天气{{str}}</h1>
            <h2>{{userName}}</h2>
            <h3>{{obj.id}}</h3>
            <button @click="func()">点击切换天气</button>
        </div>
    </div>

  Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                bool:true,
                userName:"",
                obj:{
                    id:99,
                }
            }
        },
        methods: {
            func(){
                this.bool = !this.bool;
            }
        },
        computed:{
            str(){
                return this.bool?"炎热":"凉爽"
            }
        },

三，watch监听属性

 规则：

        1.监听已存在的属性

        2.immediate:true默认调用一次，false不会

        3.简写：只有handler方法才可以简写。写法:监听的属性(新值,旧值){}

        4.监听对象中的值需要深度监听，deep:true

例如：

 watch:{
            obj:{
                immediate:false,
                deep:true,
                handler(newVlaue,oldValue){
                    console.log("--------obj-------");
                    console.log(newVlaue);
                    console.log(oldValue);
                }
            },
            bool:{
                immediate:true,
                handler(newVlaue,oldValue){
                    console.log(newVlaue);
                    console.log(oldValue);
                    if(newVlaue==true){
                        this.userName = "张三";
                        this.obj.id = 100;
                    }else{
                        this.userName = "李四";
                        this.obj.id = 99;
                    }
                }
            },
            str(newVlaue,oldValue){
                console.log(newVlaue);
                console.log(oldValue);
                console.log(this);
            }
        },
        directives:{

        }
    })
    vm.$watch("userName",function(newVlaue,oldValue){
            console.log("--------userName---------");
            console.log(newVlaue);
            console.log(oldValue);
            console.log(this);
            console.log(this.bool);
    })

      效果图如下：

——————————————总结————————————

1.

computed属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。computed属性通常用于处理需要根据其他响应式数据计算得出的值的情况，例如过滤和排序、数组计算等。computed属性的原理是使用了一个getter函数和一个setter函数来实现，并将计算结果缓存起来，以提高性能和减少计算次数。

2.

watch监听属性值是包括选项的对象：选项包括有三个。 1.第一个 handler：其值是一个回调函数。即监听到变化时应该执行的函数。 2.第二个是 deep：其值是 true 或 false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。) 3.第三个是 immediate：其值是 true 或 false；确认是否以当前的初始值执行 handler 的函数。