Vue面试常见知识总结3——computed|watch|method、路由、nextTick、组件间通讯

setup|computed|watch|method（Vue3不熟，多写一下）

在Vue 3中，computed、watch 和 methods 是组件中用于响应式数据处理和逻辑处理的重要选项。它们各自有不同的用途和语法，下面将分别详细解释它们在Vue 3中的用法。

1.setup函数

Vue 3 引入了一个新的组件选项 setup，它是所有 Composition API 函数的入口点。setup 函数在组件创建之前被调用，此时组件的 props 已经被解析，但 DOM 还未被挂载，因此你不能在 setup 函数中直接访问 DOM。setup 函数返回一个对象，该对象的属性将被暴露给模板。

setup 函数的常见写法

• 基础用法

       最基本的 setup 函数返回一个对象，该对象包含模板中可能需要的响应式状态、计算属性、方法等。

import { ref } from 'vue';  

export default {  
  setup() {  
    const count = ref(0);  

    function increment() {  
      count.value++;  
    }  

    return {  
      count,  
      increment  
    };  
  }  
}

• 使用 computed

   computed 用于创建计算属性，这些属性基于响应式状态，并且是缓存的，只有当依赖项变化时才会重新计算。

import { ref, computed } from 'vue';  

export default {  
  setup() {  
    const count = ref(0);  

    const doubled = computed(() => count.value * 2);  

    return {  
      count,  
      doubled  
    };  
  }  
}

• 使用 watch 和 watchEffect

watch 用于侦听一个或多个响应式引用或getter函数，并在它们变化时执行回调。watchEffect 在其回调内部自动追踪依赖，并在依赖变化时重新运行。

import { ref, watch, watchEffect } from 'vue';  

export default {  
  setup() {  
    const count = ref(0);  

    watchEffect(() => {  
      console.log(`count is: ${count.value}`);  
    });  

    watch(count, (newVal, oldVal) => {  
      console.log(`count changed from ${oldVal} to ${newVal}`);  
    });  

    function increment() {  
      count.value++;  
    }  

    return {  
      count,  
      increment  
    };  
  }  
}

• 使用生命周期钩子

在 setup 函数中，你不能直接使用如 created、mounted 等 Vue 2 的生命周期钩子。但 Vue 3 提供了 Composition API 版本的生命周期钩子，如 onMounted、onUpdated 等。

import { ref, onMounted } from 'vue';  

export default {  
  setup() {  
    const count = ref(0);  

    onMounted(() => {  
      console.log('Component is mounted!');  
    });  

    return {  
      count  
    };  
  }  
}

• 使用 provide 和 inject

  provide 和 inject 允许你在组件树中跨多层级传递数据，而无需通过每个层级的 props。这在开发高阶组件或插件时非常有用。

import { ref, provide } from 'vue';  

export default {  
  setup() {  
    const theme = ref('dark');  

    provide('theme', theme);  

    return {};  
  }  
};  

// 在子组件或更深层的组件中  
import { inject } from 'vue';  

export default {  
  setup() {  
    const theme = inject('theme');  

    return {  
      theme  
    };  
  }  
};

Provide与Inject

在 Vue 2 中，provide 和 inject 选项主要用于高阶插件/组件开发，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起始组件和注入组件之间建立一种松耦合的链接。这种方式对于开发需要跨多个组件层级的全局状态管理或插件功能时非常有用。

提供方（Provider）

在 Vue 组件的 provide 选项中，你可以指定你想要提供给后代组件的数据/方法。provide 可以是一个对象或返回一个对象的函数。

// 祖先组件  
export default {  
  provide() {  
    return {  
      // 提供一个名为 `message` 的响应式数据  
      message: 'Hello from ancestor'  
    };  
  },  
  // ... 其他选项  
}

 如果 provide 返回一个函数，这个函数将被当作工厂函数处理，并且这个函数的返回值将被缓存起来供后代注入。

注入方（Injector）

在后代组件中，你可以通过 inject 选项来注入祖先组件中提供的依赖。inject 可以是一个字符串数组或一个对象，其中对象的键是局部绑定的名字，值是在祖先组件中提供的值的名字。

// 后代组件  
export default {  
  inject: ['message'], // 或者使用对象语法：inject: { localMessage: 'message' }  
  mounted() {  
    console.log(this.message); // 输出: Hello from ancestor  
  },  
  // ... 其他选项  
}

