vue3正式发布两年后，我才开始学—vue3+setup+ts（万字总结）-六虎

我正在参加「启航计划」

vue3 于 2020 年 09 月 18 日正式发布，2022 年 2 月 7 日 vue3 成为新的默许版别

间隔 vue3 正式发布现已过去两年有余, 成为默许版别也过去大半年了，以前还能说是对新技能、新特性的观望，到现在面试都直问 vue3 源码了。

我想，不管什么原因，是时分学习 vue3 了

所以这次我也顺便把学习的进程记录下来，算个总结，也有利于日后整理。

前置介绍

在 vue3.2 中，咱们只需在script标签中增加setup。就能够做到，组件只需引进不用注册，特点和办法也不用 return 才能于 template 中运用，也不用写setup函数，也不用写export default ，乃至是自界说指令也能够在咱们的template中主动获得。

本次咱们的学习也是在 setup 语法糖下进行。

环境建立

npm init vue@latest

运用东西

<script setup lang="ts"> + VSCode + Volar

安装 Volar 后，注意禁用 vetur

好的，准备工作现已完成，下面咱们开端进入到 vue3 setup 的正式学习

ref 和 reactive

ref: 用来给基本数据类型绑定呼应式数据，访问时需求经过 .value 的方式， tamplate 会主动解析,不需求 .value
reactive: 用来给杂乱数据类型绑定呼应式数据，直接访问即可

ref其实也是内部调用来reactive完成的

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
    name: string;
    age: number;
    gender?: string;
};
const title = ref<string>("彼时彼刻，恰如此刻此刻");
const userInfo = reactive<Person>({
  name: '树哥',
  age: 18
})
</script>

toRef、toRefs、toRaw

toRef

toRef 假如原始目标对错呼应式的,数据会变,但不会更新视图

<template>
  <div>
     <button @click="change">按钮</button>
     {{state}}
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = {
  name: '树哥',
  age: 18
}
const state = toRef(obj, 'age')
const change = () => {
  state.value++
  console.log('obj:',obj,'state:', state);
}
</script>

能够看到，点击按钮，当原始目标对错呼应式时，运用toRef 的数据改动，可是试图并没有更新

<template>
  <div>
    <button @click="change">按钮</button>
    {{state}}
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = reactive({
  name: '树哥',
  age: 18
})
const state = toRef(obj, 'age')
const change = () => {
  state.value++
  console.log('obj:', obj, 'state:', state);
}
</script>

当咱们把 obj 用 reactive 包裹，再运用 toRef，点击按钮时，能够看到视图和数据都变了

toRef回来的值是否具有呼应性取决于被解构的目标本身是否具有呼应性。呼应式数据经过toRef回来的值仍具有呼应性，非呼应式数据经过toRef回来的值仍没有呼应性。

toRefs

toRefs相当于对目标内每个特点调用toRef，toRefs回来的目标内的特点运用时需求加.value,首要是便利咱们解构运用

<template>
  <div>
    <button @click="change">按钮</button>
    name--{{name}}---age{{age}}
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const obj = reactive({
  name: '树哥',
  age: 18
})
let { name, age } = toRefs(obj)
const change = () => {
  age.value++
  name.value = '张麻子'
  console.log('obj:', obj);
  console.log('name:', name);
  console.log('age:', age);
}
</script>

简略了解就是批量版的toRef,(其源码完成也正是经过目标循环调用了toRef)

toRaw

将呼应式目标修改为普通目标

<template>
  <div>
    <button @click="change">按钮</button>
    {{data}}
  </div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue'
const obj = reactive({
  name: '树哥',
  age: 18
})
const data = toRaw(obj)
const change = () => {
  data.age = 19
  console.log('obj:', obj, 'data:', data);
}
</script>

数据能变化，视图不变化(失去呼应式)

computed

<template>
  <div>
    <p>{{title}}</p>
    <h4>{{userInfo}}</h4>
    <h1>{{add}}</h1>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const add = computed(() => count.value +1)
</script>

watch

vue3 watch 的作用和 Vue2 中的 watch 作用是相同的，他们都是用来监听呼应式状况发生变化的，当呼应式状况发生变化时，就会触发一个回调函数。

