vue3学习笔记1

初识vue3

composition API

1.createApp 创建一个APP实例

// 先导入createApp模块

import { createApp } from 'vue';

import App from './App.vue';

// 使用createApp方法将我们的入口文件放进去，最后挂载

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

2. onMounted

// 先导入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) // 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 监听器

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.watchEffect 监听器的升级版本，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const count = ref(0)

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

setTimeout(() => {
  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 一一对应。

上边的例子为什么要用toRefs包裹起来呢，因为是这样的, reactive,实际上是使用的proxy代理了整个对象，返回的是整个对象都是响应式，
但是如果这个对象里边的层级很多怎么办，对象中还有对象，那么里边的对象就不是一个响应式了，所以就用toRefs包裹一下，
这样相当于是整个对象里边的属性，在源码内部已经做了一次递归，把所有的属性都做了判断，如果是引用类型就会使用proxy再次代理一次，所以整个对象的属性都是响应式的，也就是下边这样的写法；

　　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) // 0

count.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) // 2

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

10.nextTick 跟之前的作用一样只不过呢写法略有不同

import { nextTick } from 'vue';

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

https://juejin.cn/post/6896438269291347976