1、响应式
将一个普通数据转换成响应式数据2种方式
（1）ref函数 适合单个变量
import {ref} from 'vue'
let counter =ref(10)
在script中操作ref响应式数据需要用.value
在template中，操作响应式数据无需用.value
（2）reactive函数 适合函数
import {ref,reactive} from 'vue'
let person = reactive({name:" ",age:10
})
reactive响应式数据无论script或template中都是直接使用：对象名.属性名 样式
toref函数：将reactive响应式数据中的某个属性转换成ref响应式数据
torefs函数：将reactive响应式数据中的多个属性转换成ref响应式数据
let p_age=toref(person,'age')
import {ref,reactive,toref,torefs} from 'vue'
let {name.age}=torefs(person)
2、条件渲染
v-if=表达式 表达式返回真值时才会被渲染，返回false元素不在dom树中，v-else与v-if一起使用，
v-show=" "数据为false，元素还在dom树中，通过设置css样式中的display来隐藏。
列表渲染：v-for：let items=reactive([{id:"item1",messgae:"可乐"}{id:"item2",message:"炸鸡"}])<ul> //(item,index)<li v-for="item in items" v-bind:key="item.id">{{index+1}}{{itm.message}}</li></ul>
3、双向绑定
splice(下标,个数n)：从下标处开始清除n个元素
双向绑定一般用于表单标签页面数据修改也会修改相应的响应式数据
v-model:value="数据"
<script>let message=ref("zhang")
</script>
<template><div><input type="text" v-model="message"></div>
</template>
4、数据监听器
watchimport {ref,reactive,watch} from 'vue'
watch(属性名,(newvalue,oldvalue)=>{ ref })
watch(()=>lastname.name,(newvalue,oldvalue)=>{ reactive }) 单个属性
watch(()=>lastname,(newvalue,oldvalue)=>{ 操作 },{deep:true,immediate:true}) immediate页面加载完成立即执行一次 多个属性
WatchEffectimport {WatchEffect} from 'vue'WatchEffect(()=>fullname.value[ref类型]=firstname.value[ref类型]+lastname[reactive类型] })
5、生命周期钩子函数
import {ref,onBeforeMount[挂载之前],onMounted[挂载完成],onBeforeUpdate[更新之前],onUpdate[更新之后]} from 'vue'
Vue组件(.vue文件，一个文件是一个组件)
组件之间参数传递（1）父传子（2）子传父（3）兄弟传参 子1传父，父再传子2
defineEmits：定义向父组件提交数据的事件以及正式提交数据
import {defineEmits} from 'vue'
const emits=defineEmits(["sendMenu_事件名"])
function send(data)
{emits("sendMenu",data) 子1传父
}接收子组件的数据 receiver() 父接收子1
let menu=ref("")
function receiver(data)
{ menu.value=data }<Content:message_参数名="menu_参数类型"></Content> 父传子2接收父组件的参数 子2接收父
import {defineEmits} from 'vue'
define props({ 参数名:参数类型 }message:string
)
