Vue知识点

MrBetter
169 阅读12分钟

1. v-show 与 v-if 有什么区别？

v-if:

  1. 条件渲染：v-if 是“真正”的条件渲染，它会根据表达式的值来决定是否渲染元素，也就是说当条件为 false 时，Vue 不会渲染该元素，也不会在DOM树中为其创建节点，直到条件变为 true 时才进行渲染。
  2. 懒加载：v-if 按照惰性求值的方式工作，如果初始条件为 false，则不会执行任何渲染操作，减少了不必要的初始渲染成本。
  3. DOM更新：当条件变化时，v-if 会触发销毁和重新创建元素的过程，这意味着相关的绑定、组件实例、事件监听器等也会随之销毁和重新创建。
  4. 适用场景：由于涉及到DOM的销毁和重建，v-if 更适用于那些在运行时不会频繁切换，或者初始条件就确定不需要渲染的情况。

v-show:

  1. 显示隐藏：v-show 不会移除或销毁DOM元素，而是通过修改元素的 CSS 属性（通常是 display: none）来控制元素的显示和隐藏。
  2. 初始渲染：无论条件如何，带有 v-show 的元素总是会被渲染，并且始终存在于DOM中。
  3. 性能影响：由于仅仅是切换元素的可见性，v-show 不涉及DOM的销毁和创建，因此相比于 v-if，切换状态时的性能损耗相对较小。
  4. 适用场景：由于不涉及DOM的重建，v-show 更适合那些需要频繁切换显示状态的元素。

总结：

  • 如果你需要在某些情况下完全避免渲染一个 DOM 节点以节省资源，应该使用 v-if。
  • 如果你频繁地切换某个元素的显示状态，且对初始渲染成本不敏感，使用 v-show 通常会有更好的性能表现，因为它避免了反复的DOM操作。

2. computed 和 watch 的区别和运用的场景？

computed（计算属性）

  1. 定义：计算属性用于根据Vue实例中现有的响应式属性（如data或props）来派生一个新的属性值。它本质上是一个具有缓存机制的 getter 函数。

  2. 特点：

    • 计算属性的结果会被缓存，只有当它的依赖（也就是被计算属性引用的其他响应式属性）发生变化时才会重新计算。
    • 计算属性声明了一个函数，Vue会确保在依赖项变更时自动触发这个函数的重新计算。
    • 常用于复杂的计算逻辑，尤其是这些逻辑的结果会多次复用的情况下。

  3. 应用场景：

    • 当需要根据原始数据生成视图所需的新属性时，如格式化日期、过滤列表、计算总数等。
    • 当视图需要展示的数据依赖于多个基础数据属性的组合时。

watch（侦听器）

  1. 定义：watch 是一个更通用的数据监听选项，它允许开发者指定一个回调函数，当指定的属性发生变化时执行该函数。

  2. 特点：

    • 监听器可以监听单个属性，也可以监听整个对象的深层次变化（通过设置 deep: true）。
    • watch 不具备缓存机制，每次数据变化都会执行回调函数，即使新旧值相等。
    • 回调函数可以是同步的，也可以是异步的，这使得 watch 很适合处理异步操作和副作用。

  3. 应用场景：

    • 当需要在数据变化后执行额外的操作，如发送API请求、更新其他数据属性、执行复杂的逻辑运算等。
    • 当需要针对数据变化做出非直接视图更新相关的动作时，比如表单验证、数据持久化、第三方库的交互等。

总结来说，computed 用于简化模板中的复杂计算逻辑并缓存结果，优化性能，常用于纯展示型计算；而 watch 则用于监听数据变化后的任意操作，不限于视图更新，更偏向于数据变化引发的行为和副作用处理。

watch 和 watchEffect的区别和运用的场景？

