开启Vue3之旅

Vue3

生命周期比create快，没有this

reactive, torefs,toref

const data=reactive()可以用于定义对象和数组，可以把普通数据变成响应式的，用torefs(data)解构为响应式数据，可解构多个，toref(data,‘msg’)是只解构某一个，也是响应式的

reactive是用proxy设置的，没有concat

ref

ref定义普通数据类型，也可以定义数组,通过name = ref()定义值，name当普通属性使用，修改通过name.value修改

name = ref('') // 定义
name.value = '' // 修改

computed

// 1、function写法
let count = ref(100)
const doublecount = computed(()=>{
return count.value *2
})
//  doublecount为只读属性

//2、 object
let fullname = computed(()=>{
// 拿到值
get (){
return ''
},
// 内部修改值
set(val){
console.log(val)
}
})
//修改值
const changename=()=>{
fullname.value = ''
}

computed(()=>{}) 返回出来的值是ref方式的

watchEffect监听器

watchEffect((onInvalidate)=>{
// onInvalidate可以清除副作用
let timer = setTimeout(()=>{
},1000)
onInvalidate(()=>{
clearTimeout(timer)
})
}) // 有一个返回值stop停止监听

在外部调用stop()即可

watch

侦听单个数据源

// reactive
let state = reactive({
msg:'hello vue'
})

watch(
// 侦听的数据
()=>state.msg,
(newVal,oldValue)=> console.log(newVal,oldValue) // 操作
)

// 修改数据
const changeState = ()=>{
state.msg = '更新了'
}

// ref
let name = ref('code')

watch(name,
(newVal,oldVal)=>{
console.log(newVal,oldValue)
})

// 修改数据
const changeState = ()=>{
name.value = 'fly'
}

侦听多个数据源

最好同一个方式定义ref或reactive

let name = ref('code')
let age = ref(18)

watch([name,age],
// 数据源
([name,age],[preName,preAge])=>{
// 新旧值的变化
console.log()
},
// 配置项
{参数})

// 修改数据
const changeData = ()=>{
name.value = 'fly',
age.value = 20
}

参数说明

deep:true // 深度监听
immediate:true // 立即执行

插件

object

// 插件objectPlugin.js文件
export default {
install(app) {
app.config.globalProperties.$name = 'code'
}
}

// main.js
import objectPlugin from '路径'
use(objectPlugin)

// 插件调用
import {getCurrentInstance} from 'vue'
const instance= getCurrentInstance()
instance.appContext.config.globalProperties.$name // 可以拿到值

function

// functionPlugin.js
export default(app)=>{
app.config.globalproperties.$http = 'http'
// 自定义指令
app.directive('color',{
created(el,binding) {
el.style.color = binding.value || 'red'
}
})
}

// main.js
import functionPlugin from '路径'
use(functionPlugin)

// 插件调用
// 指令使用
<h1 v-color>home<h1>
<h1 v-color='blue'>home<h1>

import {getCurrentInstance} from 'vue'
const instance= getCurrentInstance()
instance.appContext.config.globalProperties.$http // 可以拿到值

防抖

npm i lodash -s

// 使用引入
import debounce from 'lodash/debounce'

const debounceClick = debounce(方法名，毫秒值)

// 需要清除副作用,在页面卸载时清除
onUnmounted(()=>{
debounceClick.cancl()
})

组件通信

props
emit
eventBus
$ref,$parent,$root
$attrs,$listeners
provider/inject
vuex,pinia
v-model

props父传子

props:['msg']
setup(props){
// 所有参数都在props里
return {
props
}
} // setup接受第二个参数context

// 使用
props.msg

<script setup>
import {defineProps} from 'vue'  // 父传子借助defineProps函数
const props = defineProps(['msg'])  // 数组
const objProps = defineProps({
msg:{
 type:String,
 default:'默认值'
}
})  // 对象
</script>

emit子传父

emit:['click']
setup(context){
	const handleClick= ()=>{
	context.emit('click','子组件数据')
	}
return {
 handleClick
}
}

<script setup>
import {defineEmits} from 'vue'
const emit = defineEmits(['click'])  // 数组
const emits  = defineEmits({
 click(value){
 if(value){},
 else{}
 }
}) // 对象
const handleClick = ()=	>{
 emit('click','子组件数据')
}
</script>

v-model

// 优化写法
<script setup>
 import {ref} from 'vue'
 const msg = ref('父组件数据')
</script>

// 使用
<child
 :msg = 'msg'
 @update:msg = "data=>msg=data"
></child>
// 优化,v-model语法糖
<child
v-model:msg=msg
></child>

// child.vue
<scrpt setup>
 import {defineEmits,defineProps} from 'vue'
 // 父传子
const Props = defineProps({
msg:{
 type:String,
 default:'默认值'
}
})
// 子传父
 const emit = defineEmits(['update:msg'])
 const handleClick = ()=>{
  emit('update:msg','子组件数据')
 } 
</scrpt>

// 父组件
// 父组件修改父组件的值
<input type=text v-model = msg/>
<child v-model:msg = msg></child>
<script setup>
 import {ref} from 'vue'
 const msg = ref('父组件数据')
</script>

// 子组件
<input type=text v-model=son/>
<script setup>
// 用到的内置函数都要先引入
import {defineProps，defineEmits,ref,watch} from 'vue'
// 子组件接收父组件的数据
const props = defineProps({
msg:{
type:String,
default:'默认值'
}
})
// 为了不直接修改父组件数据，用一个数据接收
const son = ref(props.msg)
// 子传父,事件带参数
const emits = defineEmits(['update:msg'])
// 监听son值的变化，并把变化的值往上传
watch(son,()=>{
emits('update:msg',son.value)
})
</script>

ref

// child.vue
<script setup>
import {ref, defineExpose} from 'vue'
const list = ref(['js','html','vue']) // 通过ref定义list
defineExpose({list})  // 通过defineExpose暴露list,以便父组件可以获取到
</script>


// App.vue父组件
<child ref="childRefs"></child>  // 子组件ref的值与script中的保持一致
<script setup> 
import {ref} from 'vue'
const childRefs = ref(null)
</script>

provide/inject

// 父组件
<script setup>
import {provide} from 'vue'
provide('foo',{
name:'code'
})  // 提供一个对象数据

provide('event',{
	getData(data) {
	console.log('data')
	}
}) // 传递函数
</script>

// 子组件
<script setup>
import {inject} from 'vue'
const foo = inject('foo') // 直接接收一整个对象

const event = inject('event')
event.getData('子组件的数据')  // 调用父组件的函数并传值
</script>