VUE使用笔记

一、计算属性

什么是计算属性：

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
• 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

求和

在vue2中使用计算属性

<template>
  <div id="app">
    {{ sum }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      a: 1,
      b: 2,
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    },
  },
};
</script>
 

在vue3中使用计算属性

<template>
  <div>{{ sum }}</div>
</template>

<script setup>
import { computed } from "vue";

const a = 1;
const b = 2;
const sum = computed(() => a + b);
</script>

<style></style>

二、监听器

什么是监听器：

watch允许开发者监视数据的变化，是 vue 提供的一种用来观察和响应实例上数据变化的属性，属性发生变化，便会触发对应的监听函数。

在vue2中使用监听器：

<template>
  <div id="app">
    {{ sum }}
    <button @click="count++">点击加一</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count:1,
    };
  },
  watch: {
    count(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    immediate: true,
    deep: true,
  },
};
</script>
<style></style>

在vue3中使用监听器：

// 单个ref值
// New: 新值 | Old: 老值
watch(
  sum,
  (New, Old) => {
    console.log(`新值:${New} ——— 老值:${Old}`);
  },
  { immediate: true, deep: true }
);

watch(
  () => sum.value,
  (New, Old) => {
    console.log(`新值:${New} ——— 老值:${Old}`);
  },
  { immediate: true, deep: true }
);

// 监听多个变量
// 第一个参数变为数组形式,每个下标对应一个要监听的变量
// 第二个参数的函数传参改为每项数组形式,每个数组对应新旧值的参数
watch([one, () => two.value], ([oneNew, oneOld], [twoNew, twoOld]) => {
  console.log(`one: ${oneNew}(新) ——— ${twoNew}(旧)`);
  console.log(`two: ${oneOld}(新) ——— ${twoOld}(旧)`);
  console.warn("——————————————————————————————————————————————");
});

监听器的flush选项

sync：同步模式下执行
pre：在数据变化之前执行回调函数
post：在数据变化之后执行回调函数，但是需要等待所有依赖项都更新后才执行

import { reactive, watch } from 'vue'
const state = reactive({
  count: 0
})
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(`count值从${oldVal}变成了${newVal}`)
  },
  { flush: 'sync' }
)
state.count++ // 输出：count值从0变成了1

使用throttle和debounce控制回调函数的执行频率

在有些情况下，我们可能会频繁地监听一个值的变化，并在变化时执行一些操作。如果回调函数执行的太频繁，会影响性能。
为了避免这种情况，我们可以使用throttle和debounce控制回调函数的执行频率。
throttle和debounce都是用于控制函数执行频率的工具函数。
throttle可以用于控制函数在一定时间内只能执行一次，而debounce可以用于控制函数在一定时间内不会连续执行。
例如：
 

import { reactive, watch } from 'vue'
import { throttle } from 'lodash-es'

const state = reactive({
  count: 0
})

watch(
  () => state.count,
  throttle((newVal, oldVal) => {
    console.log(`count值从${oldVal}变成了${newVal}`)
  }, 1000)
)

state.count++

停止监听（vue3）

import { watch, ref } from "vue";

// 响应式变量
const sum = ref(1);

// 想要支持停止监听,必须将watch结果用一个变量进行接收
const result = watch(sum, () => {
  console.log("我触发啦！");
});
// 停止监听
const stop = () => {
  // 写上接收的变量名即可
  result();
};

const props = defineProps<{
  /**
   * modelValue
   */
  modelValue: any
}>()