watch

  1. 定义：watch 是一个基于表达式的深度监听器，允许你明确指定要监听的某个或某些响应式数据属性。

  2. 特点：

    • 惰性执行：默认情况下，watch 只会在其依赖项发生改变时才执行回调函数。
    • 显式依赖：需要显式指定所监听的依赖数据源，可以通过字符串路径或一个getter函数来指定。
    • 回调函数可以接收到新值（newValue）和旧值（oldValue）作为参数，方便比较变化前后的内容。

  3. 应用场景：

    • 当你需要对特定状态的变化进行有选择性地响应，同时关心变化前后的值时。
    • 例如，当你需要在用户信息更改时做服务器同步，或者在某个条件满足时更新其他关联的状态。

watchEffect

  1. 定义：watchEffect 是一个即时执行的副作用函数，它会自动追踪其内部作用域内所有响应式依赖，并在任何依赖变化时重新运行。

  2. 特点：

    • 非惰性执行：watchEffect 在定义时即刻执行，并在之后持续监听所有在其回调函数体内使用的响应式数据变化。
    • 隐式依赖：无需明确指定要监听的数据，只要回调函数体里引用了响应式数据，就会自动收集依赖并监听。
    • 回调函数不接收变化前后的值作为参数，而是聚焦于执行副作用操作本身。

  3. 应用场景：

    • 当你有一个副作用函数，其中包含了多个不确定的响应式依赖，不需要知道具体的依赖值变化，只需要在任何依赖变化时重新执行整个副作用逻辑。
    • 示例包括：动态计算样式、根据数据变化更新 DOM 属性、处理依赖多个数据源的任务等。

总结

  • 使用 watch 时，你清楚知道自己需要监听哪些特定数据的变化，并且可能需要访问变化前后的值。watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
  • 使用 watchEffect 时，你关注的是在一个副作用函数中执行一系列操作，这些操作依赖于很多不确定的响应式数据，无需关心每一个依赖的具体变化情况，只需在任何依赖发生变化时重新执行整个副作用流程。 它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

3. 怎样理解 Vue 的单向数据流？

Vue.js 的单向数据流是一种设计原则，它规定了数据在组件间的流动方向，旨在保证应用状态的一致性和可预测性。在Vue应用中，数据流的基本模式是从父组件流向子组件，而不是双向或多向流动。

单向数据流的运作机制如下：

  1. 父组件到子组件的数据传递：Vue中，父组件可以通过props向下传递数据给子组件。子组件可以通过props选项声明接收来自父组件的数据，并在模板中使用这些数据。但是，子组件不能直接修改props传递进来的数据，Vue会阻止这样的行为以保持数据流向的单一性。
  2. 子组件向父组件的反馈：尽管子组件不能直接修改父组件的数据，但它可以通过自定义事件（使用 $emit 方法）向父组件发送信号或传递数据。父组件可以在自身模板中监听这些事件，并在事件处理器中执行相应的逻辑，包括更新自身的状态。

例如：

  • 父组件向子组件传递数据：

    1<!-- Parent.vue -->
2<template>
3  <Child :value="parentData"/>
4</template>
5
6<script>
7import Child from './Child.vue';
8
9export default {
10  data() {
11    return {
12      parentData: 'Hello from Parent'
13    };
14  },
15  components: {
16    Child
17  }
18};
19</script>

  • 子组件接收并使用数据，但不能修改：

    1<!-- Child.vue -->
2<template>
3  <p>{{ value }}</p>
4</template>
5
6<script>
7export default {
8  props: {
9    value: String
10  }
11};
12</script>

  • 子组件向父组件发送事件来间接修改数据：

    1<!-- Child.vue -->
2<template>
3  <button @click="increaseCount">Increment</button>
4</template>
5
6<script>
7export default {
8  props: {
9    count: Number
10  },
11  methods: {
12    increaseCount() {
13      this.$emit('increment', this.count + 1);
14    }
15  }
16};
17</script>
18
19<!-- Parent.vue -->
20<template>
21  <Child :count="parentCount" @increment="updateCount"/>
22</template>
23
24<script>
25// ...
26export default {
27  data() {
28    return {
29      parentCount: 0
30    };
31  },
32  methods: {
33    updateCount(newCount) {
34      this.parentCount = newCount;
35    }
36  }
37};
38</script>

