Getting started with vue3.0

1.createApp // As the name suggests, create an APP instance

// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';

// 使用createApp方法将我们的入口文件放进去，最后挂载
createApp(App).mount('#app');

2.onMounted // It's different from the previous writing, but there is one more on

// 先导入onMounted模块
import { onMounted, defineComponent } from 'vue';

export default defineComponent({
    setup () {
        // 使用的时候需要放在setup里边
        onMounted(() => {
            console.log('组件挂在结束开始打印。。。')
        })
    }
})

3.computed computer properties

import { computed, ref } from 'vue';

// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.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 = 1
console.log(count.value) // 0

4.watch listener

import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

5. The upgraded version of the watchEffect listener immediately executes a function passed in, tracks its dependencies responsively, and reruns the function when its dependencies change.

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

Stop listening. When watchEffect is called in the component's setup() function or lifecycle hook, the listener will be linked to the component's lifecycle and will automatically stop when the component is unloaded.

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

// 之后
stop()

6.reactive Receive a common object and then return the reactive proxy of the common object. It is equivalent to Vue.observable() of 2.x. Note that it is clearly shown in the source code that an object needs to be passed, otherwise an exception will be thrown. If you want to use reactive style for a single variable, you can use ref to introduce below

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

If you want to use this variable in the component, you need to return it in setup

The first form of return

<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
    }
})

The second form of return

<template>
    <!-- 这种形式在组件内使用的时候跟之前一样 -->
    <p>{{ count }}</p> 
</template>

import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})

7. toRefs converts a responsive object into an ordinary object. Each property of the ordinary object is a ref, which corresponds to the property of the responsive object one-to-one.

import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})

8.ref accepts a parameter value and returns a responsive and changeable ref object. The ref object has a single attribute .value that points to an internal value.

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

count.value++
console.log(count.value) // 1

9. toRef can be used to create a ref for the properties of a reactive object. This ref can be passed and can remain responsive.

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

10.nextTick

import { nextTick } from 'vue';

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

11. Brother component pass value eventbus
The vue3 version discards eventbus such as on, on, on, emit, etc.
Official website alternative: mitt or tiny-emitter

npm install --save mitt

Write in bus.js

import mitt from 'mitt'

const bus = {}

const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

Just introduce bus.js on the page you need to use

import Bus from ‘@/bus’
Bus.$emit('test','内容')

import Bus from ‘@/bus’
Bus.$on('test',(data)=>{
   console.log(data)
})