01. vue3初探

vue3和vue2基本区别

我们先来看一个简单的需求 ：（如下图）

1、从input框中填好数据

2、点击create按钮，生成到下面的表单中

3、表单中的delete键，能删除该行的数据

html （vue2和vue3都用下面的html）

<template>
  <div id="app">
    <div>
      <p>name: <input type="text" v-model="newPerson.name" /></p>
      <p>age : <input type="text" v-model="newPerson.age" /></p>
      <p>
        sex :
        <select v-model="newPerson.sex">
          <option value="boy">boy</option>
          <option value="girl">girl</option>
        </select>
      </p>
      <a href="javascript:" v-on:click="createPerson">create</a>
    </div>
    <div>
      <table
        border="1"
        width="200"
        style="text-align: center"
        cellspacing="0"
        cellpadding="0"
      >
        <tr>
          <td>name</td>
          <td>age</td>
          <td>sex</td>
          <td>delete</td>
        </tr>
      </table>
      <table
        border="1"
        width="200"
        style="text-align: center"
        cellspacing="0"
        cellpadding="0"
      >
        <tr v-for="(item, key) in people" :key="key">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.sex }}</td>
          <td>
            <a href="javascript:" v-on:click="deletePerson(key)">delete</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

vue2实现方式

<script>
export default {
  data() {
    return {
      newPerson: {
        name: "",
        age: "",
        sex: "boy",
      },
      people: [
        {
          name: "tom",
          age: 12,
          sex: "boy",
        },
      ],
    };
  },
  methods: {
    createPerson() {
      this.people.push(this.newPerson);
      this.newPerson = { name: "", age: "", sex: "boy" };
    },
    deletePerson(index) {
      this.people.splice(index, 1);
    },
  },
};
</script>

vue3实现方式

<script setup>
import { ref } from "vue";

const newPerson = ref({
  name: "",
  age: "",
  sex: "boy",
});
const people = ref([
  {
    name: "tom",
    age: 12,
    sex: "boy",
  },
]);
const createPerson = () => {
  people.value.push(newPerson.value);
  newPerson.value = { name: "", age: "", sex: "boy" };
};
const deletePerson = (index) => {
  people.value.splice(index, 1);
};
</script>

可以大概的看出，vue3和vue2有以下区别 ：

1、script标签中，多个一个setup
2、没有export default { }
3、定义变量不再是放在data中定义，而是直接写变量名即可。定义函数也不放在methods了，也是直接写函数名即可。
4、没有了this
5、定义响应式变量用了一个函数ref来定义

vue3不在使用vue2的选项式api来编程了，而是提倡“组合式api"，两者的区别如下 ：

// 选项式api
{
    data: {
        return {
             bar: 0  
        }
    },
    methods: {
       foo() {
           this.bar ++;
       } 
    }
}

// 组合式api
let bar = 0
const foo = ()=> {
    bar ++
}

组合式api的好处在于，一个模块的功能可以集中在一起写，不用分散。（因为变量不在依赖在data中定义，函数不在依赖在methods）

如下图 ：

功能A、功能B的变量和函数、计算属性、watch等都可以放在一起。

组合式api的好处不单单只有这一个，因为不在依赖选项式api，所以如果有些功能是多个页面共用的，则可以把这些功能写到一个文件中，然后直接导入即可。（vue2要实现这个功能只能用mixins）

如下图，从多个模块中导入功能，组成应用。

setup语法糖

在上面的案例，我们在script标签中写了一个setup，这实际上是vue3提供的一个语法糖。如果不用这个语法糖的话，你应该像下面这样编写vue3

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

export default {
  setup() {
    const newPerson = ref({
      name: "",
      age: "",
      sex: "boy",
    });
    const people = ref([
      {
        name: "tom",
        age: 12,
        sex: "boy",
      },
    ]);
    const createPerson = () => {
      people.value.push(newPerson.value);
      newPerson.value = { name: "", age: "", sex: "boy" };
    };
    const deletePerson = (index) => {
      people.value.splice(index, 1);
    };
    return {
      newPerson,
      people,
      createPerson,
      deletePerson
    }
  }
}
</script>

1、需要加上export default

2、所有的逻辑都要放到setup函数里

3、变量和函数都需要return出去