vue3初学

本文章转自于 juejin.cn/post/694045…

setup执行机制

setup简介

setup执行时机是在beforeCreate之前执行的 两个参数:

1. props:组件传入的属性
2. context

• setup接受的props是响应式的,当传入新的props时,会被及时更新,由于是响应式,所以不可以使用ES6解构,解构会消除它的响应式.
• context提供了this中最常用的三个属性attrs、slot和emit，分别对应Vue2.x中的$attr属性、slot插槽、$emit事件

reactive、ref和toRefs

• toRefs : 用于将一个reactive对象转化为属性全部为ref对象的普通对象 例如:

<template>
  <div>
    <p>第{{ year }}年</p>
    <p>姓名: {{ nickName }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs} from "vue";
export default defineComponent({
  setup() {
    const year = ref(0);
    const user = reactive({
      nickName: "xiaofan",
      age: 26,
      gender: "女"
    })
    setInterval(() => {
      year.value ++
      user.age ++
    }, 1000)
    return {
      year,
      // 使用toRefs
      ...toRefs(user)
    } 
  }
});
</script>

生命周期钩子

从图中看出,vue3与vue2对比

• 新增了setup
• 将vue2.0中的beforeDestroy名称更改为beforeUnmount,destroyed表更为unmount
• beforeCreate和created被setup代替

watch与watchEffect的用法

watch函数用来侦听特定的数据源,并在回调函数中执行副作用,默认情况是惰性的,也就是说仅在侦听的数据源变更时才执行回调

watch(sourse, callback, [options])