07响应式计算和侦听

# 响应式计算和侦听

官网 (opens new window)

# watch 和 watchEffect

# watch

vue3 官方 watchEffect (opens new window)

// src/App.vue
<template>
  <div>
    <input type="text" v-model="result" />
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const result = ref("hello world");
    watch(
      () => result.value,
      (newVal, oldVal) => {
        console.log(newVal);
        console.log(oldVal);
      }
    );
    return {
      result,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

监听-你发什么，他就回什么

// src/App.vue
<template>
  <div>
    <input type="text" v-model="result.msg" />
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const result = ref("hello world");
    watch(
      () => result.msg,
      (newVal, oldVal) => {
        console.log(newVal);
        console.log(oldVal);
      }
    );
    return {
      result,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# watchEffect

官网：watchEffect (opens new window)

<template>
  <div>
    <input type="text" v-model="result.msg" />
    <input type="text" v-model="result.msg2" />
  </div>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    const result = reactive({
      msg: "hello",
      msg2: "world",
    });
    watchEffect(() => {
      console.log(result.msg);
      console.log(result.msg2);
    });
    return {
      result,
      stopHandler,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 停止监听

官网：停止侦听 (opens new window)

<template>
  <div>
    <input type="text" v-model="result.msg" />
    <input type="text" v-model="result.msg2" />
    <button @click="stopHandler">停止监听</button>
  </div>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    const result = reactive({
      msg: "hello",
      msg2: "world",
    });
    const stop = watchEffect(() => {
      console.log(result.msg);
      console.log(result.msg2);
    });
    const stopHandler = () => {
      stop();
    };
    //stop(); //这种调用，是不用按钮@click
    return {
      result,
      stopHandler,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 清除副作用

// src/App.vue
<template>
  <div>
    <input type="text" v-model="result.msg" />
    <input type="text" v-model="result.msg2" />
  </div>
</template>

<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    const result = reactive({
      num: 1,
    });
    setInterval(() => {
      result.num++;
    }, 1000);
    const stop = watchEffect(async (onInvalidate) => {
      //停止监听，就执行这个
      onInvalidate(() => {
        console.log("清除副作用" + result.num);
      });
      //没停止监听，就执行这个
      console.log("执行副作用" + result.num);
    });
    //让他4秒钟停止监听
    setTimeout(() => {
      stop();
    }, 4000);
    return {
      result,
    };
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# vit.config.配置

官网：resolve.alias (opens new window)

路径配置

// 根目录 vit.config.js
import path from "path";
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"), //路径配置
    },
  },
});

1
2
3
4
5
6
7
8
9

编辑

上次更新: 2023/08/06, 00:38:41

← 06计算属性