Vue3 实战笔记 | 快速入门

前言

vue3正式版已经发布好几个月了。相信有不少人早已跃跃欲试，这里根据这几天的项目经验罗列几点在项目中可能用到的知识点跟大家分享总结，在展开功能点介绍之前，先从一个简单的demo帮助大家可以快速入手新项目🌉

案例🌰

在正式介绍之前，大家可以先跑一下这个 demo 快速熟悉用法

效果如下👇

vue3生命周期

vue3的生命周期函数只能用在setup()里使用，变化如下👇

扩展

1. 可以看出来vue2的beforeCreate和created变成了setup

2. 绝大部分生命周期都是在原本vue2的生命周期上带上了on前缀

使用

在setup中使用生命周期：

import {  onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 在挂载后请求数据
      getList();
    })
  }
};

vue3常用api

上述案例中使用了一些常用的api，下面带大家一一认识下我们的新朋友

setup()

setup函数是一个新的组件选项。作为在组件内使用Composition API的入口点。从生命周期钩子的视角来看，它会在beforeCreate钩子之前被调用，所有变量、方法都在setup函数中定义，之后return出去供外部使用

该函数有2个参数：

• props

• context

其中context是一个上下文对象，具有属性（attrs，slots，emit，parent，root），其对应于vue2中的this.$attrs，this.$slots，this.$emit，this.$parent，this.$root。

setup也用作在tsx中返回渲染函数：

import {  onMounted } from 'vue';
setup(props, { attrs, slots }) {
    return () => {
      const propsData = { ...attrs, ...props } as any;
      return {extendSlots(slots)};
    };
  },
*注意：this关键字在setup()函数内部不可用，在方法中访问setup中的变量时，直接访问变量名就可以使用。

扩展

为什么props没有被包含在上下文中？

1. 组件使用props的场景更多，有时甚至只需要使用props

2. 将props独立出来作为一个参数，可以让TypeScript对props单独做类型推导，不会和上下文中其他属性混淆。这也使得setup、render和其他使用了TSX的函数式组件的签名保持一致。

reactive, ref

reactive和ref都是vue3中用来创建响应式数据的api，作用等同于在vue2中的data，不同的是他们使用了ES6的Porxy API解决了vue2 defineProperty 无法监听数组和对象新增属性的痛点

用法

效果如下👇

区别

• 使用时在setup函数中需要通过内部属性.value来访问ref数据，return出去的ref可直接访问，因为在返回时已经自动解套；reactive可以直接通过创建对象访问

• ref接受一个参数，返回响应式ref对象，一般是基本类型值（String 、Nmuber 、Boolean 等）或单值对象。如果传入的参数是一个对象，将会调用 reactive 方法进行深层响应转换（此时访问ref中的对象会返回Proxy对象，说明是通过reactive创建的）；引用类型值（Object 、Array）使用reactive

toRefs

将传入的对象里所有的属性的值都转化为响应式数据对象(ref)

使用reactive return 出去的值每个都需要通过reactive对象 .属性的方式访问非常麻烦，我们可以通过解构赋值的方式范围，但是直接解构的参数不具备响应式，此时可以使用到这个api（也可以对props中的响应式数据做此处理）

将前面的例子作如下👇修改使用起来更加方便：

toRef

toRef 用来将引用数据类型或者reavtive数据类型中的某个值转化为响应式数据

用法

• reactive数据类型

/* reactive数据类型 */
      let obj = reactive({ name: '小黄', sex: '1' });
      let state = toRef(obj, 'name');

      state.value = '小红';
      console.log(obj.name); // 小红
      console.log(state.value); // 小红

      obj.name = '小黑';
      console.log(obj.name); // 小黑
      console.log(state.value); // 小黑

• 引用数据类型

小结

• ref 是对原数据的拷贝，响应式数据对象值改变后会同步更新视图，不会影响到原始值。

• toRef 是对原数据的引用，响应式数据对象值改变后不会改变视图，会影响到原始值。

isRef

判断是否是ref对象,内部是判断数据对象上是否包含__v_isRef属性且值为true。

setup() {
      const one = ref(0);
      const two = 0;
      const third = reactive({
        data: '',
      });
      let four = toRef(third, 'data');
      const { data } = toRefs(third);
      
      console.log(isRef(one)); // true
      console.log(isRef(data)); // true
      console.log(isRef(four)); // true
      console.log(isRef(two)); // false
      console.log(isRef(third)); // false
    }

