初识Vue3
一个月前开启了一个Vue3+TS的新项目，开发的时候也没有系统的学习Vue3的新语法，在掘金上搜索了几篇教程直接就着手开发了，当然项目遇到问题也是现搜现学
项目也要快结束了，梳理一下进行总结，如果你没有用过vue3,看完这篇文章就能直接上手开发vue3项目
我一直觉得实战就是最好的学习方式
废话不多说，上手就是干
使用 setup语法糖，定义的变量和方法不需要 return,组件引入直接使用不再写components
开局
使用 setup语法糖，需要将 setup 添加到 <script> 代码块上：
<template> <div>根标签一</div> <div>根标签二</div> </template> //lang可以是ts也可以是js <script setup lang='ts'> //直接写逻辑 </script>
首先 template模板里可以并级写多个跟标签
<script setup> 中的代码会在每次组件实例被创建的时候执行。
记住： setup它是在 beforeCreate钩子之前调用的。 这是重点后面要考
响应式 ref,reactive
Vue3有两个常用的定义响应式数据的方式,按照官方的来讲：
1.ref通常定义基础数据类型，在函数里使用ref 值需要使用变量名.value但是在模板中使用的时候会自动解包，直接调用变量名即可。2.reactive通常定义复杂数据类型，使用时直接调用变量名即可
<template> <div>{{name}}</div> <div>{{age}}</div> <div>{{arr}}</div> </template> <script setup> // 记住：使用前要先引入 import { ref,reactive } from 'vue' let name = ref('董员外') let age = ref(100) console.log(name.value) //董员外 name.value = 'oldUath' console.log(name.value) //oldUath let arr = reactive([]) let obj = reactive({}) console.log(arr) //打印出来是一个Proxy对象 arr.push(1) console.log(arr) </script>
虽然说ref通常定义基础数据类型，但是也可以定义复杂数据类型
如何获取dom元素呢？
vue2使用ref来获取dom元素，vue3也是使用它
<template> <div ref='domName'>我要获取这个元素</div> </template> <script setup> // 记住：使用前要先引入 import { ref } from 'vue' let domName = ref(null) console.log('打印dom元素====',domName.value) // null </script>
为什么会打印出来null呢？
考点来了: 这是因为
setup是在beforeCreate钩子之前调用的。DOM元素还没挂在上呢，你只能获取一个空呀！
解决方法就是在挂载后再打印元素，引入生命周期onMounted
<template> <div ref='domName'>我要获取这个元素</div> </template> <script setup> import { ref,onMounted } from 'vue' let domName = ref(null) // onMounted的生命周期就相当于vue2的mounted onMounted(() => { console.log('打印dom元素====',domName.value) }) </script>
