1.createApp // 顾名思义，创立一个APP实例

// 先导入createApp模块import { createApp } from 'vue';import App from './App.vue';// 应用createApp办法将咱们的入口文件放进去，最初挂载createApp(App).mount('#app');

2.onMounted // 跟之前的写法不一样了不过，多了一个on

// 先导入onMounted模块import { onMounted, defineComponent } from 'vue';export default defineComponent({    setup () {        // 应用的时候须要放在setup里边        onMounted(() => {            console.log('组件挂在完结开始打印。。。')        })    }})

3.computed 计算机属性

import { computed, ref } from 'vue';// 基本操作const count = ref(1)const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 谬误！
import { computed, ref } from 'vue';// 能够批改值const count = ref(1)const plusOne = computed({  get: () => count.value + 1,  set: (val) => {    count.value = val - 1  },})plusOne.value = 1console.log(count.value) // 0

4.watch 监听器

import { reactive, watch } from 'vue';// 侦听一个 getterconst state = reactive({ count: 0 })watch(  () => state.count,  (count, prevCount) => {    /* ... */  })// 间接侦听一个 refconst count = ref(0)watch(count, (count, prevCount) => {  /* ... */})

5.watchEffect 监听器的降级版本，立刻执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时从新运行该函数。

const count = ref(0)watchEffect(() => console.log(count.value))// -> 打印出 0setTimeout(() => {  count.value++  // -> 打印出 1}, 100)

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

const stop = watchEffect(() => {  /* ... */})// 之后stop()

6.reactive 接管一个一般对象而后返回该一般对象的响应式代理。等同于 2.x 的 Vue.observable(),留神在源码中明确显示须要传递一个对象，否则会抛出异样，如果想要对一个独自的变量应用响应式，能够应用ref下边介绍

const obj = reactive({ count: 0 }) // 返回的就是响应式对象// 应用obj.count ++console.log(obj.count) // 输入的是1

如果想要在组件内应用这个变量须要在setup中返回

第一种返回模式

<template>    <!-- 这种模式在组件内应用的时候须要obj.count -->    <p>{{ obj.count }}</p> </template>
import { reactive } from 'vue';export default defineComponent({    setup () {        const obj = reactive({ count: 0 })        return { obj } // 这种模式在组件内应用的时候须要obj.count    }})

第二种返回模式

<template>    <!-- 这种模式在组件内应用的时候跟之前一样 -->    <p>{{ count }}</p> </template>
import { reactive, toRefs } from 'vue';export default defineComponent({    setup () {        const obj = reactive({ count: 0 })        return { ...toRefs(obj) }    }})

7.toRefs 把一个响应式对象转换成一般对象，该一般对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

import { reactive, toRefs } from 'vue';export default defineComponent({    setup () {        const obj = reactive({ count: 0 })        return { ...toRefs(obj) }    }})

8.ref 承受一个参数值并返回一个响应式且可扭转的 ref 对象。ref 对象领有一个指向外部值的繁多属性 .value。

const count = ref(0)console.log(count.value) // 0count.value++console.log(count.value) // 1

9.toRef 能够用来为一个 reactive 对象的属性创立一个 ref。这个 ref 能够被传递并且可能放弃响应性。

const state = reactive({  foo: 1,  bar: 2,})const fooRef = toRef(state, 'foo')fooRef.value++console.log(state.foo) // 2state.foo++console.log(fooRef.value) // 3

10.nextTick

import { nextTick } from 'vue';export default defineComponent({    setup () {        nextTick(() => {            console.log('--- DOM更新了 ---')        })    }})