vue3--API描述及使用方法

最新推荐文章于 2024-05-18 08:00:00 发布

体毛旺盛的猿

最新推荐文章于 2024-05-18 08:00:00 发布

阅读量790

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lx19980912/article/details/130501639

版权

标题组件API：

defineComponent：

用于创建一个Vue3组件的函数。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    return { count: ref(0) }
  },
  template: `
    <div>
      <p>{{ msg }}</p>
      <p>Count: {{ count }}</p>
    </div>
  `
})

defineAsyncComponent：

用于异步加载Vue3组件的函数。

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

h：

用于创建虚拟节点的函数。

import { h } from 'vue'

const vnode = h('div', { class: 'box' }, 'hello world')

响应式API：

reactive：

将一个响应式对象转换成Proxy对象，用于在模板中实现响应式渲染。

const data = reactive({ count: 0 })

ref：

将一个普通的数据类型或对象转换成响应式对象，用于在模板中实现响应式渲染。

const count = ref(0)

toRef：

将一个ref转换成普通的响应式对象，并可以指定一个属性值，用于在模板中实现响应式渲染。

const data = reactive({ count: 0 })
const countRef = toRef(data, 'count')

toRefs：

将一个响应式对象转换成响应式对象的属性的集合，并可以指定一个属性值，用于在模板中实现响应式渲染。

const data = reactive({ count: 0, name: 'Vue' })
const { countRef, nameRef } = toRefs(data)

isRef：

检查一个值是否是ref类型。

const countRef = ref(0)
isRef(countRef) // true

isReactive：

检查一个值是否是响应式对象。

const data = reactive({ count: 0 })
isReactive(data) // true

isReadonly：

检查一个值是否是只读的响应式对象。

const data = readonly({ count: 0 })
isReadonly(data) // true

isProxy：

检查一个值是否是Proxy对象。

const data = reactive({ count: 0 })
isProxy(data) // true

markRaw：

将一个对象标记为不可响应式或者不可代理，使其不会被响应式系统跟踪。

const data = reactive({ count: markRaw(0) })

shallowReactive：

创建一个只响应对象的浅层响应式副本。

const data = shallowReactive({ count: 0 })

shallowRef：

创建一个只响应简单数据类型的浅层响应式副本。

const count = shallowRef(0)

shallowReadonly：

创建一个只读的只响应对象的浅层响应式副本。

const data = shallowReadonly({ count: 0 })

toRaw：

将一个响应式对象还原成一个普通的对象，即使该对象已经被代理。

const data = reactive({ count: 0 })
const raw = toRaw(data)

readonly

关键字用于声明只读属性或变量，即不能被赋值修改。它可以应用于对象的属性或类中的属性和方法（但不包括类本身）。

const data = readonly({ count: 0 })

shallow

是一个概念，常用于描述对象或数组的拷贝方式，它指的是进行一层浅拷贝，即只复制对象或数组的第一层属性或元素，而不递归拷贝其内嵌的属性或元素。在
JavaScript 中，对象和数组都是引用类型，复制它们只是复制了引用，而不是真正的值，这将会导致一些问题，如修改拷贝对象会影响原对象。

const data = shallowReactive({ count: 0 })
const dataShallow = shallow(data)

生命周期API：

onBeforeMount：

在组件挂载之前被调用。

