vue3.0快速上手

一、创建vue3.0的3种方式

+ Vue-CLI
+ Webpack
+ Vite

---

二、什么是Vite

• Vite是Vue作者尤雨溪开发的一款意图取代webpack的工具

• 其实现原理是利用ES6的import会发送请求去加载文件的特性,
  拦截这些请求, 做一些预编译, 省去webpack冗长的打包时间

• 安装Vite
  npm install -g create-vite-app

• 利用Vite创建Vue3项目
  create-vite-app projectName

• 安装依赖运行项目
  cd projectName
  npm install
  npm run dev

---

三、vue3.0兼容vue2.x

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: function () {
    return {
      msg: 'message'
    }
  },
  methods:{
    myFn(){
      alert('弹出信息');
    }
  }
}
</script>

<style>

</style>

---

四、vue2.x的问题

如下图所示，是vue2.x的模式。可以发现数据与业务逻辑分散，不利于管理与维护，于是vue3.0推出了组合API

<template>
  <div>
    <form>
      <input type="text" v-model="stu.id">
      <input type="text" v-model="stu.name">
      <input type="text" v-model="stu.age">
      <input type="submit" @click="addStu">
    </form>
    <ul>
      <li v-for="(stu, index) in stus"
      :key="stu.id"
      @click="remStu(index)">
        {{stu.name}} -- {{stu.age}}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data:function () {
    return {
      stus:[
        {id:1, name:'zs', age:10},
        {id:2, name:'ls', age:20},
        {id:3, name:'ww', age:30},
      ],
      stu:{
        id:'',
        name:'',
        age:''
      }
      // 新增功能1的数据
      // 新增功能2的数据
    }
  },
  methods:{
    remStu(index){
      this.stus = this.stus.filter((stu, idx) => idx !== index);
    },
    addStu(e){
      e.preventDefault();
      const stu = Object.assign({}, this.stu);
      this.stus.push(stu);
      this.stu.id='';
      this.stu.name='';
      this.stu.age='';
    }
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  computed:{
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  watch:{
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  }
}
</script>

<style>

</style>

关于组合API的使用，会在下个章节

说明：本章内容为博主在原视频基础上写的学习笔记，来源https://www.bilibili.com/video/BV14k4y117LL?p=1，教程版权归原作者所有。