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

一.观察者模式（Observer Pattern）：

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

举个栗子：

数据绑定：在Vue模板中使用双向数据绑定 v-model，当输入框中的内容发生变化时，绑定的数据也会相应地更新，这就是观察者模式的应用。

 1<input type="text" v-model="message">

计算属性：Vue中的计算属性会依赖于其所引用的数据，在相关数据发生变化时，计算属性会重新计算并更新，这也是观察者模式的体现。

 1computed: {
 2  reversedMessage() {
 3    return this.message.split('').reverse().join('');
 4  }
 5}

侦听器：Vue中可以通过侦听器 watch 监听数据的变化，并执行相应的操作，这也是观察者模式的应用。

 1watch: {
 2  message(newValue, oldValue) {
 3    console.log('Message changed from', oldValue, 'to', newValue);
 4  }
 5}

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

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

举个栗子：

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

父组件模板：

 1<template>
 2  <div>
 3    <button @click="publishEvent">Click me</button>
 4  </div>
 5</template>
 6
 7<script>
 8export default {
 9  methods: {
10    publishEvent() {
11      
12      this.$emit('custom-event', { message: 'Hello from parent' });
13    }
14  }
15}
16</script>

子组件模板：

 1<template>
 2  <div>
 3    <p>{{ receivedMessage }}</p>
 4  </div>
 5</template>
 6
 7<script>
 8export default {
 9  data() {
10    return {
11      receivedMessage: ''
12    };
13  },
14  mounted() {
15    
16    this.$parent.$on('custom-event', this.handleEvent);
17  },
18  methods: {
19    handleEvent(data) {
20      
21      this.receivedMessage = data.message;
22    }
23  }
24}
25</script>

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

三.组件模式（Component Pattern）：

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

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

 1 <template>
 2  <button @click="clickHandler">{{ buttonText }}</button>
 3</template>
 4
 5<script>
 6export default {
 7  props: ['buttonText'],
 8  methods: {
 9    clickHandler() {
10      this.$emit('click');
11    }
12  }
13}
14</script>

然后，在父组件中使用这个子组件：

 1 <template>
 2  <div>
 3    <my-button :button-text="buttonText" @click="handleButtonClick"></my-button>
 4  </div>
 5</template>
 6
 7<script>
 8import MyButton from './MyButton.vue';
 9
10export default {
11  components: {
12    MyButton
13  },
14  data() {
15    return {
16      buttonText: 'Click Me'
17    };
18  },
19  methods: {
20    handleButtonClick() {
21      alert('Button clicked!');
22    }
23  }
24}
25</script>

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

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

4. 代理模式（Proxy Pattern）：

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

举个栗子：

 1const data = { message: 'Hello, Vue!' };
 2
 3const reactiveData = new Proxy(data, {
 4  
 5  get(target, key) {
 6    console.log(`Getting ${key}: ${target[key]}`);
 7    return target[key];
 8  },
 9  
10  set(target, key, value) {
11    console.log(`Setting ${key}: ${value}`);
12    target[key] = value;
13    
14    
15  }
16});
17
18console.log(reactiveData.message); 
19
20
21reactiveData.message = 'Hello, Proxy!'; 
22console.log(reactiveData.message);

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

5.策略模式（Strategy Pattern）：

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

举个栗子：

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

 1 Vue.directive('show-tip', {
 2  bind(el, binding) {
 3    
 4    const condition = binding.value.condition;
 5    const message = binding.value.message;
 6
 7    if (condition) {
 8      el.innerText = message;
 9    } else {
10      el.innerText = 'No tip available';
11    }
12  }
13});
14
15new Vue({
16  el: '#app',
17  data: {
18    showTip: true,
19    tipMessage: 'This is a tip message!'
20  }
21});

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

##6. 依赖注入模式（Dependency Injection Pattern）：

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

举个栗子：

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

 1 const authService = {
 2  isAuthenticated: false,
 3  login() {
 4    this.isAuthenticated = true;
 5  },
 6  logout() {
 7    this.isAuthenticated = false;
 8  }
 9};
10
11new Vue({
12  provide: {
13    authService: authService
14  },
15  el: '#app',
16  
17});

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

 1 export default {
 2  inject: ['authService'],
 3  methods: {
 4    handleLogin() {
 5      this.authService.login();
 6    },
 7    handleLogout() {
 8      this.authService.logout();
 9    }
10  }
11};

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

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

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

一.观察者模式（Observer Pattern）：

举个栗子：

二.发布-订阅模式（Publish-Subscribe Pattern）：

举个栗子：

三.组件模式（Component Pattern）：

4. 代理模式（Proxy Pattern）：

举个栗子：

5.策略模式（Strategy Pattern）：

举个栗子：

举个栗子：