watch(data,()=>{},{})

参数一，监听的数据
参数二，数据改动时触发的回调函数（newVal,oldVal）
参数三，options装备项，为一个目标
1、监听ref界说的一个呼应式数据

<script setup lang="ts">
import { ref, watch } from "vue";
const str = ref('彼时彼刻')
//3s后改动str的值
setTimeout(() => { str.value = '恰如此刻此刻' }, 3000)
watch(str, (newV, oldV) => {
  console.log(newV, oldV) //恰如此刻此刻 彼时彼刻
})
</script>

2、监听多个ref

这时分写法变为数组的方式

<script setup lang="ts">
import { ref, watch } from "vue";
let name = ref('树哥')
let age = ref(18)
//3s后改动值
setTimeout(() => {
  name.value = '我叫树哥'
  age.value = 19
}, 3000)
watch([name, age], (newV, oldV) => {
  console.log(newV, oldV) // ['我叫树哥', 19] ['树哥', 18]
})
</script>

3、监听Reactive界说的呼应式目标

<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
  name: '树哥',
  age: 18
})
//3s后改动值
setTimeout(() => {
  info.age = 19
}, 3000)
watch(info, (newV, oldV) => {
  console.log(newV, oldV) 
})
</script>

当 watch 监听的是一个呼应式目标时，会隐式地创建一个深层侦听器，即该呼应式目标里边的任何特点发生变化，都会触发监听函数中的回调函数。即当 watch 监听的是一个呼应式目标时，默许开启 deep：true

4、监听reactive 界说呼应式目标的单一特点

错误写法：

<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
  name: '树哥',
  age: 18
})
//3s后改动值
setTimeout(() => {
  info.age = 19
}, 3000)
watch(info.age, (newV, oldV) => {
  console.log(newV, oldV) 
})
</script>

能够看到操控台出现正告

[Vue warn]: Invalid watch source:  18 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
  at <Index> 
  at <App>

假如咱们非要监听呼应式目标中的某个特点，咱们能够运用 getter 函数的方式,即将watch第一个参数修改成一个回调函数的方式

正确写法：

// 其他不变
watch(()=>info.age, (newV, oldV) => {
  console.log(newV, oldV) // 19 18
})

5、监听reactive界说的引证数据

<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
  name: '张麻子',
  age: 18,
  obj: {
    str: '彼时彼刻，恰如此刻此刻'
  }
})
//3s后改动s值
setTimeout(() => {
  info.obj.str = 'to be or not to be'
}, 3000)
// 需求自己开启 deep:true深度监听,否则不发触发 watch 的回调函数
watch(() => info.obj, (newV, oldV) => {
  console.log(newV, oldV)
}, {
  deep: true
})
</script>

WatchEffect

会立即履行传入的一个函数，一同呼应式追寻其依靠，并在其依靠改动时重新运转该函数。（有点像核算特点）

假如用到 a 就只会监听 a, 就是用到几个监听几个而且对错惰性,会默许调用一次

<script setup lang="ts">
import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改动值
setTimeout(() => {
  num.value++
}, 3000)
watchEffect(() => {
  console.log('num 值改动：', num.value)
})
</script>

能够在操控台上看到，第一次进入页面时，打印出num 值改动：0,三秒后，再次打印num 值改动：1

中止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时主动中止。

可是咱们选用异步的方式创建了一个监听器，这个时分监听器没有与当时组件绑定，所以即使组件销毁了，监听器仍然存在。

这个时分咱们能够显式调用中止监听

<script setup lang="ts">
import { watchEffect } from 'vue'
// 它会主动中止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)
const stop = watchEffect(() => {
  /* ... */
})
// 显式调用
stop()
</script>

清除副作用（onInvalidate）

watchEffect 的第一个参数——effect函数——能够接纳一个参数：叫onInvalidate，也是一个函数，用于清除 effect 发生的副作用

就是在触发监听之前会调用一个函数能够处理你的逻辑，例如防抖

import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改动值
setTimeout(() => {
  num.value++
}, 3000)
watchEffect((onInvalidate) => {
  console.log(num.value)
  onInvalidate(() => {
    console.log('履行');
  });
})

