vue3小结(文章简化总结。。。。)

setup 函数取代beforeCreate 、created ，在他两之前执行，该函数相当于一个生命周期函数。vue中过去的data，methods，watch，computed写在setup()函数中.

reactive函数接收对象，返回响应式数据对象

<template>
  {{test}} // 11111
<template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
  setup(props, context) {
  
    let state = reactive({
      test: '11111'
    });
    
    return state
  }
});
</script>

ref() 函数用来根据给定的值创建一个响应式的数据对象

<template>
    <div>
        {{test}} // 10
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const test= ref<number>(10)
    // 在js 中获取ref 中定义的值, 需要通过value属性
    console.log(test.value);
    return {
       test
    }
   }
});
</script>

通过reactive 来获取ref 的值时,不需要使用.value属性

  setup() {
    const count = ref<number>(10)
    const obj = reactive({
      count
    })
    // 通过reactive 来获取ref 的值时,不需要使用.value属性
    console.log(obj.count);
    return {
       ...toRefs(obj)
    }
   }

isRef() 用来判断某个值是否为 ref() 创建出来的对象

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象

computed()

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    const age = ref<number>(18)

    const computedAge = computed({
      get: () => age.value + 1,
      set: value => age.value + value
    })
    // 为计算属性赋值的操作，会触发 set 函数, 触发 set 函数后，age 的值会被更新
    age.value = 100
    return {
      age,
      computedAge
    }
  }
});
</script>

新的生命周期

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated } from 'vue';
export default defineComponent({
  setup(props, context) {
    onBeforeMount(()=> {
      console.log('beformounted!')
    })
    onMounted(() => {
      console.log('mounted!')
    })

    onBeforeUpdate(()=> {
      console.log('beforupdated!')
    })
    onUpdated(() => {
      console.log('updated!')
    })

    onBeforeUnmount(()=> {
      console.log('beforunmounted!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })

    onErrorCaptured(()=> {
      console.log('errorCaptured!')
    })

    return {}
  }
});
</script>

通过refs 来获取dom元素

在 html 中写入 ref 的名称

在steup 中定义一个 ref

steup 中返回 ref的实例

onMounted 中 通过.value 获取真实dom

<template>
  <!--第一步：还是跟往常一样，在 html 中写入 ref 的名称-->
  <div class="mine" ref="elmRefs">
    <span>1111</span>
  </div>
</template>

<script lang="ts">
import { set } from 'lodash';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    // 获取真实dom
    const elmRefs = ref<null | HTMLElement>(null);
    onMounted (() => {
      console.log(elmRefs.value); // 得到一个 RefImpl 的对象, 通过 .value 访问到数据
    })

    return {
      elmRefs
    }
  }
});
</script>