Google同学推荐-编写高质量Vue代码的50个有效方法

TonyAng
143 阅读4分钟

当谈到编写高质量Vue代码时，以下是每个方法都附有代码示例。这些方法可以帮助你提高代码的可读性、可维护性和性能。

组件设计（Component Design）

方法1：对组件进行拆分，保持单一职责原则

<!-- 不佳示例 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="submit">提交</button>
  </div>
</template>

<!-- 佳示例 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <SubmitButton :onClick="submit" />
  </div>
</template>

方法2：使用计算属性替代复杂表达式

<!-- 不佳示例 -->
<template>
  <div>{{ firstName + ' ' + lastName }}</div>
</template>

<!-- 佳示例 -->
<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

方法3：使用适当的命名规范

<!-- 不佳示例 -->
<template>
  <input v-model="ud" />
</template>

<!-- 佳示例 -->
<template>
  <input v-model="username" />
</template>

方法4：使用props进行通信

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :value="value" @update="updateValue" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: ''
    };
  },
  methods: {
    updateValue(newValue) {
      this.value = newValue;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <input type="text" :value="value" @input="updateValue($event.target.value)" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit('update', newValue);
    }
  }
};
</script>

数据管理（Data Management）

方法5：使用Vuex进行状态管理

// store.js
import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    userName: ''
  },
  mutations: {
    setUserName(state, name) {
      state.userName = name;
    }
  },
  actions: {
    updateUserName({ commit }, name) {
      commit('setUserName', name);
    }
  }
});

export default store;

<!-- 组件 -->
<template>
  <div>{{ userName }}</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['userName'])
  },
  methods: {
    ...mapActions(['updateUserName'])
  },
  mounted() {
    this.updateUserName('John Doe');
  }
};
</script>

方法6：使用异步操作（Actions）处理副作用

<!-- 不佳示例 -->
<template>
  <div @click="fetchData">获取数据</div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<!-- 佳示例 -->
<template>
  <div @click="fetchData">获取数据</div>
</template>

<script>
export default {
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

方法7：使用计算属性代替过滤器

<!-- 不佳示例 -->
<template>
  <div>{{ fullName | capitalize }}</div>
</template>

<!-- 佳示例 -->
<template>
  <div>{{ capitalizedFullName }}</div>
</template>

<script>
export default {
  computed: {
    capitalizedFullName() {
      return this.fullName.charAt(0).toUpperCase() + this.fullName.slice(1);
    }
  }
};
</script>

渲染优化（Rendering Optimization）

方法8：合理使用v-if和v-show

<template>
  <div>
    <div v-if="showCase1">显示案例1</div>
    <div v-else-if="showCase2">显示案例2</div>
    <div v-else>显示默认案例</div>

    <div v-show="showDetails">显示详细信息</div>
  </div>
</template>

方法9：使用key属性优化v-for渲染

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

方法10：避免直接操作DOM元素

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = '更新内容'; // 不佳示例

    // 佳示例
    this.$nextTick(() => {
      this.$refs.myDiv.textContent = '更新内容';
    });
  }
};
</script>

性能优化（Performance Optimization）

方法11：使用异步组件

<template>
  <div>
    <AsyncComponent />

    <button @click="loadComponent">加载组件</button>
  </div>
</template>

<script>
export default {
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  },
  methods: {
    loadComponent() {
      import('./AsyncComponent.vue').then(module => {
        this.AsyncComponent = module.default;
      });
    }
  }
};
</script>

方法12：使用v-once指令

<template>
  <div v-once>{{ staticContent }}</div>
</template>

方法13：避免不必要的计算和渲染

<template>
  <div>{{ expensiveComputation }}</div>
</template>

<script>
export default {
  computed: {
    expensiveComputation() {
      // 非常耗时的计算
    }
  }
};
</script>

方法14：使用keep-alive缓存组件状态

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
    
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      if (this.currentComponent === 'ComponentA') {
        this.currentComponent = 'ComponentB';
      } else {
        this.currentComponent = 'ComponentA';
      }
    }
  }
};
</script>

方法15：使用单文件组件

单文件组件将模板、逻辑和样式封装在同一个文件中，使代码更易于维护和理解。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};
</script>

<style>
div {
  font-size: 18px;
  color: blue;
}
</style>

方法16：利用计算属性

使用计算属性可以根据现有的状态或其他计算属性来动态生成数据，提高代码的可读性和复用性。

<template>
  <div>{{ reversedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

方法17：使用方法而不是直接在模板中写逻辑

将复杂的逻辑放入方法中，然后在模板中调用方法，保持模板的简洁和可读性。

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

方法18：使用v-bind动态绑定属性或类名

使用v-bind指令可以根据数据的变化动态绑定属性或类名，增强代码的灵活性和可重用性。

<template>
  <div :class="{ 'highlight': isHighlighted }">Highlighted div</div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: true
    };
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

方法19：利用条件渲染

使用v-if或v-show指令根据条件来渲染或隐藏元素，使页面更加动态和交互。

<template>
  <div>
    <p v-if="isDisplayed">This paragraph is displayed.</p>
    <p v-else>This paragraph is hidden.</p>
    <button @click="toggleDisplay">Toggle Display</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisplayed: true
    };
  },
  methods: {
    toggleDisplay() {
      this.isDisplayed = !this.isDisplayed;
    }
  }
};
</script>

