vue 之 watch computed 使用与区别

目录

vue 之 watch 监听器

1、方法格式的监听器

2、对象格式的监听器

vue 之 computed 计算属性：

1、特点：

2、例子：

watch 和 computed 有什么区别？

---

vue 之 watch 监听器

• 要监听 data 中哪个数据的变化，就把数据名作为方法名即可。
• 监听函数中有两个值，分别为数据变化的新值（newVal），旧值（oldVal）。

1、方法格式的监听器

• 缺点 1：无法在首次进入页面时，自动触发监听函数。
• 缺点 2：如果监听的是一个对象，对象中的值发生变化，并不会触发监听器。

<div id="app">
  <input type="text" v-model="username" />
</div>
const vm = new Vue({
        el: "#app",
        data: {
            username: "",
        },
        watch: {
            username(newVal, oldVal) {
                console.log("变化", newVal, oldVal);
            },
        },
    });

• watch 除了可以监听 data 中数据的变化，还可以监听路由的变化， 监听 $route.path 属性，如：

watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
    }

2、对象格式的监听器

• 优点 1：可以通过 immediate 选项，让监听器自动触发。

watch: {
        // username(newVal, oldVal) {
        //     console.log("变化", newV oldVal);
        // },
        username: {
            handler(newVal, oldVal) {
                console.log("变化", newVal, oldVal);
            },
            immediate: true, //首次进入就会触发一次
        },
      },

• 优点 2：可以通过 deep 选项，让监听器深度监听对象中每个属性的变化。

data: {
            info: {
                username: "admin",
            },
          },

    watch: {
        info: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal);
                //监听的是对象
            },
            immediate: true,//立即监听
            deep: true,//深度监听
        },



        //或者直接监听对象的某一个属性

        //  "info.username": {
        //      handler(newVal, oldVal) {
        //          console.log(newVal, oldVal);
        //      },
        //  },
    },

---

vue 之 computed 计算属性：

1、特点：

• 计算属性适用于一个值依赖多个值时
• 计算属性依赖于外部数据源，一旦外部数据变化，计算属性也自动计算，复用方便。
• computed 具有缓存功能
• 计算属性中的方法可以直接当做 data 中的值调用

2、例子：

.bg {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
<div class="bg" :style="{backgroundColor:rgb}"></div>
data: {
        r: 0,
        g: 110,
        b: 220,
    },
    computed: {
        //计算属性依赖于外部数据源，一旦外部数据变化，计算属性也自动计算，复用方便。
        //计算属性具有缓存功能
        //rgb 作为计算属性，被定义成了方法格式，
        //并且在vue的实例中可以直接调用 this.rgb 将rgb方法作为data中的值，直接调用即可
        rgb() {
            return `rgb(${this.r},${this.g},${this.b})`;
        },
    },

watch 和 computed 有什么区别？

1. computed 是计算属性在使用时和 data 对象中的数据属性是类似的，watch 是用于监听某一个属性的变化的，computed 擅长的是一个数据受多个数据影响，然而 watch 是用于监听某一个属性的变化的。
2. computed 支持缓存只有依赖数据发生改变，才会重新进行计算，computed 基于它们的响应式依赖进行缓存的，也就是基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的值，watch 则不支持缓存，数据变，直接会触发相应的操作。watch 的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值。
3. computed 不支持异步，computed 内有异步操作时无效，无法监听数据的变化，watch 支持异步。
4. computed 在使用时，computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值，在 computed 中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。watch 在使用时，监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据，当数据变化时，触发其他操作，函数有两个参数。immediate(组件加载立即触发回调函数执行)，deep(深度监听)为了发现对象内部值的变化，复杂类型的数据时使用。

---

----不周之处请大家多多指正