vue高级语法-CFANZ编程社区

Vue 的高级语法可以帮助开发者更高效地构建复杂应用，下面从多个方面为你详细介绍：

1. 组合式 API

组合式 API 是 Vue 3 引入的新特性，它提供了一种更灵活、更高效的方式来组织和复用逻辑。

1.1 `setup` 函数

setup 函数是组合式 API 的入口，在组件创建之前执行，用于初始化数据和逻辑。

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式数据
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    // 返回需要在模板中使用的数据和方法
    return {
      count,
      increment
    };
  }
};
</script>

1.2 生命周期钩子

在 setup 函数中可以使用组合式 API 的生命周期钩子，它们的命名与选项式 API 类似，但前面加上了 on。

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

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted.');
    });
  }
};
</script>

1.3 自定义组合式函数

可以将可复用的逻辑封装到自定义组合式函数中。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement
  };
}

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

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

export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

2. 异步组件

异步组件允许在需要时才加载组件，有助于提高应用的性能。

2.1 基本用法

<template>
  <div>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);

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

2.2 处理加载状态和错误

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  errorComponent: {
    template: '<div>Error loading component.</div>'
  }
});

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

3. 渲染函数

渲染函数提供了比模板更灵活的方式来创建虚拟 DOM。

<template>
  <!-- 空模板，使用渲染函数 -->
</template>

<script>
import { h } from 'vue';

export default {
  render() {
    return h('div', { class: 'container' }, [
      h('p', 'This is a render function example.'),
      h('button', { onClick: () => console.log('Clicked') }, 'Click me')
    ]);
  }
};
</script>

4. 自定义指令

自定义指令可以对普通 DOM 元素进行底层操作。

4.1 全局自定义指令

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局自定义指令
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

<template>
  <input v-focus />
</template>

<script>
export default {};
</script>

4.2 局部自定义指令

<template>
  <input v-color="'red'" />
</template>

<script>
export default {
  directives: {
    color: {
      mounted(el, binding) {
        el.style.color = binding.value;
      }
    }
  }
};
</script>

5. 插件

插件是一种可以扩展 Vue 功能的方式，通常用于添加全局功能。

// myPlugin.js
export default {
  install(app, options) {
    // 添加全局方法
    app.config.globalProperties.$myMethod = () => {
      console.log('This is a global method.');
    };

    // 添加全局指令
    app.directive('my-directive', {
      mounted(el) {
        el.style.border = '1px solid red';
      }
    });
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './myPlugin.js';

const app = createApp(App);
app.use(MyPlugin);
app.mount('#app');

<template>
  <div v-my-directive>
    <button @click="$myMethod">Call global method</button>
  </div>
</template>

<script>
export default {};
</script>

6. 混合（Mixin）

混合是一种复用组件选项的方式，但在 Vue 3 中，组合式 API 更推荐用于复用逻辑。

// myMixin.js
export const myMixin = {
  data() {
    return {
      message: 'This is a mixin message.'
    };
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};

<template>
  <div>
    <button @click="showMessage">Show mixin message</button>
  </div>
</template>

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

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