操控台依次输出：0 => 履行 => 1

装备选项

watchEffect的第二个参数，用来界说副作用刷新机遇，能够作为一个调试器来运用

flush （更新机遇）：

1、pre：组件更新前履行
2、sync：强制作用一直同步触发
3、post：组件更新后履行

<script setup lang="ts">
import { ref, watchEffect } from "vue";
let num = ref(0)
//3s后改动值
setTimeout(() => {
  num.value++
}, 3000)
watchEffect((onInvalidate) => {
  console.log(num.value)
  onInvalidate(() => {
    console.log('履行');
  });
}, {
  flush: "post", //此刻这个函数会在组件更新之后去履行
  onTrigger(e) { //作为一个调试东西，可在开发中便利调试
    console.log('触发', e);
  },
})
</script>

生命周期

和 vue2 比较的话，基本上就是将 Vue2 中的beforeDestroy称号改动成beforeUnmount; destroyed 表更为 unmounted；然后用setup替代了两个钩子函数 beforeCreate 和 created；新增了两个开发环境用于调试的钩子

父子组件传参

defineProps

父组件传参

<template>
  <Children :msg="msg" :list="list"></Children>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'
const msg = ref('hello 啊，树哥')
const list = reactive<number[]>([1, 2, 3])
</script>

在 script setup 中，引进的组件会主动注册，所以能够直接运用，无需再经过components进行注册

子组件接受值

defineProps 来接纳父组件传递的值， defineProps是无须引进的直接运用即可

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  msg: string,
  list: number[]
}>()
</script>

运用 withDefaults 界说默许值

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
  </div>
</template>
<script setup lang="ts">
type Props = {
  msg?: string,
  list?: number[]
}
// withDefaults 的第二个参数就是默许参数设置，会被编译为运转时 props 的 default 选项
withDefaults(defineProps<Props>(), {
  msg: '张麻子',
  list: () => [4, 5, 6]
})
</script>

子组件向父组件抛出事情

defineEmits

子组件派发事情

<template>
  <div>
    <p>msg：{{msg}}</p>
    <p>list：{{list}}</p>
    <button @click="onChangeMsg">改动msg</button>
  </div>
</template>
<script setup lang="ts">
type Props = {
  msg?: string,
  list?: number[]
}
withDefaults(defineProps<Props>(), {
  msg: '张麻子',
  list: () => [4, 5, 6]
})
const emits = defineEmits(['changeMsg'])
const onChangeMsg = () => {
emits('changeMsg','黄四郎')
}
</script>

子组件绑定了一个click 事情然后经过defineEmits 注册了一个自界说事情,点击按钮的时分，触发 emit 调用咱们注册的事情，传递参数

父组件接纳

<template>
  <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Children from './Children.vue'
const msg = ref('hello 啊，树哥')
const list = reactive<number[]>([1, 2, 3])
const changeMsg = (v: string) => {
  msg.value = v
}
</script>

获取子组件的实例和内部特点

在 script-setup 模式下，一切数据仅仅默许 return 给 template 运用，不会露出到组件外，所以父组件是无法直接经过挂载 ref 变量获取子组件的数据。

假如要调用子组件的数据，需求先在子组件显现的露出出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

子组件

<template>
  <p>{{name}}</p>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const name = ref('张麻子')
const changeName = () => {
  name.value = '县长'
}
// 将办法、变量露出给父组件运用，父组件才可经过 ref API拿到子组件露出的数据
defineExpose({
  name,
  changeName
})
</script>

父组件

<template>
  <div>
    <child ref='childRef' />
    <button @click="getName">获取子组件中的数据</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import child from './Child.vue'
// 子组件ref（TypeScript语法）
const childRef = ref<InstanceType<typeof child>>()
const getName = () => {
  // 获取子组件name
  console.log(childRef.value!.name)
  // 履行子组件办法
  childRef.value?.changeName()
  // 获取修改后的name
  console.log(childRef.value!.name)
}
</script>

注意：defineProps 、defineEmits 、 defineExpose 和 withDefaults 这四个宏函数只能在 <script setup> 中运用。他们不需求导入，会随着<script setup>的处理进程中一同被编译。

