本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

总结：这里都是我读完引导的时候感觉出的vue2和vue3的区别，或者说我自己要学习的点，后续会继续读文档，这才是文档的很小的一部分

没有那么多哔哔赖赖，直接开整，记录自己看vue3的学习记录，从vue2的角度学习时，自己需要注意的点记录下来

创建一个应用

createApp 函数是用来创建一个vue应用实例的，

    import { createApp } from 'vue'
    import APP from './App.vue'
    const app = createApp(App)
    app.mount("#app")

App.vue 是根组件，通过createAPP组件后，创建vue应用实例成功，后续是一样的需要挂载，

应用配置

app.config.errorHandler = (err) => {
    //处理错误
}

这里的配置是处理错误的，一般是子组件的报错处理，这里的函数中要辨别一下http请求的错误处理，不在这里

  app.component('TodoDeleteButton', TodoDeleteButton)

上面代码是注册组件的代码，用实例的component()来注册

模板语法

可能是本人比较菜，暂时觉得模板语法中大致和vue2的类似，所以本模块不做记录

响应式基础

import { reactive } from 'vue'
const state = reactive({ count: 0 }) 

setup() {
    return {
        state
    }
}

dom更新时机问题若要等待一个状态改变后的DOM更新完成，可以使用nextTick()

响应式代理 VS 原始对象

上面提的reactive() 返回的是一个原始对象的proxy(), 与原始对象本身是不相等的

const raw = {}
const proxy = reactive({})

console.log(raw === proxy) // false

这里的特性与原来的vue2不同的点是更改原始对象，不会触发响应式和dom更新，

reactive()的局限性

1：响应式只对对象，数组，map，set这样的有效，对基础数据类型无效 2：我们不可以随意的替换一个响应式对象，这样将会使其失去响应式

用ref()定义基础数据类型的响应式变量

import { ref } from 'vue'
const count = ref(0)
count.value++

可以忽略的章节

计算属性，类与样式绑定，条件渲染，列表渲染，事件处理基本与vue2保持一致，表单输入绑定中可以看看修饰符

生命周期钩子

这个地方是和vue2有很大差别的地方，钩子函数因为setup和keep-alive时候的activited等的区别，这里得等到深入了解每个钩子函数的api和用例的时候我们再来细细研究

侦听器

watch不能直接侦听响应式对象的属性值，例如：

const obj = reactive({ count: 0})
// 这里会报错，因为第一个参数是一个值，
// 这里正确的是需要返回一个该属性的getter函数
watch(obj.count, (count) => {
    console.log(count)
})

及时回调

watch(source, (newValue, oldValue) => {},{immediate: true})

上面代码会避免一个问题，这就是立刻执行，不然第一次的时候，source初始化的时候不会执行，这就是最后的immediate的作用，

watchEffect()

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

这就是watchEffect的作用，这里我不需要进行指定监听谁，函数会自定监听这里涉及到的响应式依赖，而且不会用设置immediate来立即执行，总的来说，watch与watchEffect的区别更多的是回调函数的触发时机，还有就是代码简洁度

回调函数的触发时机

当更改了响应式状态，是会触发vue组件更新和侦听器回调的，默认情况是先进行侦听器函数回调，之后是vue组件更新被调用，如果想回调函数是可以访问更新后的组件及更新后的dom，可以设置watch和watchEffect选项{flush: 'post'} 在vue中，watchEffect的flush选项有别名，叫：watchPostEffect

停止侦听器

手动停止一个镇日干起，

const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()

模板引用

直接访问底层DOM元素，才会用到ref，这里的ref是一个特殊的html属性，

在组合式api中获得模板引用，需要声明同名的ref

<script setup>
import { ref, onMounted } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

组件基础

对比vue2中，首先是SFC这个缩写，代表单文件组件，以前vue2应该是没有明确这个说法的，虽然很多时候大家都是这么写的，另外就是父子组件通信vue2的props和$mit这里有区别，

<!-- BlogPost.vue -->
    <script setup>
    defineProps(['title'])
    </script>

    <template>
      <h4>{{ title }}</h4>
    </template>

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>