vue3快速上手(一)

vue3快速上手

本文旨在快速上手vue3的使用，关于原理上的东西可能会涉及的比较少

搭建工程

vue create 项目名称

这里使用的是vue-cli搭建工程，和vue2搭建工程类似，选择vue version为3x就行了。
最后等待…得到如下的目录结构

使用

vue3中删除了vue的构造函数，不再使用new Vue()来创建Vue实例，改换成了CreateApp,有利于treeshaking

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

setup,它是composition api的入口，运行在beforeCreate和created之前，所以无法获取data和method数据，里面return去的数据模板才能够使用

//app.vue
<template>
  <div>
    {{ count }}
  </div>
</template>

setup(){
    let count = 111;
    return {
      count,
    }
  }

运行界面中会显示111
ref,setup中的数据需要返回出去才能够被模板使用，但是返回出去的只是普通对象，里面的数据并不是响应式的，要让数据称为响应式需要ref进行包装
手动引入ref

import {ref} from 'vue'

setup(){
    let count = ref(111);
    return {
      count,
    }
  }

通过ref包装的对象就不再是普通对象了，对它进行赋值需要给它的value赋值

setup(){
    let count = ref(111);
    const increase = ()=>{
      count.value++;
    }
    return {
      count,
      increase,
    }
  }

除了上面的写法，也可以使用reactive进行包裹

setup(){
    const data = reactive({
      count:111,
      increase: ()=>{
      data.count++;
    }
    })
    const refData = toRefs(data);
    return {
      ...refData
    }
  }

其中reactive是一个函数，可以将普通对象转换为响应式数据，但是如果将reactive包装得到的data进行展开，触发increase不会让页面中的count进行更新，使用toRefs包装data,可以将数据转换为这种格式

{
  foo: Ref<number>,
  bar: Ref<number>
}

使用展开运算符之后触发increase会更新页面中的count值

watchEffect根据其中依赖的响应式数据的变化重新启用副作用，在组件卸载的时候停止，也可以根据返回值来进行手动的停止

//setup函数中
 watchEffect(()=>{
      console.log(count.value)
    })

每次更新count的值都会触发watchEffect

逻辑抽离
在vue2x中进行逻辑抽离复用可以用使用mixin，但是vue3中逻辑抽离比mixin更加优雅，有点类似于react中的hooks.

//抽离出来的逻辑
import { ref, watchEffect } from "vue";
import * as todoStorage from "../util/todoStorage";

export default function useTodoList() {
  const todosRef = ref(todoStorage.fetch());
  window.todosRef = todosRef; // 测试
  watchEffect(() => {
    todoStorage.save(todosRef.value);
  });

  return {
    todosRef,
  };
}