通过这样的单向数据流设计，Vue鼓励开发人员遵循一个清晰的数据流动结构，从而降低因组件间随意修改彼此数据带来的混乱和潜在bug，提高代码的可维护性和可测试性。

4. 谈谈你对 Vue 生命周期的理解？

image.png Vue.js 的生命周期指的是 Vue 实例从创建到销毁的全过程，这个过程中包含了一系列有序的阶段，每个阶段都伴随着特定的钩子函数（Lifecycle Hooks），开发者可以在这些钩子函数中注入自定义的业务逻辑来操控组件的状态和DOM渲染。Vue的生命周期一共分为以下8个核心阶段：

  1. 创建前/后 (Before Create / Created)

    • beforeCreate：在这个阶段，Vue实例已经创建，但数据观察、属性和方法的代理、事件配置尚未完成，$el属性尚不可用。
  • created：Vue实例已完成数据观察（响应式系统）、属性和方法的初始化，此时this上下文已可用，但真实DOM尚未生成，$el属性为空或未插入到页面中。

  1. 挂载前/后 (Before Mount / Mounted)

    • beforeMount：在虚拟DOM转换为真实DOM之前调用，此时模板已经被编译成render函数，即将开始首次渲染。
  • mounted：真实DOM已经在浏览器中渲染出来了，此时组件已经挂载到了指定的DOM元素上，可以进行DOM操作。

  1. 更新前/后 (Before Update / Updated)

    • beforeUpdate：当组件的响应式依赖发生变化时，数据更新之前调用。此时新的数据已经更新，但DOM尚未进行重新渲染。
  • updated：数据更新完成后，组件DOM已经完成重新渲染，可以在此钩子中访问到最新的DOM元素。

  1. 销毁前/后 (Before Destroy / Destroyed)

    • beforeDestroy：在组件销毁之前调用，此时组件依然完全可用，可以在这一步做一些清理操作，比如取消定时器、解除事件监听等。
  • destroyed：组件已被销毁，所有的指令解绑，所有的数据监听被移除，子组件也被销毁，$el 被卸载，此时组件相关资源已全部回收。

Vue生命周期的各个阶段紧密配合，帮助开发者在正确的时间点去执行相应的逻辑，例如初始化数据、加载外部资源、处理DOM操作、响应数据变化、释放资源等。通过合理利用生命周期钩子，可以有效地优化组件性能、维护组件状态及提升代码可维护性。

5. Vue 组件间通信有哪几种方式？

Vue组件间通信主要有以下几种方式：

  1. Props & Events（属性传递和事件触发）

    • Props: 父组件通过属性向子组件传递数据。父组件在子组件标签上定义props，子组件通过props选项接收并使用这些数据。这是单向数据流，即数据从父组件流向子组件。props传值的例子：

      父组件（Parent.vue）：

      <!-- 父组件模板 -->
<template>
  <div>
    <!-- 将父组件的数据通过props传递给子组件 -->
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
// 引入子组件
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      // 定义要传递给子组件的数据
      parentMessage: 'Hello from the Parent!'
    };
  }
};
</script>

      子组件（ChildComponent.vue）：

      <!-- 子组件模板 -->
<template>
  <div>
    <!-- 在子组件中使用props接收并显示传递过来的数据 -->
    {{ message }}
  </div>
</template>

<script>
export default {
  // 定义props选项，声明接受名为'message'的属性
  props: {
    message: String
  }
};
</script>

      在这个例子中，父组件定义了一个名为 parentMessage 的数据属性，并通过 :message="parentMessage" 的方式将其绑定到子组件的 message prop 上。子组件通过在 props 选项中声明 message 属性，表明它可以接收来自父组件的 message 数据，并在子组件的模板中直接使用该数据进行显示。

    • Custom Events: 子组件通过$emit触发自定义事件，向父组件发送数据或信号。父组件在模板中监听这些事件并在事件处理器中响应。$emit 触发自定义事件的例子：

      子组件触发事件，父组件监听事件：

      1. 子组件（child-component.vue）中触发事件：
      <template>
  <button @click="handleButtonClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      // 触发一个名为 'my-event' 的自定义事件，并携带参数
      this.$emit('my-event', { someData: '我是传递的数据' });
    }
  }
};
</script>
      1. 父组件中监听并处理该事件：
      <template>
  <child-component @my-event="handleMyEvent"></child-component>
