vue设计模式总结-vue中主要用到了那些设计模式-面试篇

Vue
47
0
0
2024-06-09
标签   前端面试

Vue 中主要用到的设计模式包括:

一.观察者模式(Observer Pattern):

Vue 使用观察者模式来实现数据的响应式,当数据发生变化时,相关的视图会自动更新。

举个栗子:

  1. 数据绑定:在Vue模板中使用双向数据绑定 v-model,当输入框中的内容发生变化时,绑定的数据也会相应地更新,这就是观察者模式的应用。
<input type="text" v-model="message">
  1. 计算属性:Vue中的计算属性会依赖于其所引用的数据,在相关数据发生变化时,计算属性会重新计算并更新,这也是观察者模式的体现。
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}
  1. 侦听器:Vue中可以通过侦听器 watch 监听数据的变化,并执行相应的操作,这也是观察者模式的应用。
watch: {
  message(newValue, oldValue) {
    console.log('Message changed from', oldValue, 'to', newValue);
  }
}

这些例子展示了Vue中观察者模式的具体应用,通过响应式更新来保持数据和视图的同步。

二.发布-订阅模式(Publish-Subscribe Pattern):

Vue 的事件系统基于发布-订阅模式,允许组件之间进行解耦,通过订阅和发布事件来通信。

举个栗子:

假设有一个父组件和一个子组件,父组件中有一个按钮,点击按钮后触发一个事件,并传递数据给子组件,子组件接收到数据后进行相应的处理。

父组件模板:

<template>
  <div>
    <button @click="publishEvent">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    publishEvent() {
      // 发布事件并传递数据
      this.$emit('custom-event', { message: 'Hello from parent' });
    }
  }
}
</script>

子组件模板:

<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  mounted() {
    // 订阅事件
    this.$parent.$on('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 接收并处理事件数据
      this.receivedMessage = data.message;
    }
  }
}
</script>

在这个例子中,父组件通过 $emit 方法发布一个名为 custom-event 的事件,并传递了一个包含消息的对象。子组件通过 $on 方法订阅了 custom-event 事件,并在收到事件时执行 handleEvent 方法来更新接收到的消息。这样,父子组件之间就实现了通过发布-订阅模式进行通信

三.组件模式(Component Pattern):

Vue 的核心思想之一是组件化开发,将页面拆分成独立的组件,每个组件负责自己的一部分功能,便于复用和维护。

首先定义一个简单的子组件MyButton,这个组件封装了一个按钮的基本行为和样式。

<!-- MyButton.vue -->
<template>
  <button @click="clickHandler">{{ buttonText }}</button>
</template>

<script>
export default {
  props: ['buttonText'],
  methods: {
    clickHandler() {
      this.$emit('click');
    }
  }
}
</script>

然后,在父组件中使用这个子组件:

<!-- App.vue -->
<template>
  <div>
    <my-button :button-text="buttonText" @click="handleButtonClick"></my-button>
  </div>
</template>

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

export default {
  components: {
    MyButton
  },
  data() {
    return {
      buttonText: 'Click Me'
    };
  },
  methods: {
    handleButtonClick() {
      alert('Button clicked!');
    }
  }
}
</script>

在这个例子中,我们定义了一个MyButton子组件,它接受一个buttonText属性来显示按钮上的文本,并且当按钮被点击时,它会触发一个click事件。父组件App.vue通过导入并注册MyButton组件,然后在模板中使用它。这里通过属性绑定(:button-text="buttonText")来传递按钮的文本,通过事件监听(@click="handleButtonClick")来处理按钮点击事件。

这个例子展示了Vue中组件模式的基本应用:通过属性传递数据,通过事件进行父子组件间的通信,以及通过组件化构建复用的界面元素。

4. 代理模式(Proxy Pattern):

Vue 3 中使用了 Proxy 对象来实现响应式数据,它可以拦截对对象的各种操作,从而实现数据的监听和更新。

举个栗子:

const data = { message: 'Hello, Vue!' };

// 创建一个响应式代理对象
const reactiveData = new Proxy(data, {
  // 拦截属性的读取操作
  get(target, key) {
    console.log(`Getting ${key}: ${target[key]}`);
    return target[key];
  },
  // 拦截属性的写入操作
  set(target, key, value) {
    console.log(`Setting ${key}: ${value}`);
    target[key] = value;
    // 触发更新操作
    // 这里可以通知相关的视图进行更新
  }
});

// 通过代理对象访问数据
console.log(reactiveData.message); // 输出:Hello, Vue!

// 修改数据
reactiveData.message = 'Hello, Proxy!'; // 输出:Setting message: Hello, Proxy!
console.log(reactiveData.message); // 输出:Hello, Proxy!

在这个例子中,通过创建一个 Proxy 对象 reactiveData,对原始数据 data 进行代理。在 Proxy 的 getset 方法中,可以监听属性的读取和写入操作,并在需要时触发相应的更新操作,实现了数据的响应式。

5.策略模式(Strategy Pattern):

Vue 的指令系统和插件系统可以看作是策略模式的应用,通过不同的指令和插件来实现不同的功能扩展。

举个栗子:

假设有一个自定义指令,根据不同的条件展示不同的提示信息。

// 自定义指令
Vue.directive('show-tip', {
  bind(el, binding) {
    // 根据条件展示不同的提示信息
    const condition = binding.value.condition;
    const message = binding.value.message;

    if (condition) {
      el.innerText = message;
    } else {
      el.innerText = 'No tip available';
    }
  }
});

// Vue实例
new Vue({
  el: '#app',
  data: {
    showTip: true,
    tipMessage: 'This is a tip message!'
  }
});

在这个例子中,自定义指令 show-tipbind 钩子函数根据传入的条件来展示不同的提示信息,这就是策略模式的应用。用户可以根据需要传递不同的条件和提示信息,指令会根据条件选择合适的策略来展示提示信息。

##6. 依赖注入模式(Dependency Injection Pattern):

Vue 的依赖注入主要体现在组件之间的数据传递和通信上,通过 props 属性传递数据或使用 provide/inject 实现跨层级组件的数据传递。

举个栗子:

假设有一个全局的用户认证服务,我们希望在整个应用中的任何组件都能够访问到这个认证服务。

// 创建一个全局的用户认证服务
const authService = {
  isAuthenticated: false,
  login() {
    this.isAuthenticated = true;
  },
  logout() {
    this.isAuthenticated = false;
  }
};

// 在根组件中通过provide提供全局服务
new Vue({
  provide: {
    authService: authService
  },
  el: '#app',
  // ...
});

现在,我们可以在任何子组件中通过inject来注入这个全局的用户认证服务,并使用它提供的方法和属性:

// 在任意子组件中注入全局的用户认证服务
export default {
  inject: ['authService'],
  methods: {
    handleLogin() {
      this.authService.login();
    },
    handleLogout() {
      this.authService.logout();
    }
  }
};

通过这种方式,我们可以在任何组件中访问全局的用户认证服务,而不需要显式地传递它。这就是依赖注入模式在Vue中的应用。

综上,这些设计模式使得 Vue 在开发中更加灵活和可维护,同时提供了丰富的功能和扩展性。