Vue3新语法

一、简介

现在企业当中使用的基本都是vue2.x的版本，vue3.0是尤雨溪官方团队于2020年09月18日正式发布的。
vue3.0版本与其他版本完全不同，它最大限度的减少了开发人员配置工具的次数，另外增添了许多丰富的内置功能，还附带了一个完整的GUI用于创建和管理项目。

参考文档
vue3中文官网
菜鸟教程

二、语法特性

2.1初步入门

vue3中文网

2.1.1 vue-cli方式安装

必须保证你的vue-cli的版本在4.5以上，你可以用vue-V测试一下

如果不符合请重新安装

npm install -g @vue/cli

然后执行下面的三个步骤创建vue脚手架项目：

1. vue create 项目
2. cd 项目
3. npm run serve

2.1.1 使用vite方式创建

vitejs官网

操作步骤如下：

1. npm init vite-app 项目名称
2. cd 项目名
3. npm install (安装所有依赖)
4. npm run dev （启动项目）

三、常用组合式API(Composition API)

3.1 setup

1. 以前vue2中定义数据放在data中，定义方法放在methods中，现在vue3全部定义在setup中
2. setup中返回一个对象，对象中的属性在页面直接使用

vue页面如下操作：

<template>
  <div>
    <div>
      <p>{
   {
   name}}{
   {
   score}}</p>
      <p>{
   {
   fn()}}</p>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "HelloWorld",
  setup() {
   
    let name = "tom";
    let score = 80;
    function setData() {
   
      return `${
     name}你好，你考了${
     score}分`;
    }
    return {
   
      name: name,
      score: score,
      fn: setData
    };
  }
};
</script>

但是注意vue3中vue2的语法也是正常可以使用的

<template>
  <div>
    <div>
      <p>{
   {
   name}}{
   {
   score}}</p>
      <p>{
   {
   fn()}}</p>
      <p>{
   {
   msg}}</p>
      <button @click="show">点击显示</button>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "HelloWorld",
  data() {
   
    return {
   
      msg: "hello"
    };
  },
  methods: {
   
    show() {
   
      console.log(this.msg);
    }
  },
  setup() {
   
    let name = "tom";
    let score = 80;
    function setData() {
   
      return `${
     name}你好，你考了${
     score}分`;
    }
    return {
   
      name: name,
      score: score,
      fn: setData
    };
  }
};
</script>

注意
虽然能实现，但是不建议混用，会出各种意向不到的问题

3.2 ref函数

ref函数是把普通的数据进行包裹，形成一个响应式的引用对象

• 不包裹ref函数调用

<template>
  <div>
    <div>
      <p>{
   {
   name}}{
   {
   score}}</p>
      <button @click="fn">点击显示</button>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "HelloWorld",
  setup() {
   
    let name = "tom";
    let score = 80;
    function setData() {
   
      name = "jim";
      score = 100;
      console.log(name); //jim
      console.log(score); //100
    }
    return {
   
      name: name,
      score: score,
      fn: setData
    };
  }
};
</script>

• ref函数包裹以后

<template>
  <div>
    <div>
      <p>{
   {
   name}}{
   {
   score}}</p>
      <button @click="fn">点击显示</button>
    </div>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "HelloWorld",
  setup() {
   
    let name = ref("tom");
    let score = ref(80);
    function setData() {
   
      name.value = "jim";
      score.value = 100;
      console.log(name); //RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 'tom', _value: 'tom'}
      console.log(score); //RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 80, _value: 80}
    }
    return {
   
      name: name,
      score: score,
      fn: setData
    };
  }
};
</script>

• 如果是处理对象等复杂类型

<template>
  <div>
    <div>
      <p>{
   {
   name}}{
   {
   score}}</p>
      <p>{
   {
   info.sex}}</p>
      <p>{
   {
   info.address}}</p>
      <button @click="fn">点击显示</button>
    </div>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "HelloWorld",
  setup() {
   
    let name = ref("tom");
    let score = ref(80);
    let info = ref({
   
      sex: "男",
      address: "保定"
    });
    function setData()