Vue框架

在学习完vue2.0后我开始了vue3.0的学习，相比vue2.0 ，vue3.0的改动还是非常大的。

一.vue3的优点

• 最火框架，它是国内最火的前端框架之一，官方文档 中文文档

• 性能提升，运行速度事vue2.x的1.5倍左右

• 体积更小，按需编译体积比vue2.x要更小

• 类型推断，更好的支持Ts（typescript）这个也是趋势

• 高级给予，暴露了更底层的API和提供更先进的内置组件

• ★组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑

二.vue3.0的现状

Vue3现状：

• vue-next 2020年09月18日，正式发布vue3.0版本。但是由于刚发布周边生态不支持，大多数开发者处于观望。

• 现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。

  • element-plus 基于 Vue 3.0 的桌面端组件库

  • vant vant3.0版本，有赞前端团队开源移动端组件库

  • ant-design-vue Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

三.什么是组合API写法：Compositon API

• 组合API 写法

  • 代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）

• 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

• 缺点：需要有良好的代码组织能力和拆分逻辑能力

• 补充：为了能让大家较好的过渡到vue3.0的版本来，vue3.0也支持vue2.x选项API写法

四.使用setup完成一个小实例

这里用到的是vue3.0搭配vite编写的，vite是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。

<template>
  <div class="container">
    <!-- 省略了count.value中的value -->
    <div>鼠标的位置:{{count}} </div>
    <div>X坐标轴{{ x }}</div>
    <div>y坐标轴：{{ y }}</div>
    <button @click="add">点击添加</button>
    <div>{{msg}}</div>
    <button @click="getMsg">获取</button>
  </div>
</template>
<script >
//vue3 的写法都是按需导入 导入ref函数
import { ref } from "vue";
export default {
  setup() {
    //只要是template模板需要的数据,方法都定义在setUP中 并返回
    console.log("setup钩子函数");
    let x = 0;
    let y = 0;
    // let count = 0;
   //实现响应式数据
    let count = ref(0); //得到的是ref函数返回的一个对象
    let msg="vue3的写法";
      let getMsg= ()=>{
      console.log(this) //this为undefined 因为created都没有走到，没有创建实例对象，没有new Vue this还没有指向实例对象
    };
    let add=()=>{
       console.log("之前",count.value)//ref函数中的value为真正的值
      count.value++;
      console.log(count.value)//ref函数中的value为真正的值
    }
    return {
      x,
      y,
      count, // 属性简写
      msg,
      getMsg,
      add
    };
  
  },
  //vue3 中强烈不推荐data里面定义数据
  data() {
    return {
      msg: "vue2的写法", //如果和vue3重名了，以vue2data后执行会覆盖setup中定义的数据，这就是为什么vue3中尽量不要写vue2
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  mounted(){
    console.log('mounted');
  },
  destroyed(){
    console.log("destroyed")
  }
};
</script>

五.生命周期

①回顾vue2.x生命周期钩子函数：

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

②认识vue3.0生命周期钩子函数

• setup 创建实例前 相当于created

• onBeforeMount 挂载DOM前

• onMounted 挂载DOM后

• onBeforeUpdate 更新组件前

• onUpdated 更新组件后

• onBeforeUnmount 卸载销毁前

• onUnmounted 卸载销毁后