Vue3 新特性
1.子组件传值
子组件传值,Vue3.x直接以v-model:xxx形式传入参数,并且配合修饰符.sync进行数据同步更新,且组件支持多个v-model;
2.Reactive
Reactive,该方法接收一个参数 {} 创建一个响应式对象,如果该参数不是对象的话,也可以渲染到模板上,但不是响应式的数据;
3.Ref
Ref,该方法接收一个参数,可以是单个值,也可以是一个对象,并且都是响应式的数据。返回值里面带有.value属性取值,当使用模板渲染的时候可省去.value;
4.Computed
Computed,数据都是只读不能改变,传入一个对象set和get函数方法,这样才可以修改;
5.Readonly
Readonly,该方法接收传入一个对象,默认是只读功能,是深层对象只读,不管嵌套多少层的属性都是只读状态;
6.WatchEffect
WatchEffect,该方法接收一个函数并且立即执行,并当该函数里的变量变更时,重新执行该函数。该方法无法获取到原值,只能是改变之后的值;
如果要监听哪个值,需要在该函数里写出来,否则监听无效
import { ref, watchEffect } from "vue"
export default {
name: 'test',
setup() {
let name = ref(“鸣人");
let age = ref(23);
watchEffect(() => {
name.value; // 监听name
age.value; // 监听age
console.log(name.value)
console.log(age.value)
})
setTimeout(() => {
name.value = “路飞"
}, 5000)
setTimeout(() => {
age.value = 18
}, 1000)
}
}
有时候我们想在触发一定的条件后取消监听。这时可以执行watchEffect的返回值
import { ref, watchEffect } from "vue"
export default {
name: 'test',
setup() {
let name = ref(“鸣人");
let age = ref(23);
let stop = watchEffect(() => {
name.value; // 监听name
age.value; // 监听age
console.log(name.value)
console.log(age.value)
})
setTimeout(() => {
name.value = “路飞"
}, 5000)
setTimeout(() => {
age.value = 18;
setTimeout(stop, 300)
}, 1000)
}
}
6.watch
watch等同于Vue2.x中的this.$watch,watch需要监听特定数据,默认情况是懒执行,也就是只有当数据发生变化时才执行第二个参数函数。
对比WatchEffect ,Watch允许我们
1.懒执行函数
2.更明确哪些状态改变触发监听器
3.可以监听获取到变化前后的值
监听单个值
import { ref, watch } from "vue"
export default {
name: 'test',
setup() {
let name = ref(“鸣人");
watch(name, (newVal, oldVal) => {
console.log(newVal, oldVal) // 路飞, 鸣人
})
setTimeout(() => {
name.value = “路飞"
}, 1000)
}
}
监听多个值,返回的是一个数组对象
import { ref, watch } from "vue"
export default {
name: 'test',
setup() {
let name = ref(“鸣人");
let age = ref(23);
watch([name, age], (newVal, oldVal) => {
console.log(newVal, oldVal) // ["路飞", 18], ["鸣人", 23]
})
setTimeout(() => {
name.value = “路飞"
age.value = 18
}, 1000)
}
}
7.生命周期系列
在Vue3.X也可以在setup函数下使用生命周期,这些钩子函数写法跟之前的生命周期写法不同。
注意:这些生命周期写法只能在setup函数下使用,在其它地方使用则会报错。
与Vue2.x版本生命周期相对应的组合式Api
- beforeCreate --> setup
- created --> setup
- beforeMount --> onBeforeMount
- mounted --> onMounted
- beforeUpdate --> onBeforeUpdate
- updated --> onUpdated
- beforeDestroy --> onBeforeUnmount
- destroyed --> onUnmount
<script>
import { onMounted, onUpdated, onUnmounted } from “vue"
export default {
name: 'test',
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
}
</script>
8.Provide && Inject
该方法和Vue2.x的 provide、inject一样的。但是Vue3新特性这俩方法只能在setup中使用。
- Provide:接收2个参数,第一个key值,第二个value值,进行传递
- Inject:接收2个参数,第一个是provide的key值,默认第二个参数可选,可以设置默认值(当找不到key值,设置一个默认值)
9.Refs
该方法相当于Vue2.x的refs一样获取元素,那么在setup中配合使用ref对象进行获取
<template>
<div class="test">
<p ref="el">123456</p>
</div>
</template>
<script>
import { ref, onMounted } from "vue"
export default {
name: 'test',
setup() {
let el = ref(null)
onMounted(() => {
console.log(el) // p标签元素
})
return {
el
}
}
}
</script>