</template>

<script>
import ChildComponent from './child-component.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMyEvent(data) {
      console.log('接收到子组件传递的数据:', data.someData);
      // 在这里可以执行与事件相关的逻辑
    }
  }
};
</script>

  2. $refs

    • 如果需要直接访问子组件的方法或属性，父组件可以通过在子组件上设置ref属性，然后在父组件中通过this.$refs.refName访问子组件实例。父组件通过$refs访问子组件属性或方法的例子：

      子组件 (ChildComponent.vue):

      <template>
  <div ref="childElement">
    我是子组件
  </div>
  
  <button @click="childMethod">子组件内部的方法</button>

  <input type="text" v-model="childInput" />

  <script>
  export default {
    data() {
      return {
        childInput: ''
      };
    },
    methods: {
      childMethod() {
        console.log('子组件的方法被父组件调用了');
      }
    }
  };
  </script>
</template>

      父组件 (ParentComponent.vue):

      <template>
  <div>
    <ChildComponent ref="childRef" />

    <button @click="callChildMethod">调用子组件方法</button>

    <button @click="getViewChildInput">获取子组件输入框的值</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // 通过 $refs 访问子组件实例并调用其方法
      this.$refs.childRef.childMethod();
    },
    
    getViewChildInput() {
      // 通过 $refs 访问子组件实例并获取其data中的值
      if (this.$refs.childRef && this.$refs.childRef.childInput) {
        console.log('子组件输入框的值:', this.$refs.childRef.childInput);
      }
    }
  }
};
</script>

      在这个例子中：

      • 子组件有一个名为 "childRef" 的 ref 属性。
      • 父组件在模板中引入了子组件，并同样设置了 ref 属性为 "childRef"。
      • 当父组件需要调用子组件的方法或访问子组件的数据时，通过 this.$refs.childRef 获取到子组件的实例，然后可以调用子组件的公开方法（如 childMethod）或访问其 data 中的属性（如 childInput）。

  3. Event Bus 或中央事件总线

    • 创建一个独立的Vue实例（事件总线），并用它来触发和监听事件。所有组件都可以引入这个事件总线并通过它来进行通信，尤其是在没有直接父子关系的组件间。以下是一个简单的例子说明如何创建和使用事件总线：

      首先，创建一个单独的文件 event-bus.js：

      // event-bus.js
import Vue from 'vue';

// 创建一个事件总线实例
const EventBus = new Vue();

export default EventBus;

      接下来，在需要进行通信的组件中导入并使用事件总线：

      组件A：

      // ComponentA.vue
<template>
  <button @click="emitEvent">点击发出事件</button>
</template>

<script>
import EventBus from '@/path/to/event-bus.js'; // 导入事件总线

export default {
  methods: {
    emitEvent() {
      // 触发一个事件，并携带数据
      EventBus.$emit('custom-event', { message: '这是来自组件A的消息' });
    }
  }
};
</script>

      组件B：

      // ComponentB.vue
<script>
import EventBus from '@/path/to/event-bus.js'; // 导入同一个事件总线