方法20：合理使用列表渲染

使用v-for指令可以根据数组的数据自动生成列表，方便快捷地渲染多个元素。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">Item {{ item.id }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ]
    };
  }
};
</script>

方法21：使用props传递数据给子组件

通过props可以将父组件的数据传递给子组件，实现组件之间的数据通信和共享。

<!-- Parent.vue -->
<template>
  <child :message="parentMessage"></child>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

方法22：使用自定义事件进行子组件向父组件通信

通过自定义事件可以让子组件向父组件发送消息，实现组件之间的双向通信。

<!-- Child.vue -->
<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('notified', 'Hello from child!');
    }
  }
};
</script>

<!-- Parent.vue -->
<template>
  <div>
    <child @notified="handleChildNotification"></child>
    <p>{{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildNotification(message) {
      this.childMessage = message;
    }
  }
};
</script>

方法23：生命周期钩子的合理使用

根据实际需求，合理使用不同的生命周期钩子函数来管理组件的行为和数据。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 发起异步请求获取数据
      // ...

      this.message = 'Data loaded.';
    }
  }
};
</script>

方法24：利用mixin提取可复用的逻辑

使用mixin可以提取和复用组件之间共享的逻辑代码，增加代码的可维护性和复用性。

<!-- mixin.js -->
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    startLoading() {
      this.isLoading = true;
      // 显示加载动画或其他操作
    },
    finishLoading() {
      this.isLoading = false;
      // 隐藏加载动画或其他操作
    }
  }
}

<!-- MyComponent.vue -->
<template>
  <div>
    <button @click="startLoading">Start Loading</button>
    <button @click="finishLoading">Finish Loading</button>
    <p v-if="isLoading">Loading...</p>
  </div>
</template>

<script>
import loadingMixin from './mixin.js';

export default {
  mixins: [loadingMixin]
};
</script>

方法25：使用v-model简化表单输入绑定

使用v-model指令可以简化表单元素和数据的双向绑定，提高开发效率。

<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
    <p>Welcome, {{ name }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>

方法26：利用Vue插件扩展功能和工具

编写自定义的Vue插件可以方便地扩展Vue的功能和工具，使代码更加灵活和可扩展。

// myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$myMethod = function () {
      console.log('This is my method.');
    };
  }
}

// main.js
import Vue from 'vue';
import myPlugin from './myPlugin.js';

Vue.use(myPlugin);

new Vue({
  // ...
});

方法27：使用Async/Await处理异步操作

使用async/await语法可以更清晰地处理异步操作，避免回调地狱和提高代码的可读性。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  async mounted() {
    try {
      const response = await fetch('https://example.com/api/data');
      const data = await response.json();
      
      this.message = data.message;
    } catch (error) {
      console.error(error);
    }
  }
};
</script>

方法28：利用slot插槽实现更灵活的组件结构

使用slot插槽可以使组件更灵活，允许父组件向子组件传递任意内容。

<!-- Parent.vue -->
<template>
  <child>
    <p>This is the content passed from parent.</p>
  </child>
</template>

<!-- Child.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

方法29：合理使用watch监听数据变化

使用watch可以监听特定数据的变化，并在其发生改变时执行相应的操作，方便响应式地管理数据。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      inputText: ''
    };
  },
  watch: {
    inputText(newText) {
      this.message = `You typed: ${newText}`;
    }
  }
};
</script>

方法30：使用provide/inject进行跨层级组件通信

使用provide和inject可以实现跨层级的组件通信，方便共享数据和方法。

<!-- Parent.vue -->
<template>
  <div>
    <child></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  provide() {
    return {
      message: 'Hello from parent!'
    };
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <grandchild></grandchild>
  </div>
</template>

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

export default {
  components: {
    Grandchild
  }
};
</script>

<!-- Grandchild.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

方法31：利用动态组件实现条件渲染

使用动态组件可以根据条件动态切换组件的显示，实现更灵活的条件渲染。

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'first-component'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'first-component' ? 'second-component' : 'first-component';
    }
  },
  components: {
    FirstComponent,
    SecondComponent
  }
};
</script>

方法32：使用$refs访问组件和元素

使用$refs可以方便地访问组件或DOM元素，进行相应的操作或获取信息。

<template>
  <div>
    <my-component ref="myComponent"></my-component>
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    focusInput() {
      this.$refs.myComponent.focusInput();
    }
  }
};
</script>

