Vue3语法

setup

一：解决引入问题，引用插件实现自动引入

下载依赖：

npm i unplugin-auto-import -D

在vite.config.js中进行配置

import AutoImport from 'unplugin-auto-import/vite';
plugins:[
   Vue(),
   AutoImport({
      imports:['vue','vue-router']
   })
]

二：定义数据

1：死数据，不可以修改，但可以展示：let str = '1'
2：响应式数据：ref （在使用的时候：x.value）
3：响应式数据：reactive （在使用的时候：不需要.value）（reactive只能写对象或数组）

三：解构toRef() => 响应式

let obj = reactive({
  name:'张三',
  age:20
})
let {name,age} = toRefs(obj);
const change() => {
  name.value = '李四'
}

四：watch监听数据

监听单个：watch(str,(newVal,oldVal)=>{})
监听多个：watch([str1,str2,(newVal,oldVal)=>{})
初始化监听watch(str,(newVal,oldVal)=>{},{immediate:true})
监听对象中的某个key,深度监听：watch(()=>obj.a,(newVal,oldVal)=>{},{immediate:true,deep:true})
立即监听(初始化监听)：watchEffect(()=>{})

五：兄弟传值mitt

引入依赖：

npm install mitt -S

添加Bus.js

import mitt from 'mitt'
const emitter = mitt()
export default emitter;

A组件：

emitter.emit('fn',str)

B组件：

let s = ref('')
emitter.on('fn',e=>{
  s.value = e.value;
})