插件：Vue 3 Snippets 和Vue Language Features (Volar)组件引入
在Vue3.0中我们要使用外部组件，直接引入。无需注册。在页面直接使用
import Hello from "../components/Hello"
<temlpate>
<Hello></Hello>
</temlpate>
有点类似于React组件使用 Fragment
在我们Vue3中template标签中，无需再申明跟标签。Vue3会自动新增Fragment标签来完成内容组织。相当于提供了一个虚拟节点。
Fragment：最高React提出来的
render(
return (
<>
</>
)
)
Vue3中,无需再加入这个内容
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
<HeaderVue></HeaderVue>
</template>
setup
再Vue3.0项目中，我们需要再script上面新增一个属性setup
<script setup></script>
还可以按照下面的语法来写
<script>
export default {
setup(){
}
}
</script>
setup是Vue3推出的一个api，用于标准代码是基于Vue来解析。
目前提供了两种语法：
语法1：草案的语法，目前vite创建项目默认提供这种语法，下一个版本，setup直接作为官方文档语法
语法2：目前one piece这个中，官方文档提供的语法
目前先用语法一 Vue3 定义内部数据 ref语法
Vue官方文档最近推出的一种语法。可以用ref类定义组件内部数据
Vue3中组件中已经没有data的存在，数据要定义，需要提供一种定义方案。
<script setup>
import { ref } from 'vue';
const count = ref(0)
// 类似于React中函数组件
const changeCount = (val)=>{
console.log(val);
console.log(count);
// 只要是再script标签里面操作数据,添加value属性
count.value = val
}
const user = ref({id:1,name:"xiaowang"})
const changUsername = ()=>{
user.value.name = "xiaofeifei"
}
</script>
<template>
<h2>这是Header</h2>
<!-- 再页面上使用count,默认调用value -->
<p>{{count}}</p>
<button @click="count--">-</button>
<button @click="changeCount(3)">+</button>
<p>{{user}}</p>
<button @click="user.name='xiaofei'">修改user的名字</button>
<button @click="changUsername">修改user的名字</button>
</template>
reactive定义响应式数据
<template>
<p>{{data.username}}</p>
<button @click="changeUser">修改</button>
<p>{{data.array}}</p>
</template>
<script setup>
// 定义组件内部数据
import {reactive} from "vue"
const data = reactive({
username:"xiaowang",
array:[1,2,3]
})
const changeUser = ()=>{
data.username = "xiaofeifei"
}
</script>
我们需要在vue这个包里面引入reactive来完成数据的定义。
修改数据直接找到你的属性，赋值就可以完成响应式变化
在Vue3里底层响应式原理使用费Proxy来完成，比之前Vue2的响应更加强大（Object.defineProperty）。
你可以动态给对象新增属性，Vue3默认检测到 组件通信
父子通信 父组件传递参数给子组件
<template>
<ListVue :count="count"></ListVue>
<ButtonsVue @increment="increment" @decrement="decrement"></ButtonsVue>
</template>
动态参数我们还是v-bind来进行绑定。
传递函数给子组件，我们自定义事件。
子组件接受父组件的数据
<template>
<p>计数器的内容位:{{props.count}}</p>
</template>
<script setup>
// 无需引入,可以直接使用
const props = defineProps({
count:[Number,String],
val:Number
})
</script>
defineProps:代表获取外部数据，得到props对象，你可以在内部对他数据进行校验 子组件传递参数给父组件
父组件需要设计自定义事件
<template>
<ButtonsVue @increment="increment" @decrement="decrement"></ButtonsVue>
</template>
子组件调用自定义事件
<button @click="emit('decrement')">-</button>
<script setup>
// hook编程,defineEmits和defineProps无需引入
const emit = defineEmits()
const incrementChild = ()=>{
emit("increment")
}
</script>
watch的语法
watch的Vue中重写做了封装，我们需要使用，那就必须引入过后再使用
<script setup>
import {watch} from "vue"
watch(
()=>{},
()=>{},
{}
)
</script>
watch的参数： 参数一：监控的数据
参数二：监控数据发生变化要执行的业务
参数三：深度监听和立即监听
// watch监听
watch(
()=>props.count, //监控指定的数据
(val,preval)=>{
count.value = val
},
{
deep:true,
immediate:true
}
)
val :修改过后的结果。
preval：旧值 watchEffect
这个api是Vue3提供的一个新的api，可以监控这个api里面使用的所有变量
watchEffect(()=>{
// 这个watch模块里面有很多变量被使用
count.value = props.count
})
watch和watchEffect：
watch再使用过程中指定监控某个数据，每次只能监控一个数据。watchEffect可以监控你用到所有变量
语法层面，watchEffect比watch更加简单，watchEffect默认第一次就会执行，watch要设置immediate：true第一次执行
watch可以再监控的过程获取修改之前的值和修改之后的值。watchEffect无法获取修改之前和之后的数据
computed计算属性
计算属性有两种语法：
语法一：
import {computed, ref} from "vue"
const newCount = computed(()=>{
return props.count
})
传递一个回调函数，里面必须return一个结果。
语法二：
import {computed, ref} from "vue"
const newValue = computed({
get(){
return props.count
},set(val){
//你可以将这个val赋值给指定的变量
}
})
如果页面需要使用
<p>{{newValue}}</p>
如果你再页面修改newValue，第二个语法默认可以设置数据给newValue