插槽

在 Vue2 的中一般中具名插槽和作用域插槽分别运用slot和slot-scope来完成，如：

父组件

<template>
  <div>
    <p style="color:red">父组件</p>
    <Child ref='childRef'>
      <template slot="content" slot-scope="{ msg }">
        <div>{{ msg }}</div>
      </template>
    </Child>
  </div>
</template>
<script lang="ts" setup>
import Child from './Child.vue'
</script>

子组件

<template>
  <div>child</div>
  <slot name="content" msg="hello 啊，树哥!"></slot>
</template>

在 Vue3 中将slot和slot-scope进行了合并统一运用，运用 v-slot， v-slot:slotName 简写 #slotName

父组件

<template>
  <div>
    <p style="color:red">父组件</p>
    <Child>
      <template  v-slot:content="{ msg }">
        <div>{{ msg }}</div>
      </template>
    </Child>
  </div>
</template>
<script lang="ts" setup>
import Child from './Child.vue'
</script>
<!-- 简写 -->
<Child>
  <template #content="{ msg }">
    <div>{{ msg }}</div>
      </template>
</Child>

实际上,v-slot 在 Vue2.6+ 的版别就能够运用。

异步组件

经过 defineAsyncComponent 异步加载

<template>
  <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
</template>
<script setup lang="ts">
import { ref, reactive,defineAsyncComponent } from 'vue'
// import Children from './Children.vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>

Suspense

Suspense 允许应用程序在等待异步组件时烘托一些其它内容,在 Vue2 中，必须运用条件判别(例如 v-if、 v-else等)来查看数据是否已加载并显现一些其它内容；可是，在 Vue3 新增了 Suspense 了，就不用跟踪何时加载数据并出现相应的内容。

他是一个带插槽的组件，仅仅它的插槽指定了default 和 fallback 两种状况。

Suspense 运用：

1、运用 <Suspense></Suspense> 包裹一切异步组件相关代码
2、<template v-slot:default></template> 插槽包裹异步组件
3、<template v-slot:fallback></template> 插槽包裹烘托异步组件烘托之前的内容

<template>
  <Suspense>
    <template #default>
      <!-- 异步组件-默许烘托的页面 -->
      <Children :msg="msg" :list="list" @changeMsg="changeMsg"></Children>
    </template>
    <template #fallback>
      <!-- 页面还没加载出来展示的页面 -->
      <div>loading...</div>
    </template>
  </Suspense>
</template>
<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue'
const Children = defineAsyncComponent(() => import('./Children.vue'))
</script>

Teleport传送组件

Teleport 是一种能够将咱们的模板烘托至指定DOM节点，不受父级style、v-show等特点影响，但data、prop数据依旧能够共用的技能

首要解决的问题：由于Teleport节点挂载在其他指定的DOM节点下，彻底不受父级style款式影响

运用：经过to 特点刺进到指定元素方位，如 body，html，自界说className等等。

<template>
  <!-- 刺进至 body -->
  <Teleport to="body">
    <Children></Children>
  </Teleport>
  <!-- 默许 #app 下 -->
  <Children></Children>
</template>
<script lang="ts" setup>
import Children from './Children.vue'
</script>

keep-alive 缓存组件

作用和vue2共同，仅仅生命周期称号有所更改
初度进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：只会触发 onActivated

事情挂载的办法等，只履行一次的放在 onMounted中；组件每次进去履行的办法放在 onActivated中

provide/inject

provide 能够在祖先组件中指定咱们想要提供给子孙组件的数据或办法，而在任何子孙组件中，咱们都能够运用 inject 来接纳 provide 提供的数据或办法。

父组件

<template>
  <Children></Children>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import Children from "./Children.vue"
const msg = ref('hello 啊，树哥')
provide('msg', msg)
</script>

子组件

<template>
  <div>
    <p>msg：{{msg}}</p>
    <button @click="onChangeMsg">改动msg</button>
  </div>
</template>
<script setup lang="ts">
import { inject, Ref, ref } from 'vue'
const msg = inject<Ref<string>>('msg',ref('hello啊！'))
const onChangeMsg = () => {
  msg.value = 'shuge'
}
</script>