• 与 props 和 context 一起使用

setup 函数可以接受两个参数：props 和 context。props 是组件的 props 对象，context 是一个普通的 JavaScript 对象，它暴露了三个组件的 property：attrs、slots 和 emit

export default {  
  props: {  
    title: String  
  },  
  setup(props, { attrs, slots, emit }) {  
    console.log(props.title);  

    // 使用 attrs, slots, emit...  

    return {};  
  }  
}

2. Computed（计算属性）

计算属性是基于它们的响应式依赖进行缓存的响应式属性。只有当相关响应式依赖发生改变时，它们才会重新求值。在Vue 3中，computed 属性可以通过setup()函数中的computed函数来定义。

语法示例：

import { computed, ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
      
    // 计算属性，加倍的count  
    const doubled = computed(() => {  
      return count.value * 2;  
    });  
      
    // 暴露给模板  
    return {  
      count,  
      doubled  
    };  
  }  
}

3. Watch（侦听器）

侦听器允许你执行异步操作或开销较大的操作，以响应数据的变化。在Vue 3中，watch函数可以在setup()函数中使用，用于侦听响应式引用或getter函数的变化。

语法示例：

import { watch, ref } from 'vue';  
  
export default {  
  setup() {  
    const question = ref('');  
    const answer = ref('正在思考...');  
  
    // 侦听question的变化  
    watch(question, (newQuestion, oldQuestion) => {  
      if (newQuestion.includes('?')) {  
        answer.value = '思考中...';  
        setTimeout(() => {  
          answer.value = '答案是42';  
        }, 1000);  
      }  
    });  
  
    // 暴露给模板  
    return {  
      question,  
      answer  
    };  
  }  
}

4. Methods（方法）

方法是组件中可以执行某些操作的函数。它们可以在模板中通过@click等指令被调用，或者在setup()函数内部被调用。在Vue 3中，methods通常直接在setup()函数中定义并返回，或者定义在组件的methods选项中（虽然setup()是Vue 3推荐的方式）。

使用setup()定义方法示例：

import { ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    // 方法  
    function increment() {  
      count.value++;  
    }  
  
    // 暴露给模板  
    return {  
      count,  
      increment  
    };  
  }  
}

注意：在Vue 3中，setup()函数是组件内使用Composition API的入口点。它提供了一种更灵活的方式来组织和重用逻辑。在setup()函数中，你可以直接使用ref、reactive等API来创建响应式状态，并通过返回对象的方式暴露给模板。这种方式让状态、计算属性和方法的组织更加灵活和集中。

在Vue中，methods和computed是两个不同的选项，它们各自承担着不同的角色和功能。以下是它们的详细区别，以及一个表格来清晰地展示这些区别。

5.methods与computed的区别

相同点

• 响应式：如果作为模板的数据显示，二者都能实现响应式的功能，即当依赖的数据变化时，它们都能相应地更新视图。

不同点

1. 缓存机制：
   • computed：具有缓存机制。只有当其依赖的响应式数据发生变化时，它才会重新计算。如果多次访问同一个计算属性，且其依赖项没有变化，它将直接返回缓存的结果，这有助于提升性能。
   • methods：不具有缓存机制。每次访问方法时，它都会重新执行，不论其依赖的数据是否发生了变化。
2. 性能：
   • computed：由于具有缓存，所以在处理复杂计算或访问大量数据时，性能更优。
   • methods：每次调用都会执行，可能会导致不必要的性能开销，特别是在处理复杂逻辑或频繁调用时。
3. 使用场景：
   • computed：适用于需要根据其他响应式数据计算得出的值，这些值可能会被多次使用，并且它们的计算相对复杂或开销较大。
   • methods：适用于处理业务逻辑、事件处理或执行一些不依赖于缓存的操作，如异步请求、表单验证等。
4. 调用方式：
   • computed：通常作为模板中的插值表达式直接访问，或者在计算属性内部访问其他响应式数据。
   • methods：通过事件处理或其他方式显式调用。

 路由

Vue路由详解_vue 页面路由-CSDN博客

nextTick

Javascript事件循环应用—nextTick()详解_js nexttick-CSDN博客

组件间通讯

前端Vue进阶-CSDN博客