vue3常用api梳理

原创已于 2022-08-04 14:17:27 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-01-26 16:31:40 首次发布

vue 专栏收录该内容

13 篇文章

订阅专栏

setup参数

props
props 是响应式的，当传入新的 props 时，它将被更新。
示例如下：

//父组件
<template>
  <div>
    <com :num="num"></com>
    <button @click="add">++</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import com from './components/com.vue';
export default {
  name: 'App',
  components: { com },
  setup() {
    const num = ref(1);
    const add = () => {
      num.value++
    }
    return {
      num,
      add
    }
  }
}
</script>

//子组件
<template>
  <div class="hello">
    {{num}}
  </div>
</template>

<script>
export default {
  props: {
    num: Number
  }
}
</script>

当点击按钮执行add方法，子组件num会自动更新。

context
attrs：Attribute (非响应式对象，等同于 $attrs)
slots：插槽 (非响应式对象，等同于 $slots)
emit：触发事件 (方法，等同于 $emit)
expose：暴露公共 property (函数)

生命周期

选项式 API	Hook inside setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated
示例如下：

<template>
  <div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
export default {
  name: 'App',
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
  }
}
</script>

在这里插入图片描述

响应式数据 ref、reactive

ref：将一个原始数据类型(String、Number、BigInt、Boolean、Symbol、Null、Undefined)转换成一个带有响应式特性的数据类型。
reactive：将一个对象(Object) 转换成带有响应式的特性。
示例如下：

<template>
  <div>
    <div>{{age}}</div>
    <div>{{data.height}} {{data.weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const data = reactive({
      sex: 1,
      height: 178,
      weight: 110
    })

    const change = () => {
      age.value = 20;
      data.height = 180;
      data.weight = 1111;
    }
    return {
      age,
      data,
      change
    }
  }
}
</script>

可能会觉得data.xxx 的写法太麻烦，那么我们可以使用torefs来解构。
torefs：可以将一个响应型对象(reactive) 转化为普通对象(obj)，同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。
示例如下，效果同上：

<template>
  <div>
    <div>{{age}}</div>
    <div>{{height}} {{weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const data = reactive({
      sex: 1,
      height: 178,
      weight: 110
    })

    const change = () => {
      age.value = 20;
      data.height = 180;
      data.weight = 1111;
    }
    return {
      age,
      ...toRefs(data),
      change
    }
  }
}
</script>

在实际的开发过程中，给对象整体重新赋值的情况也屡见不鲜，倘若直接重新是不可以的，可以自行尝试，下面的一种比较推荐的写法，效果同上：

<template>
  <div>
    <div>{{content.height}} {{content.weight}}</div>
    <button @click="change">修改</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
export default {
  name: 'App',
  setup() {
    const data = reactive({
      content:{
        sex: 1,
        height: 178,
        weight: 110
      }
    })

    const change = () => {
      data.content ={
        sex: 2,
        height: 180,
        weight: 120
      }
    }
    return {
      ...toRefs(data),
      change
    }
  }
}
</script>

coumputed

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <button @click="add">++</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = computed(() => {
      return age.value * 2
    })
    const add = () => {
      age.value++
    }

    return {
      age,
      age2,
      add
    }
  }
}
</script>

watch && watchEffect

watchEffect 它与 watch 的区别主要有以下几点：

watchEffect不需要手动传入依赖
watchEffect每次初始化时会执行一次回调函数来自动获取依赖
watchEffect无法获取到原值，只能得到变化后的值

watch示例：

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <div>{{data.height}} {{data2.height}}</div>
    <button @click="add">++</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = ref(0);
    const data = reactive({
      height: 178
    })
    const data2 = reactive({
      height: 0
    })
    
    /* eslint-disable */
    watch([age, ()=> data.height], ([newAge, newHeight], [oldAge, oldHeight]) =>{
      age2.value = oldAge;
      data2.height = oldHeight;
    })
    /* eslint-disable */

    const add = () => {
      age.value++,
      data.height++
    }

    return {
      age,
      age2,
      data,
      data2,
      add
    }
  }
}
</script>

watchEffect示例：

<template>
  <div>
    <div>{{age}} {{age2}}</div>
    <div>{{data.height}} {{data2.height}}</div>
    <button @click="add">++</button>
  </div>
</template>

<script>
import { ref, reactive, watchEffect } from 'vue';
export default {
  name: 'App',
  setup() {
    const age = ref(18);
    const age2 = ref(0);
    const data = reactive({
      height: 178
    })
    const data2 = reactive({
      height: 0
    })

    watchEffect(() => {
      age2.value = age.value;
      data2.height = data.height;
    })

    const add = () => {
      age.value++,
      data.height++
    }

    return {
      age,
      age2,
      data,
      data2,
      add
    }
  }
}
</script>

获取元素

获取单个元素使用ref(null)，获取v-for中的ref数组需要绑定函数。
示例如下：

<template>
  <div>
    <div ref="name"></div>
    <div v-for="(val,index) in arr" :key="index" :ref="setItemRef"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
  name: 'App',
  setup() {
    const name = ref(null);
    const arr = new Array(10);
    const itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }

    onMounted(() => {
      name.value.innerHTML = '风舞红枫';
      itemRefs.forEach((item, index) => {
        item.innerHTML = index;
      })
    })

    return {
      name,
      arr,
      setItemRef
    }
  }
}
</script>