假如你想要传入的值能呼应式的改动，需求经过ref 或 reactive 增加呼应式

v-model 升级

v-model 在vue3能够说是破坏式更新，改动还是不少的

咱们都知道，v-model 是props 和 emit 组合而成的语法糖,vue3中 v-model 有以下改动

改动：value => modelValue
改动：update:input => update:modelValue
新增：一个组件能够设置多个 v-model
新增：开发者能够自界说 v-model修饰符
v-bind 的 .sync 修饰符和组件的 model 选项已移除

子组件

<template>
  <div>
    <p>{{msg}}，{{modelValue}}</p>
    <button @click="onChangeMsg">改动msg</button>
  </div>
</template>
<script setup lang="ts">
type Props = {
  modelValue: string,
  msg: string
}
defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'update:msg'])
const onChangeMsg = () => {
  // 触发父组件的值更新
  emit('update:modelValue', '恰如此刻此刻')
  emit('update:msg', '彼时彼刻')
}
</script>

父组件

<template>
  // v-model:modelValue简写为v-model
  // 绑定多个v-model
  <Children v-model="name" v-model:msg="msg"></Children>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Children from "./Children.vue"
const msg = ref('hello啊')
const name = ref('树哥')
</script>

自界说指令

自界说指令的生命周期

created 元素初始化的时分
beforeMount 指令绑定到元素后调用只调用一次
mounted 元素刺进父级dom调用
beforeUpdate 元素被更新之前调用
update 这个周期办法被移除改用updated
beforeUnmount 在元素被移除前调用
unmounted 指令被移除后调用只调用一次

完成一个自界说拖拽指令

<template>
  <div v-move class="box">
    <div class="header"></div>
    <div>
      内容
    </div>
  </div>
</template>
<script setup lang='ts'>
import { Directive } from "vue";
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左面边框的间隔=点击时的方位相对于浏览器最左面的间隔-物体左面框相对于浏览器最左面的间隔
      console.log(e.clientX, e.clientY, "起始方位", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
        console.log(e.clientX, e.clientY, "方位改动");
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};
</script>
<style >
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.header {
  height: 20px;
  background: black;
  cursor: move;
}
</style>

自界说 hooks

咱们都知道在 vue 中有个东西叫 mixins，他能够将多个组件中相同的逻辑抽离出来，完成一次写代码，多组件受益的作用。

可是 mixins 的副作用就是引证的多了变量的来历就不清晰了，而且还会有变量来历不明确,不利于阅读，容易使代码变得难以维护。

Vue3 的 hook函数相当于 vue2 的 mixin, 不同在与 hooks 是函数
Vue3 的 hook函数能够协助咱们进步代码的复用性, 让咱们能在不同的组件中都运用 hooks 函数

useWindowResize

咱们来完成一个窗口改动时获取宽高的 hook

import { onMounted, onUnmounted, ref } from "vue";
function useWindowResize() {
  const width = ref(0);
  const height = ref(0);
  function onResize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
  }
  onMounted(() => {
    window.addEventListener("resize", onResize);
    onResize();
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  return {
    width,
    height
  };
}
export default useWindowResize;

运用：

<template>
  <h3>屏幕尺度</h3>
  <div>宽度：{{ width }}</div>
  <div>高度：{{ height }}</div>
</template>
<script setup lang="ts">
import useWindowResize from "../hooks/useWindowResize.ts";
const { width, height } = useWindowResize();
</script>

style v-bind CSS变量注入

<template>
  <span> style v-bind CSS变量注入</span>  
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const color = ref('red')
</script>
<style scoped>
  span {
    /* 运用v-bind绑定组件中界说的变量 */
    color: v-bind('color');
  }  
</style>

参考

Vue3运用TypeScript的正确姿势
超极速的Vue3上手指北
Vue3.0 新特性以及运用经验总结
自界说指令directive

往期回顾

2022年了，我才开端学 typescript ，晚吗？（7.5k字总结）
当咱们对组件二次封装时咱们在封装什么
vue 项目开发，我遇到了这些问题
关于首屏优化，我做了哪些

vue3正式发布两年后，我才开始学—vue3+setup+ts（万字总结）