<!-- MyComponent.vue -->
<template>
  <div>
    <input ref="myInput">
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    }
  }
};
</script>

方法33：利用v-once进行一次性渲染

使用v-once指令可以使组件或元素只渲染一次，提高性能和避免不必要的更新。

<template>
  <div v-once>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This will only be rendered once.'
    };
  }
};
</script>

方法34：合理使用路由和导航守卫

利用Vue Router的路由和导航守卫可以实现不同页面之间的切换和权限控制。

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router.js';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

方法35：使用组件的动态属性和样式

通过绑定动态属性和样式，可以根据数据的变化来动态改变组件的行为和外观。

<template>
  <div :class="{ 'active': isActive }">
    <button :disabled="isDisabled">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isDisabled: false
    };
  }
};
</script>

<style>
.active {
  background-color: green;
}

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

方法36：利用v-cloak消除闪烁问题

使用v-cloak指令可以解决在页面加载时由于Vue编译渲染的延迟导致的闪烁问题。

<template>
  <div v-cloak>{{ message }}</div>
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

方法37：合理使用scoped样式和深度选择器

使用scoped样式可以限定样式的作用域，避免全局污染，而深度选择器可以穿透样式作用域。

<template>
  <div class="container">
    <p class="message">Scoped Style</p>
    <child></child>
  </div>
</template>

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

export default {
  components: {
    Child
  }
};
</script>

<style scoped>
.container {
  background-color: yellow;
}

.message {
  color: blue;
}
</style>

<!-- Child.vue -->
<template>
  <div>
    <p class="message">Inherited Style</p>
  </div>
</template>

<style scoped>
.message {
  color: red;
}
</style>

方法38：使用动画和过渡效果增强用户体验

利用Vue的过渡和动画功能可以为应用添加平滑的切换和交互效果，提升用户体验。

<template>
  <transition name="fade">
    <div v-if="isVisible">Fade In/Out</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

方法39：利用provide/inject进行全局状态管理

通过provide和inject可以实现全局状态的管理，方便多个组件之间共享状态。

// main.js
import Vue from 'vue';
import App from './App.vue';

export const EventBus = new Vue({
  data() {
    return {
      count: 0
    };
  }
});

new Vue({
  render: h => h(App)
}).$mount('#app');

// ComponentA.vue
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { EventBus } from './main.js';

export default

方法40：使用单文件组件 (Single-File Components)

使用单文件组件可以将模板、样式和逻辑组织在一个文件中，使得代码更加模块化和可维护。

示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

<style scoped>
div {
  color: red;
}
</style>

方法41： 利用计算属性 (Computed Properties)

使用计算属性可以缓存重复计算的结果，并且可以根据依赖动态响应数据的变化。

示例：

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

方法42：使用条件渲染 (Conditional Rendering)

使用条件渲染可以根据不同的条件来展示或隐藏特定的内容。

示例：

<template>
  <div>
    <p v-if="showMessage">Hello, World!</p>
    <p v-else>Sorry, the message is not available.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    }
  }
}
</script>

方法43：使用列表渲染 (List Rendering)

使用列表渲染可以根据数据数组来动态生成列表。

示例：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  }
}
</script>

方法44：使用事件处理 (Event Handling)

使用事件处理可以响应用户的操作，并执行相应的逻辑。

示例：

<template>
  <button @click="increaseCount">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
}
</script>

方法45：利用生命周期钩子函数 (Lifecycle Hooks)

利用生命周期钩子函数可以在组件的不同阶段执行相应的代码。

示例：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    // 在组件创建时执行，可以进行初始化操作
    this.message = 'Component created';
  },
  mounted() {
    // 在组件挂载后执行，可以进行DOM操作
    this.$el.style.color = 'red';
  },
  destroyed() {
    // 在组件销毁时执行，可以进行清理操作
  }
}
</script>

方法46：使用插槽 (Slots)

使用插槽可以在父组件中插入子组件的内容，增强组件的复用性。

示例：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

父组件使用：

<template>
  <my-component>
    <p>Hello, World!</p>
  </my-component>
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

方法47：使用组件通信 (Component Communication)

使用组件通信可以在不同的组件之间传递数据和触发事件。

父组件到子组件通信示例：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件接收父组件传递的props并展示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

方法48：使用Mixins

使用Mixins可以实现多个组件之间相同逻辑的代码复用。

示例：

<script>
const myMixin = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
}

export default {
  mixins: [myMixin]
}
</script>

方法49：使用动态组件 (Dynamic Components)

使用动态组件可以根据不同的条件渲染不同的组件。

示例：

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

方法50：使用过滤器 (Filters)

使用过滤器可以对数据进行格式化处理，使得模板中的显示更加灵活。

示例：

<template>
  <div>{{ message | toUpperCase }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello, world!'
    }
  },
  filters: {
    toUpperCase(value) {
      return value.toUpperCase();
    }
  }
}
</script>
avatar
文章
阅读
粉丝