setup语法糖插件
相当于自动引入,省去 import
npm i -D unplugin-auto-import
// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import {resolve} from 'path';
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue','vue-router'] // 解决每次 import { ref , reactive ...} from 'vue' 问题
}),
resolve: {
alias: {
'@': resolve(__dirname,'./src') // @/ ==> src/
}
},
],
})
基本使用
<template>
<div> {{str}} </div>
</template>
<script setup>
let str = ref('1')
</script>
响应式数据
ref 使用时需要 : x.value
reactive 使用时不需要像ref一样,不需要 .value
reactive 只能写对象或数组
<template>
<div>
{{ num }}
</div>
<button @click="btnNum">按钮</button>
<div>
{{ arr }}
</div>
<button @click="changes">修改</button>
</template>
<script setup>
import {ref , reactive} from 'vue';
let num = ref(0)
let arr = reactive([
'a','b','c'
])
const btnNum = ()=>{
num.value ++
}
const changes = ()=>{
arr[2] = 'bb'
}
</script>
toRef 与 toRefs
- toRef: 复制 reactive 里的单个属性并转成 ref
- toRefs: 复制 reactive 里的所有属性并转成 ref
toRef : 基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值,反之亦然。
使用方法: toRef(响应式对象, 属性)
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改 fooRef 会更新 源属性(state)
fooRef.value++
console.log(state.foo) // 2
// 更改 源属性 也会更新 fooRef
state.foo++
console.log(fooRef.value) // 3
toRefs: 将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
使用方法: toRefs(响应式对象)
const state = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(state)
// 这个 stateAsRefs 和 源属性 已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2
stateAsRefs.foo.value++
console.log(state.foo) // 3
// toRefs适用于解构数据
// let {foo , bar} = toRefs(state)
引用组件 引入后可以直接使用,不需要注册
<template>
<div>
<HelloWorld></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
</script>
组件 : 父传子
<template>
<div>
<div>这是父页面</div>
<HelloWorld :msg='msg'></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
let msg = ref('父传子')
</script>
<template>
<h3>这是子页面</h3>
<div>这是父页面传来的值:{{ msg }}</div>
</template>
<script setup>
defineProps({
msg: String,
})
</script>
组件 : 子传父
<template>
<div>
<h3>这是父页面</h3>
<HelloWorld @cs="froms"></HelloWorld>
<div>这是子页面传来的值:{{ arrs }}</div>
</div>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
let arrs = ref([])
const froms = (n)=>{
arrs.value = n
}
</script>
<template>
<h3>这是子页面</h3>
<div>这是子页面传给父页面的值:{{ arrs }}
<button @click="clickArrs">点击传输</button>
</div>
</template>
<script setup>
let arrs = reactive(['a','b','c'])
let emits = defineEmits()
let clickArrs = ()=>{
emits('cs',arrs)
}
</script>
父子组件双向绑定
<template>
<h1>父页面:{{ nums }}</h1>
<HelloWorld v-model:num="nums"></HelloWorld>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
let nums = ref(10)
</script>
<template>
<div>
<h3>这是子页面</h3>
<div>{{ num }}</div>
<button @click="btn">点击+1</button>
</div>
</template>
<script setup>
const props = defineProps({
num:{
type: Number
}
})
const emits = defineEmits(['update:num'])
let a = 10
const btn = ()=>{
a+=1
emits('update:num',a)
}
</script>
mitt 事务总线(全局通信)
// 安装
npm install --save mitt
// 使用时 在当前页面引入
import mitt from 'mitt'
const emitter = mitt()
// A.vue 传
emitter.emit('自定义名称',值)
// B.vue 接
emitter.on('自定义名称',(v)=>{
console.log(v)
}
provide 与 lnject 依赖注入
provide('自定义名称',值) // 向子组件及以下传值
const aa = lnject('自定义名称') // 子组件及以下接收
computed 计算属性
<template>
<div>
str:{{ str }}
</div>
<div>
changeStr:{{ changeStr }}
</div>
<input v-model="changeStrs">
</template>
<script setup>
let str = ref('字符串')
let changeStr = computed(()=>{
return '*****' + str.value + '*****'
})
let changeStrs = computed({
get(){
return str.value
},
set(val){
str.value = val
}
})
</script>
watch 监听属性
<template>
<input type="text" name="" id="" v-model="strs">
<input type="text" name="" id="" v-model="nums">
</template>
<script setup>
let strs = ref('字符串')
let nums = ref(99)
// 监听某一个值
// watch(strs , (news,olds)=>{
// console.log(news,olds);
// })
// 监听多个值
// watch([strs,nums],(news,olds)=>{
// console.log(news,olds);
// },{
// immediate:true // 初始化监听
// })
let objs = reactive({
a:1,b:2,c:{x:0}
})
// 监听对象
// watch(()=>objs,(news,olds)=>{
// console.log(news,olds);
// },{
// immediate:true, // 初始化监听
// })
// 监听对象某一个值,并深度监听
watch(()=>objs.c,(news,olds)=>{
console.log(news,olds);
},{
immediate:true, // 初始化监听
deep:true // 深度监听
})
</script>
生命周期的使用
<script setup>
onMounted(()=>{})
onUnmounted(()=>{})
</script>