export default {
  created() {
    // 注册监听事件
    EventBus.$on('custom-event', (data) => {
      console.log('组件B接收到的消息：', data.message);
      // 在这里可以根据接收到的数据执行相应操作
    });
  },

  beforeDestroy() {
    // 为了避免内存泄漏，应当在组件销毁时移除事件监听器
    EventBus.$off('custom-event');
  }
};
</script>

      在这个例子中，组件A通过点击按钮触发了一个名为custom-event的事件，并附带了一些数据。组件B注册了对该事件的监听，一旦事件被触发，组件B就能接收到传递的数据，并执行相应的逻辑。

      注意：虽然这种方法在小型项目中可以方便地解决组件间的通信问题，但在大型项目中，建议使用更为正规的状态管理工具，如Vuex，来更好地管理和控制应用级别的状态和事件。

  4. Vuex

    • Vuex是Vue官方推荐的状态管理模式，用于跨组件甚至跨层级组件共享和管理状态。通过创建一个store（仓库），组件可以从store中获取状态，也可以提交mutation或dispatch action来改变状态，所有与store关联的组件都会根据状态的改变自动更新。以下是一个简单的例子：

      首先，安装VueX:

      npm install vuex --save

      接着，创建一个基本的VueX store：

      store/index.js

      import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 全局状态
    count: 0,
  },
  mutations: {
    // 修改状态的方法
    increment(state) {
      state.count++
    },
  },
  actions: {
    // 异步操作或包含多个mutations的操作
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
  },
  getters: {
    // 从状态派生出的计算属性
    evenOrOdd: (state) => {
      return state.count % 2 === 0 ? 'even' : 'odd'
    },
  },
})

      然后，在主入口文件（如：main.js）中引入并使用store：

      import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入刚刚创建的store

new Vue({
  store, // 将store注入到Vue实例
  render: h => h(App),
}).$mount('#app')

      最后，在组件中使用VueX的state、mutations、actions和getters：

      Component.vue

      <template>
  <div>
    <p>计数器的值：{{ count }}</p>
    <p>计数器是奇数还是偶数：{{ evenOrOdd }}</p>
    <button @click="increment">加1</button>
    <button @click="incrementAsync">异步加1</button>
  </div>
</template>

<script>
export default {
  computed: {
    // 从store中获取state
    count() {
      return this.$store.state.count
    },
    // 从store中获取getter
    evenOrOdd() {
      return this.$store.getters.evenOrOdd
    },
  },
  methods: {
    // 触发mutation修改状态
    increment() {
      this.$store.commit('increment')
    },
    // 触发action
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    },
  },
}
</script>

      在这个例子中，我们在VueX的store中定义了一个全局状态count，并提供了修改状态的mutations方法和异步操作的actions。在组件中，我们通过this.$store访问和修改全局状态，并通过getters获取计算过的状态属性。通过这种方式，VueX帮助我们实现了跨组件的状态管理和控制。

  5. Provide / Inject

    • Vue提供了一对选项provide和inject，允许一个祖先组件向其所有子孙后代组件提供数据，无需通过props逐层传递。后代组件通过inject声明自己需要哪些依赖，Vue会负责在祖先组件中查找这些依赖并注入。以下是一个简单的例子：

      祖先组件（Provider.vue）：

      <template>
  <div>
    <!-- 这里是祖先组件的模板 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  // 在 provide 选项中暴露变量
  provide() {
    return {
      message: 'Hello from Ancestor!'
    };
  }
};
</script>

      子组件（Consumer.vue）：

      <template>
  <div>
    <!-- 子组件模板 -->
    {{ receivedMessage }}
  </div>
</template>

<script>
export default {
  // 在 inject 选项中声明需要从祖先组件注入的依赖
  inject: ['message'],
  computed: {
    // 将注入的依赖转换为计算属性
    receivedMessage() {
      return this.message;
    }
  }
};
</script>

      在这个例子中，祖先组件（Provider.vue）通过 provide 选项向外提供了一个名为 message 的响应式变量。而在子组件（Consumer.vue）中，我们通过 inject 选项声明了需要从祖先组件注入的依赖 message，并在计算属性 receivedMessage 中使用了这个注入的值。

      当祖先组件提供的 message 发生变化时，子组件中的 receivedMessage 也会相应地更新，实现了响应式的数据注入。这样，无论子组件位于祖先组件的几级嵌套之下，都能直接访问到祖先组件提供的数据。

等待后续更新。。。

6. 什么是 MVVM？

7. Vue 是如何实现数据双向绑定的？

8. Vue 的父组件和子组件生命周期钩子函数执行顺序？

9. 在哪个生命周期函数内调用异步请求？

10. 在什么阶段才能访问操作DOM？

11. vue3新特性有哪些？

avatar
文章
阅读
粉丝