创建Vue3.0项目,对比Vue2.0改变了什么?

0.安装

0.1Vue CLI

对于Vue3.0需要用到4.5版本以上的 Vue CLI才能安装
检查版本Vue CLI命令

vue --version

安装Vue CLI命令

npm install -g @vue/cli

0.2脚手架创建Vue3.0项目

vue create 项目名
选择版本号,上下键做选择,这里选的自定义

选择需要的预置,按空格键选择,按a切换全部，i全不选

选择需要的版本号

路由器使用历史记录模式?(需要适当的服务器设置，以便在生产中进行索引回退)

编码风格根据个人习惯选择

选择在什么时间进行检测,保存时或提交时

包的配置选择单独存放一个文件

是否以后都是这样的配置?

1.简述Vue3.0

Vue3.0的语法可以完全使用Vue2.0,根据尤雨溪所述,Vue3.0主要改的是底层,比如:
javascript变更为typescript,
Object.defineProperty变更为proxy,
webpack变更为vite(目前不是特别稳定),
还添加了组合式(composition)API等
【Web前端会客厅】Vue之父尤雨溪深度解读Vue3.0的开发思路

2.对比Vue2.0变更

2.1App.vue

支持多个根元素

2.2proxy

深入vue2响应式原理,在对象或数组新增属性无响应解决方法
在vue2使用数组/对象无响应性问题得到解决

<template>
  <div class="index">{{ user }}</div>
  <div class="index">{{ hobby }}</div>
  <button @click="setAge">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "山竹",
      },
      hobby: ["看书", "羽毛球", "旅游"],
    };
  },
  methods: {
    setAge() {
      this.user.age = 18; //新增对象属性
      //  this.hobby.splice(下标,添加,修改的值)
      this.hobby.splice(1, 1, "羽毛球修改了"); //修改数组
    },
  },
};
</script>

效果

2.3Composition API(组合API)

• 专业版:通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。
• 设计动机
  1.维护大型项目的时候,特别是在阅读他人代码时,uptionAPI会把完整的逻辑切割到不同选项,导致阅读苦难
  2,组件公共代码,需要进行代码复用,vue2.0会出现比较困难的情况,例如mixin
  3.为了以后使用ts实现更好的类型推断
• 口水版不是非要使用这种模式,只是这种模式对于处理复杂项目比较有用,但如果没处理好那代码会变得很糟糕,还不如用以前uptionsAPI.
  模板部分还是跟以前一样,作用的只是script部分的写法不同.
  setup相当以前data的角色,用reactive声明响应
  取消this,用暴露的对象指向当前方法

官网:https://www.vue3js.cn/docs/zh/api/composition-api.html#setup

<template>
  <div class="index">
    <div>
      <!-- addState方法单个增加 -->
      {{ state.count }}
    </div>
    <div>
      <!-- dobuleCount计算属性乘2增加 -->
      {{ state.dobuleCount }}
    </div>
    <!-- 单击增加一位 -->
    <button @click="addState">点击</button>
  </div>
</template>

<script>
// 通过组合API实现逻辑
// reactive方法用于定义响应性数据
import { onMounted, computed, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      count: 0,
      // 计算属性:方法 定义函数
      dobuleCount: computed(() => state.count * 2),
    });
    // 定义方法function 函数名({})
    function addState() {
      state.count++;
    }
    // 钩子函数
    onMounted(() => {
      console.log("mounted!");
    });
    // 暴露
    return { state, addState };
  },
};
</script>

效果

抽离效果

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in state.stus"
        :key="index"
        @click="handelClick(index)"
      >
        {{ item.name }}--{{ item.age }}--{{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>
// 引入
// ref是一个对象,只能监听简单类型的变化(对象/数组不能监听)
// reactive监听复杂类型
import { ref, reactive } from "vue";
export default {
  setup() {
    // let state = reactive({
    //   stus: [
    //     { id: 1, name: "杀生丸", age: 18 },
    //     { id: 2, name: "小玲", age: 5 },
    //     { id: 3, name: "哆啦A梦", age: 122 },
    //   ],
    // });
    // function handelClick(index) {
    //   // console.log(index);
    //  state.stus= state.stus.filter((item,i)=>{
    //    return i!==index
    //   })
    // }
    // 调用
    let { state, handelClick } = userRemove();
    return { state, handelClick };
  },
};
// 抽离到外面,需要用时直接调用
function userRemove() {
  let state = reactive({
    stus: [
      { id: 1, name: "杀生丸", age: 18 },
      { id: 2, name: "小玲", age: 5 },
      { id: 3, name: "哆啦A梦", age: 122 },
    ],
  });
  function handelClick(index) {
    // console.log(index);
    // 只返回没有被点击的元素,反向达到删除效果
    state.stus = state.stus.filter((item, i) => {
      return i !== index;
    });
  }
  // 暴露
  return { state, handelClick };
}
</script>

抽离不同文件

// index.vue
<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in state.stus"
        :key="index"
        @click="handelClick(index)"
      >
        {{ item.name }}--{{ item.age }}--{{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>
// 引入
import {userRemove} from './remove'
export default {
  setup() {
    // let state = reactive({
    //   stus: [
    //     { id: 1, name: "杀生丸", age: 18 },
    //     { id: 2, name: "小玲", age: 5 },
    //     { id: 3, name: "哆啦A梦", age: 122 },
    //   ],
    // });
    // function handelClick(index) {
    //   // console.log(index);
    //  state.stus= state.stus.filter((item,i)=>{
    //    return i!==index
    //   })
    // }
    // 调用
    let { state, handelClick } = userRemove();
    return { state, handelClick };
  },
};

</script>

//remove.js
// 别忘了引入依赖
import { reactive } from "vue";

// 抽离到外面,需要用时直接调用
export function userRemove() {
    let state = reactive({
      stus: [
        { id: 1, name: "杀生丸", age: 18 },
        { id: 2, name: "小玲", age: 5 },
        { id: 3, name: "哆啦A梦", age: 122 },
      ],
    });
    function handelClick(index) {
      // console.log(index);
      // 只返回没有被点击的元素,反向达到删除效果
      state.stus = state.stus.filter((item, i) => {
        return i !== index;
      });
    }
    // 暴露
    return { state, handelClick };
  }

compositionAPI与optionAPI的混合使用

<template>
  <div>
    <div @click="handelClick">{{name}}</div>
    <div @click='handelAge'>{{age}}</div>
  </div>
</template>

<script>
// 引入依赖
import {ref} from 'vue'
export default {
  // vue2写法
  data(){
    return{
      name:'杀生丸'
    }
  },methods:{
    handelClick(){
      this.name='丸生杀'
    }
  },

  // vue3写法
setup(){
  let age=ref(18)
  function handelAge(){
    age.value++
  }
  // 暴露
  return{age,handelAge}
}
};

</script>

compositionAPI的本质

compositionAPI可以叫组合API也可以叫注入API,本质是在运行当中把compositionAPI暴露出去的数据注入到option当中.

vite

尤雨溪介绍说写了个新的编译器叫vite,启动速度比webpack快,做到按需编译,而webpack需要编译一千多个包时间相对就比较慢.
但目前还在开发,生态也不够成熟,默认模式还是以webpack进行打包.
Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生ESModule开发，在生产环境下基于 Rollup 打包。
它主要具有以下特点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

下载安装:https://www.vue3js.cn/docs/zh/guide/installation.html#vite