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;
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容