前言
vue3已经是默认版本，必须得学习一下，每天都能进步一点。
### vue3新特性之初识setup
1、setup
新的组件选项，在创建组件之前执行，并作为组合式 API 的入口点
2、setup返回值
set(){
const msg:string='xdclass';
return{
msg
}
}
vue3新特性学习之ref
1、问题引出
setup(){
let msg:string='xdclass';
function changeMsg(){
msg='老帆';
}
return{
msg,
changeMsg
}
}
{{msg}}
<button @click="changeMsg">改变</button>
2、ref
接受一个内部值并返回一个响应式且可变的 ref 对象。
const val=ref(msg);
const val=ref('xdclass');
console.log(val.value);
{{val}}
### vue3新特性学习之reactive
1、reactive
作用：定义多个数据的响应式
const proxy=reactive(obj):接收一个普通对象然后返回该普通对象的响应式代理器对象
* 响应式转换是“深层的”：会影响对象内部所有的嵌套的属性
2、练习
setup(){
const obj=reactive({
name:'小D',
courses:['javase','ssm','springboot'],
gender:'男'
})
function changeCourse(){
obj.name +='+';
}
function changeName(){
obj.courses[0] +='+';
}
console.log(obj);
return{
obj,
changeCourse,
changeName
}
}
<button @click='changeName'>改变名字</button>
<button @click-'changeCourse'>改变课程</button>
姓名：{{obj.name}}<br>
课程：
<ul>
<li v-for='(item,index) in obj.courses' :index='index'>{{item}}</li>
</ul>
### vue3新特性学习之setup刨析
1、setup执行时机
在beforeCreate之前执行（执行一次），此组件对象还没有创建,
this是undefined,不能通过this来访问data\computed\methods\props
此时要想使用组件怎么办呢？
可以通过getCurrentInstance这个函数来返回当前组件的实例对象，也就是当前vue这个实例对象
2、setup返回值
一般都返回一个对象：为模版提供数据，也就是模版中可以直接使用此对象中的所欲属性方法
返回对象中属性会与data函数返回对象的属性合并为组件对象的属性
返回对象中的方法会与methods中的方法合并成功组件对象的方法
思考问题一：
为什么methods中可以使用方法setup提供的属性和方法，但是在setup方法中不能访问data和methods？
### vue3新特性中的生命周期钩子函数
vue2 声明周期钩子函数
beforeCreate() {
console.log("beforeCreate 执行了~~~");
},
created() {
console.log("created 执行了~~~");
},
beforeMount() {
console.log("beforeMount 执行了~~~");
},
mounted() {
console.log("mounted 执行了~~~");
},
beforeUpdate() {
console.log("beforeUpdate 执行了~~~");
},
updated() {
console.log("updated 执行了~~~");
},
BeforeUnmount() {
console.log("BeforeUnmount 执行了~~~");
},
unmounted() {
console.log("mounted 执行了~~~");
},
vue3的声明周期钩子函数
onBeforeUnmount(() => {
console.log("vue3 ------onBeforeUnmount 执行了~~~");
});
onMounted(() => {
console.log("vue3 ------onMounted 执行了~~~");
});
onBeforeUpdate(() => {
console.log("vue3 ------onBeforeUpdate 执行了~~~");
});
onUpdated(() => {
console.log("vue3 ------onUpdated 执行了~~~");
});
onBeforeUnmount(() => {
console.log("vue3 ------onBeforeUnmount 执行了~~~");
});
onUnmounted(() => {
console.log("vue3 ------onUnmounted 执行了~~~");
});
### vue3中computed(计算属性)
使用 getter 函数， 返回的值返回一个不变的响应式 ref 对象。
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value)
plusOne.value++
或者，它可以使用具有 get 和 set 函数的对象来创建可写的 ref 对象。
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value)
### vue3中watch(监听器)
1、watch在vue3中如何使用
`
const obj=reactive({
name:'小D',
courses:['ssm','javase','springboot']
})
watch(obj,(value)=>{
console.log(value);
console.log(obj);
})
2、vue3中watch的配置
watch:中的第一个参数监视源 count 第二个参数 回调函数 第三个参数watch配置项
第三个配置项中有两个参数
immedudate:默认值为false, 开启后默认会执行一次watch
deep:开启深度监视
3、watch监听多个源
watch([参数一，参数二]，()=>{});
