vue3.0从入门到放弃-一一网

1. 开始

Vue3.0已经发布一段时间了，也是用一段时间了，感觉Vue3.0还是比较好用的，特别是Composition API用起来还是比较顺滑的，相对于Vue2.0的Options API还是比较清晰明了的，减少了来回切换的烦恼，提高了可读性和可维护性。

下面两张图可以清晰的对比两种API的区别，相信你看看完会果断选择Composition API?

先来看下vue2.0的Options API

在来看下vue3.0Composition API

看完后，你是否还是有点迷惑，那我们再来看下一段实例。

先来看下Vue2写法：

export default {
  data() {
    return {
      list: [
        { title: 'VueJS', name: '学习Vue', id: 1 },
        { title: 'ReactJS', name: '学习React', id: 2 },
        { title: 'AngularJS', name: '学习Angular', id: 3 },
      ],
    };
  },
  methods: {
    addItem() {
      this.list.push({ title: 'NodeJs', name: '学习Node' });
    },
    deleteItem(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
复制代码

在来看下Vue3写法：

import { ref } from 'vue';

export default {
  setup() {
    const list = ref([
      { title: 'VueJS', name: '学习Vue', id: 1 },
      { title: 'ReactJS', name: '学习React', id: 2 },
      { title: 'AngularJS', name: '学习Angular', id: 3 },
    ]);
    const addItem = () => {
      list.value.push({ title: 'NodeJs', name: '学习Node' });
    };
    const deleteItem = (id) => {
      list.value = list.value.filter((item) => item.id !== id);
    };
    return {
      list, addItem, deleteItem,
    };
  },
};
复制代码

对比Vue2语法，Vue3写起来简洁和方便，省去了我们来回切换的时间。

2. 创建项目

看到这个是不是有种跃跃欲试的感觉，下面我们先搭建开发环境。

我们可以使用 Vue CLI 或者
Vite2 搭建Vue3项目,

具体可以查看手把手教你用vite2搭建Vue3.0项目在这就不具体说了。

3. 使用

我们首先看下 Vue3中文文档，了解Vue3基本语法，相对Vue2来说，还是有很大的改变的。

如果不想看文档也可以查看体验Vue3.0

4. 开发优化

1. script setup

如果不想使用没使用一个变量都要return，那就可以使用setup开发，下面看下怎么使用

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

export default {
  props: { msg: String },
  setup() {
    const state = reactive({ count: 0 });
    const addCount = () => {
      state.count++;
    };
    return {
      state, addCount,
    };
  },
};
</script>
复制代码

使用script setup ↓↓

<script setup>
import { defineProps, reactive } from 'vue';
import Test from './Test.vue';

defineProps({
  msg: String,
});

const state = reactive({ count: 0 });
const addCount = () => {
  state.count++;
};
</script>
复制代码

2. style

export default {
  setup() {
    const state = reactive({
      fontSize: 20,
      color: 'red',
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.color-style{
  color: v-bind(color);
  font-size: v-bind(fontSize);
}
</style>
复制代码

3. v-model 参数

先看下官网demo

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
复制代码

.sync修饰符已经弃用，如果想异步传值可以使用v-model:[params]

Vue2中一个组件v-model指定绑定一个值，Vue3中v-model可以绑定多个，这样对于我们同时动态获取多个值非常方便。

<template>
  <input type="text" :value="value" @input="changeValue"> <br>
  <span>{{ text }}</span>
  <button @click="clickButton">
    plus
  </button>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  name: 'BaseInput',
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    text: {
      type: [String, Number], default: '测试',
    },
  },
  emits: ['update:value', 'input', 'update:text'],
  setup(props, context) {
    const state = reactive({
      textTest: '测试',
    });

    const changeValue = (e) => {
      context.emit('update:value', e.target.value);
      context.emit('input', e.target.value);
    };

    const clickButton = () => {
      context.emit('update:text', Math.random() * 100);
    };

    return { ...toRefs(state), changeValue, clickButton };
  },
};
</script>

<style>
</style>

复制代码

4. Composition API

首先看下我们todos逻辑

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      list: [
        { title: 'VueJS', name: '学习Vue', id: 1 },
        { title: 'ReactJS', name: '学习React', id: 2 },
        { title: 'AngularJS', name: '学习Angular', id: 3 },
      ],
    });
    const addItem = () => {
      state.list.push({ title: 'NodeJs', name: '学习Node' });
    };
    const deleteItem = (id) => {
      state.list = state.list.filter((item) => item.id !== id);
    };
    const getLength = (list) => list.length;
    return {
      ...toRefs(state), addItem, deleteItem, getLength,
    };
  },
};
</script>
复制代码

我们可以把逻辑或者其他的一些模块都拆出去，真正做到组合式API，方便以后我们的代码的维护，直接定位问题，找到模块修改就行，不会影响到其他的逻辑。

简单看一个实现：

// test.js

import { reactive, toRefs } from 'vue';

export default function () {
  const state = reactive({
    list: [
      { title: 'VueJS', name: '学习Vue', id: 1 },
      { title: 'ReactJS', name: '学习React', id: 2 },
      { title: 'AngularJS', name: '学习Angular', id: 3 },
    ],
  });
  const addItem = () => {
    state.list.push({ title: 'NodeJs', name: '学习Node' });
  };
  const deleteItem = (id) => {
    state.list = state.list.filter((item) => item.id !== id);
  };
  const getLength = (list) => list.length;
  return {
    state, addItem, deleteItem, getLength,
  };
}
复制代码

<script>
import { toRefs } from 'vue';
import useTest from './test';

export default {
  setup() {
    const {
      state, addItem, deleteItem, getLength,
    } = useTest();
    return {
      ...toRefs(state), addItem, deleteItem, getLength,
    };
  },
};
</script>
复制代码