05 Vue.js 的一些核心概念3-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_64904350/article/details/140652508

让我们继续深入探讨 Vue.js 的一些高级特性和最佳实践。

18. 计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的属性。只有当依赖发生变化时，计算属性才会重新计算。

new Vue({
  el: '#app',
  data: {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性 fullName 是一个方法
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

19. 侦听器（Watchers）

侦听器允许你观察和响应 Vue 实例上的数据变化。

new Vue({
  el: '#app',
  data: {
    watchedProperty: ''
  },
  watch: {
    // 当 watchedProperty 发生变化时，这个函数会调用
    watchedProperty: function (newVal, oldVal) {
      console.log(`从 ${oldVal} 变化到 ${newVal}`);
    }
  }
});

20. 组件通信

组件之间可以通过 props、事件、provide/inject 选项进行通信。

父子组件通信：

父组件向子组件传递数据使用 props，子组件通过 $emit 触发事件来通知父组件。

兄弟组件通信：

可以使用事件总线或者 Vuex 进行通信。

跨级组件通信：

可以使用 provide/inject 选项。

21. 动态和条件性 prop 绑定

Vue 允许你动态地绑定 prop，或者根据条件绑定 prop。

<child-component v-bind:[key]="value"></child-component>
<!-- 条件性绑定 prop -->
<child-component v-if="condition" prop="value"></child-component>

22. v-model 的多种用途

v-model 不仅可以用于 input 元素，也可以用于组件。

<text-input v-model="message"></text-input>

组件内部：

Vue.component('text-input', {
  template: `
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  `,
  props: ['value']
});

23. 自定义事件

自定义事件可以用来在组件之间传递更复杂的数据。

this.$emit('custom-event', {
  detail: '这里是一些数据'
});

24. 使用 Vuex 进行状态管理

Vuex 提供了一种集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

25. Vue CLI

Vue CLI 是 Vue.js 的官方命令行工具，提供了项目脚手架、依赖管理、开发服务器、代码生成等一系列功能。

# 安装 Vue CLI
npm install -g @vue/cli
# 创建一个新的 Vue 项目
vue create my-project
# 运行项目
cd my-project
npm run serve

26. Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  router,
  el: '#app'
});

27. 服务端渲染（SSR）

服务端渲染可以提升首屏加载速度，改善 SEO。

// 使用 Vue CLI 3+ 和 @vue/cli-plugin-ssr 创建 SSR 应用
vue create my-ssr-app

28. 单元测试

Vue 应用可以通过 Jest、Mocha 等测试框架进行单元测试。

// 使用 Vue Test Utils 和 Jest 编写组件的测试用例
import { shallowMount } from '@vue/test-utils';
import Component from './Component.vue';

describe('Component', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(Component, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

29. Vuex 持久化

使用 Vuex 持久化插件，可以将 Vuex 的状态保存到本地存储中，从而在页面刷新后恢复状态。

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  plugins: [createPersistedState({
    key: 'myAppState',
    paths: ['count'] // 只持久化 count 状态
  })]
});