vue2，vue3 watch监听

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

一、vue2.0

1.watch监听简单值string || number 等

<template>
  <div>
    <input type="text" v-model="inputValue">
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  watch: {
    inputValue(newVal, oldVal){
      console.log(newVal, oldVal, 'inputValue')
    }
  },
};
</script>

2.watch监听对象中的值

<template>
  <div>
    <input type="text" v-model="obj.inputValue" />
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      obj: {
        inputValue: "",
      },
    };
  },
  watch: {
    "obj.inputValue"(newVal, oldVal) {
      // 查看改变的值
      console.log(newVal, oldVal, "inputValue");
    },
  },
};
</script>

3.watch监听对象中的值(处理函数方式) 深度监听描述

注意先后顺序以及"obj.inputValue": "objInputValueFn"字符串格式

<template>
  <div style="position: relative">
    <input type="text" v-model="obj.inputValue" />
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      obj: {
        inputValue: "",
      },
    };
  },
  watch: {
    "obj.inputValue": "objInputValueFn",
  },
  methods: {
    objInputValueFn(newVal, oldVal) {
      // 查看改变的值
      console.log(newVal, oldVal, "inputValue");
    },
  },
};
</script>

4.watch监听对象中的值(handler函数监听)

• deep: true // 深度监听 [注意是否需要]
• immediate: true // 初次执行 [注意是否需要]

<template>
  <div style="position: relative">
    <input type="text" v-model="obj.inputValue" />
    <input type="text" v-model="obj.inputOneValue" />
  </div>
</template>
<script>
import Vue from "vue";

export default {
  data() {
    return {
      obj: {
        inputValue: "",
        inputOneValue: "",
      },
    };
  },
  watch: {
      obj: { // 对象内部的值改变择改变
        handler(newVal, oldVal) {
            // 查看改变的值
            console.log(newVal, oldVal, "inputValue");
        },
        deep: true, // 深度监听
        immediate: true, // 初次执行
      },
  },
};
</script>

一、vue3.0

1.watch监听简单值string || number 等

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

const inputValue = ref('谁不是');

watch(
  () => inputValue.value, // 监听Form表单
  async (newVal) => {
    console.log(newVal, 'inputValue'); '谁不是'
  },
  {
    immediate: true, // 初次进入页面执行
  }
);
</script>
<style lang="scss"></style>

2.watch监听对象中的值

deep: true // 开启深度监听

<template>
  <div>
    <input type="text" v-model="obj.inputValue" />
    <input type="text" v-model="obj.inputOneValue" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

const obj = ref({
  inputValue: '谁不是',
  inputOneValue: '隔开了',
});


watch(
  () => [obj.value.inputValue, obj.value.inputOneValue], // obj对象内部的值
  async (newVal) => {
    console.log(newVal, 'inputValue'); // 数组的格式['谁不是', '隔开了']
  },
  {
    immediate: true, // 初次进入页面执行
  }
);
</script>
<style lang="scss"></style>

3.watch监听对象中的值 深度监听描述

<template>
  <div>
    <input type="text" v-model="obj.inputValue" />
    <input type="text" v-model="obj.inputOneValue" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

const obj = ref({
  inputValue: '谁不是',
  inputOneValue: '隔开了',
});

// 监听对象内部的变化
watch(
  () => obj.value // obj对象内部的值
  async (newVal) => {
    console.log(newVal, 'obj'); // Proxy {inputValue: '谁不是', inputOneValue: '隔开了'}
  },
  {
    immediate: true, // 初次进入页面执行
    deep: true, // 开启深度监听
  }
);
</script>
<style lang="scss"></style>

4. watchEffect

1. watch可以访问新值和旧值，watchEffect不能访问。
2. watch需要指明监听的对象，也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
3. watch只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。

<template>
  <div>
    <input type="text" v-model="obj.inputValue" />
    <input type="text" v-model="obj.inputOneValue" />
    {{ obj }}
    <button @click="obj.inputOneValue = 'coco'">点击</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue';

const obj = ref({
  inputValue: '谁不是',
  inputOneValue: '隔开了',
});
// 只要watchEffect有被修改的值就会发生变化
watchEffect(() => {
  const a = obj.value.inputValue;
  const b = obj.value.inputOneValue;
  console.log(obj.value, a, b, 'obj');
});
// 没有择只会首次加载
watchEffect(() => {
  console.log('obj');
});
</script>
<style lang="scss"></style>

【有修改遗漏请评论】