export default {
  onBeforeMount() {
    console.log('onBeforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  ...
}

onMounted：

在组件挂载后被调用。

export default {
  mounted() {
    console.log('mounted')
  },
  ...
}

onBeforeUpdate：

在组件更新之前被调用。

export default {
  onBeforeUpdate() {
    console.log('onBeforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  ...
}

onUpdated：

在组件更新后被调用。

export default {
  updated() {
    console.log('updated')
  },
  ...
}

onBeforeUnmount：

在组件卸载之前被调用。

export default {
  onBeforeUnmount() {
    console.log('onBeforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  },
  ...
}

onUnmounted：

在组件卸载后被调用。

export default {
  unmounted() {
    console.log('unmounted')
  },
  ...
}

onErrorCaptured:

当组件内部发生错误时，会调用这个函数。返回true代表错误已处理，false代表错误未处理并向上级组件处理错误。

Vue.config.errorHandler = function (err, vm, info) {
  console.log('Error Captured: ' + err, vm, info)
}

export default {
  onErrorCaptured(err, vm, info) {
    console.log('Error Captured: ' + err, vm, info)
  },
  ...
}

onRenderTracked:

在渲染期间跟踪依赖项的变化时执行。主要用于开发和测试工具。


import { onRenderTracked } from 'vue'

onRenderTracked((event) => {
  console.log(event)
})

onRenderTriggered:

在渲染期间依赖项变化时被执行。主要用于开发和测试工具。

import { onRenderTriggered } from 'vue'

onRenderTriggered((event) => {
  console.log(event)
})

DOM API：

createApp：

创建一个Vue应用程序实例。

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

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

createCommentVNode：

创建一个注释节点。

import { createCommentVNode } from 'vue'

const vnode = createCommentVNode('This is a comment')

createVNode：

创建一个虚拟节点。

- 下面是一个简单的例子，演示如何使用 `createVNode` 创建一个包含文本的 `div` 节点：
import { createVNode } from 'vue'

const vnode = createVNode('div', {}, 'Hello Vue 3!')
console.log(vnode)
- 在上面的例子中，我们使用 `createVNode` 创建了一个 `div` 节点，第一个参数是节点的标签名称，第二个参数是节点的属性对象，第三个参数是节点的子节点（即文本节点的内容）。


- 虚拟节点的属性对象包含了节点的各种属性和事件监听器信息，例如：
import { createVNode } from 'vue'

const vnode = createVNode('button', { 
  class: 'btn-primary',
  id: 'submit',
  onClick: () => console.log('Button clicked!')
}, 'Submit')
 - 在上面的例子中，我们创建了一个 `button` 节点，它有一个 `class` 属性、一个 `id` 属性和一个 `onClick` 事件监听器。最后一个参数是 `Submit`，它被包装在一个文本节点中成为子节点。

createTextVNode：

用于创建一个文本节点的虚拟节点。它接受一个字符串作为参数，该字符串将作为文本节点的内容。。

// 1
import { createTextVNode } from 'vue'

const textNode = createTextVNode('Hello Vue 3!')
console.log(textNode)


// 2
import { createApp, createTextVNode } from 'vue'

const app = createApp({
  render() {
    return createTextVNode('Hello Vue 3!')
  }
})

app.mount('#app')

createBlock：

创建一个v-for循环渲染的块。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { reactive, createBlock } from 'vue'

export default {
  setup() {
    const state = reactive({
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    })

    const block = createBlock('div', { class: 'list' }, state.list.map(item => createBlock('div', { key: item.id }, item.name)))

    return { list: state.list, block }
  }
}
</script>

应用API：

provide、inject

provide：用于父组件向子组件提供依赖的数据或函数。
inject：用于在子组件中注入父组件提供的数据或函数。

provide 和 inject 是 Vue 3 中提供的一对新函数，用于进行组件之间的数据传递。

provide 用于在父组件中提供数据，让其它子组件可以通过 inject 访问这些数据。provide 接受一个对象作为参数，这个对象的属性和方法都可以被子组件访问到。例如：

import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  setup() {
    const count = 0;
    provide('count', count); // 提供 count 数据
    return { }
  },
  components: {
    ChildComponent
  }
}

在上面的例子中，使用 `provide` 函数将 `count` 数据提供给了子组件 `ChildComponent`，并将它作为 `'count'` 属性的值传递给子组件。子组件可以通过 `inject` 函数来访问这个数据：

import { inject } from 'vue';

export default {
  setup() {
    const count = inject('count'); // 访问 count 数据
    return { count }
  }
}

在子组件的 `setup` 函数中，我们使用 `inject` 函数来访问父组件提供的 `count` 数据，并将它保存在子组件的 `count` 变量中。在子组件的模板中，就可以使用 `count` 变量了。

需要注意的是，`provide` 和 `inject` 都是需要配合使用的。在提供数据的组件中，使用 `provide` 函数提供数据，并指定一个名称；在需要访问数据的子组件中，使用 `inject` 函数来获取数据，传递对应的名称。如果名称不一致，或者子组件中没有找到对应名称的数据，会返回一个默认值（可以通过第二个参数为 `inject` 函数设置默认值）。

其他API：

watch：

用于监听一个响应式变量的变化，并执行相应的回调函数。

import { ref, watch } from 'vue';

const myRef = ref(0);
watch(myRef, (newValue, oldValue) => {
  console.log(`myRef changed from ${oldValue} to ${newValue}`);
});

myRef.value++; // => 'myRef changed from 0 to 1'，触发回调函数

watchEffect：

用于监听一个响应式变量发生修改时的变化，并执行相应的回调函数。

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0
});

watchEffect(() => {
  console.log(state.count);
});

state.count++; // => '1'，触发回调函数

render：

用于自定义渲染函数。

import { h } from 'vue';

export default {
  render() {
    return h('h1', 'Hello, world!');
  }
};

computed：

用于创建一个计算属性。

import { reactive, computed } from 'vue';

const state = reactive({
  count: 0
});

const square = computed(() => {
  console.log('computed');
  return state.count * state.count;
});

console.log(square.value); // => 0
state.count++; 
console.log(square.value); // => 'computed' => 1

Vue.set：

用于向响应式对象添加一个新的属性或者修改已有的属性。

import { reactive, toRef, Vue } from 'vue';

const state = reactive({
  obj: {
    name: 'Alice',
    age: 25,
  }
});

Vue.set(state.obj, 'address', {
  city: 'New York',
  zipcode: '10001',
});

console.log(state.obj.address.city); // => 'New York'

以下是Vue3中的一些相对冷门的API和含义：

unref

用于解引用一个ref对象或reactive对象中的属性，并返回该属性的原始值。如果在模板中使用ref或reactive对象时，可以使用unref来获得属性的原始值，而无需在模板中使用.value获取。

import {ref, unref} from 'vue';
const myRefObj = ref({
  name: 'Alice',
  age: 25,
});

// shorthand for unref
console.log(myRefObj.value.name); // 'Alice'

// unref imperatively
console.log(unref(myRefObj).name); // 'Alice'

customRef

用于自定义ref，它接收两个参数：一个工厂函数和一个用于清理ref的函数。工厂函数用于返回当前ref的值和setter函数，清理函数则在ref值被替换时可用于进行相关的清理操作。

import {customRef} from 'vue';
const myCustomRef = customRef((track, trigger) => ({
  x: 1,
  get() {
    track();
    return this.x;
  },
  set(value) {
    this.x = value;
    trigger();
  }
}));

console.log(myCustomRef.value); // 1
myCustomRef.value = 2; // trigger update
console.log(myCustomRef.value); // 2

watchEffect：

用于监听一个响应式数据的变化，并在数据变化时执行一个函数。和watch不同的是，watchEffect只关注被监听的响应式数据本身，而不需要监听的属性路径，也不需要显式地停止监听。

import { reactive, watchEffect } from 'vue';

const state = reactive({
  count: 0
});

watchEffect(() => {
  console.log(state.count);
});

// 在第一次及后续更新时都会执行
state.count++;

markRaw和toRaw：

用于将一个对象标记为不可响应式或不可代理，使其不会被响应式系统跟踪，这在某些情况下非常有用，例如：不希望响应式系统检测到一个对象上某些属性的变化。toRaw则是用于将一个响应式对象还原成原始的对象，返回不带Proxy封装的原始对象，通过toRaw可以避免直接修改响应式对象属性带来的一些副作用。

import { reactive, markRaw, isReactive, isRaw } from 'vue';

const rawState = {count: 0};     // 未响应式化的对象
const state = reactive(rawState);   // 响应式化的对象
const untracked = markRaw(rawState);    // 标记为 raw

isReactive(state);    // => true
isReactive(untracked);    // => false
isRaw(untracked);    // => true

nextTick：

用于在下一次dom更新循环结束之后执行的回调。在一些场景中，如果我们需要等到dom更新完成后再执行某些操作，可以使用nextTick方法，以保证这些操作总是在DOM更新完成之后执行。

import { ref, nextTick } from 'vue';

const myRef = ref(0);

myRef.value++;
console.log(myRef.value); // => 1

// ...

nextTick(() => {
  console.log(myRef.value); // => 2
});