Vue3基础学习

一、Vue3 安装

npm i @vue/cli -g //全局安装脚手架
vue create 项目名称

二、Vue3 优势

1. 3比2要快将近两倍。
2. 3加入了TS以及对PWA的支持。
3. 3没有beforeCreate、created，用setup代替。
4. 单独功能可以抽离，比如watch、component。
5. 没有眼花缭乱的this。
6. 3的组合式API可以和2的 optionAPI同时存在。
7. 代码更利于维护和封装。

三、Vue3与Vue2的不同

1. 启动方式不同

//vue2启动方式
import Vue from 'vue'
   new Vue({
   store,
   router,
  render:h=>h(App)
  }).$mount("#app")

//vue3启动方式
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

2. 全局方法挂载

//vue2挂载
Vue.prototype.$say = function(msg){alert(msg)}

//vue3挂载
app.config.globalProperties.$say = function(msg){alert(msg)}

• 根节点
  vue2只能有一个根节点
  vue3可以有多个根节点

四、setup api

4.1 作用

• setup函数是一个新的组件选项，作为组件中使用组合API的起点。
• setup中不能使用this，this指向undefined。
• setup函数只会在组件初始化的时候执行一次。
• setup函数在beforeCreated生命周期钩子执行之前执行

4.2 setup语法糖

只需要在 script 标签中添加setup ，组件只需引入不用注册，属性和方法也不用返回，setup 函数也不需要，甚至 export default 都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的 template 中自动获得。
setup script 语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext

• defineProps 用来接收父组件传来的值props。
• defineEmit 用来声明触发的事件表。
• useContext 用来获取组件上下文context。

4.3 生命周期

4.4 ref

创造值类型的响应数据方法

<template>
  <p>姓名：{{name}}, 公司：{{company}}，月薪：{{salary}}</p>
  <button @click="double">月薪double</button>
</template>
<script>
import { ref } from 'vue' //从vue框架中引入
export default {
  name: 'App',
  setup () {
    // 定义响应式对象
    const company = ref('huawei')
    const name = ref('susu')
    const salary = ref(18000)
    
    const double = () => {
      // 在代码中修改(或者获取)值时，需要补上.value
      salary.value *= 2
    }
    return {  
      name, 
      company,
      salary,
      double
    }
  }
}
</script>

注意
在代码中修改（获取）值的时候，需要补上 .value
ref函数

4.5 reactive

创建引用类型响应式数据方法

4.6 watch

监听一个数据变化

案例代码–获取浏览器宽度

//新建utils.js文件
import { ref, onMounted, onBeforeUnmount } from "vue";
//导出获取窗口的宽高
export function useWinSize() {
    const size = ref({ width: window.innerWidth, height: window.innerHeight });
    //窗口变化时候更新 size
    function onResize() {
        size.value = {
          //用窗口的最新宽高更新 width 与 height 
            width: window.innerWidth,
            height: window.innerHeight,
        };
    }
    //组件 挂载完毕 更新  size
    onMounted(() => {
        window.addEventListener("resize", onResize);
    });
    //组件 要卸载的时候移除 事件监听
    onBeforeUnmount(() => {
        window.removeEventListener("resize", onResize);
    });
    return size;
}

在HomeView.vue中使用

<template>
  <div>
    <h1>setup</h1>
    <button @click="num++">{{ num }}</button>
    <step-com :value="num" @input="num = $event" ref="stepper"></step-com>
    <p>{{ size }}</p>
  </div>
</template>

<script setup>
// 使用setup 可以简写 ，不用导出组件不用注册了
import StepCom from "@/components/StepCom.vue";
import { onMounted, ref } from "vue";
import { useWinSize } from "@/utils/utils";
const num = ref(5);

const stepper = ref();
onMounted(() => {
  console.log("组件已经挂载完毕");
  //组件挂在完毕引用stepper组件
  /* stepper.value 就是对stepper-com组件的引用 */
  console.log(stepper.value.count);
});

const size = useWinSize();
</script>

<style>
</style>