unref

如果参数为ref，则返回内部原始值，否则返回参数本身。内部是val = isRef(val) ? val.value : val的语法糖。

setup() {
      const hello = ref('hello');
      console.log(hello); // { __v_isRef: true,value: "hello"... }
      const newHello = unref(hello);
      console.log(newHello); // hello
    }

watch, watchEffect

watch

watch侦听器，监听数据变化

用法和vue2有些区别

语法为：watch(source, callback, options)

• source：用于指定监听的依赖对象，可以是表达式，getter函数或者包含上述两种类型的数组（如果要监听多个值）

• callback：依赖对象变化后执行的回调函数，带有2个参数：newVal，oldVal。如果要监听多个数据每个参数可以是数组 [newVal1, newVal2, ... newValN]，[oldVal1, oldVal2, ... oldValN]

• options：可选参数，用于配置watch的类型，可以配置的属性有 immediate（立即触发回调函数）、deep（深度监听）

let title = ref('Create');
      let num = ref(0);
      const state = reactive({
        nums: 0,
        list: [],
      });
      
      // 监听ref
      watch(title, (newValue, oldValue) => {
         /* ... */
      });

      // 监听reactive
      watch(
        // getter
        () => state.list.length,
        // callback
        (v = 0) => {
          state.nums = v;
        },
         // watch Options
        { immediate: true }
      );
      
      // 监听多个ref
      watch([title, num], ([newTitle, newNum], [oldTitle, oldNum]) => {
        /* ... */
      });      
      
      // 监听reactive多个值
      watch([() => state.list, () => state.nums], ([newList, newNums], [oldList, oldvNums]) => {
        /* ... */
      });

我们可以向上面一样将多个值的监听拆成多个对单个值监听的watch。这有助于我们组织代码并创建具有不同选项的观察者；watch方法会返回一个stop()方法，若想要停止监听，便可直接执行该stop函数
watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更是重新运行该函数.

可以看到在组件初始化的时候该回调函数立即执行了一次，同时开始自动检测回调函数里头依赖的值，并在依赖关系发生改变时自动触发这个回调函数，这样我们就不必手动传入依赖特意去监听某个值了

computed

传入一个getter函数,返回一个默认不可手动修改的ref对象.

setup() {
      let title = ref('Create');
      const vTitle = computed(() => '-' + title.value + '-');
      
      function handleClick() {
        if (title.value === 'Create') {
          title.value = 'Reset';
        } else {
          title.value = 'Create';
        }
      }
      }

反转字符串:

setup() {
    const state = reactive({
      value: '',
      rvalue: computed(() =>
        state.value
          .split('')
          .reverse()
          .join('')
      )
    })
    return toRefs(state)
  }

provide, inject

provide()和inject()用来实现多级嵌套组件之间的数据传递，父组件或祖先组件使用 provide()向下传递数据，子组件或子孙组件使用inject()来接收数据

// 父组件


// 孙组件

getCurrentInstance

getCurrentInstance方法用于获取当前组件实例，仅在setup和生命周期中起作用

import { getCurrentInstance, onBeforeUnmount } from 'vue';

const instance = getCurrentInstance();
// 判断当前组件实例是否存在
if (instance) {
    onBeforeUnmount(() => {
        /* ... */
     });
 }

通过instance中的ctx属性可以获得当前上下文，通过这个属性可以使用组件实例中的各种全局变量和属性

$Refs

为了获得对模板中元素或组件实例的引用，我们可以同样使用ref并从setup（）返回它

.sync

在vue2.0中使用.sync实现prop的双向数据绑定，在vue3中将它合并到了v-model里

vue2.0

          :current-page.sync="currentPage1"
    >
    

vue3.0

          v-model:current-page="currentPage1"
    >
    

v-slot

Child.vue

vue2用法

vue3用法

新指令v-slot统一slot和slot-scope单一指令语法。速记v-slot可以潜在地统一作用域和普通插槽的用法。

      "user">
        

          "(item, index) in user.data" :key="index">{{ item }}
        

      
      "user">
        
{{ user.data }}

      
      
      #two="user">
      
{{ user.data }}