选项式Api与组合式Api
首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别
- 选项式Api
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
export default {
data(){
return {
msg:'hello world'
}
},
methods:{
changeMsg(){
this.msg = 'hello juejin'
}
}
}
</script>
- 组合式Api
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
import { ref,defineComponent } from "vue";
export default defineComponent({
setup() {
const msg = ref('hello world')
const changeMsg = ()=>{
msg.value = 'hello juejin'
}
return {
msg,
changeMsg
};
},
});
</script>
- setup 语法糖
<template>
<div @click="changeMsg">{{ msg }}</div>
</template>
<script setup>
import { ref } from "vue";
const msg = ref('hello world')
const changeMsg = () => {
msg.value = 'hello juejin'
}
</script>
总结：
选项式Api是将data和methods包括后面的watch，computed等分开管理，而组合式Api则是将相关逻辑放到了一起（类似于原生js开发）。
setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。
ref 和 reactive
我们都知道在组合式api中，data函数中的数据都具有响应式，页面会随着data中的数据变化而变化，而组合式api中不存在data函数该如何呢？所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据
- 组合式Api
<script>
import { ref,reactive,defineComponent } from "vue";
export default defineComponent({
setup() {
let msg = ref('hello world')
let obj = reactive({
name:'juejin',
age:3
})
const changeData = () => {
msg.value = 'hello juejin'
obj.name = 'hello world'
}
return {
msg,
obj,
changeData
};
},
});
</script>
- setup语法糖
<script setup>
import { ref,reactive } from "vue";
let msg = ref('hello world')
let obj = reactive({
name:'juejin',
age:3
})
const changeData = () => {
msg.value = 'hello juejin'
obj.name = 'hello world'
}
</script>
总结：
使用ref的时候在js中取值的时候需要加上.value。
reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
生命周期
下表包含：Vue2和Vue3生命周期的差异
| Vue2(选项式API) | Vue3(setup) | 描述 |
|---|---|---|
| beforeCreate | - | 实例创建前 |
| created | - | 实例创建后 |
| beforeMount | onBeforeMount | DOM挂载前调用 |
| mounted | onMounted | DOM挂载完成调用 |
| beforeUpdate | onBeforeUpdate | 数据更新之前被调用 |
| updated | onUpdated | 数据更新之后被调用 |
| beforeDestroy | onBeforeUnmount | 组件销毁前调用 |
| destroyed | onUnmounted | 组件销毁完成调用 |
举个常用的onBeforeMount的例子
- 选项式Api
<script>
export default {
mounted(){
console.log('挂载完成')
}
}
</script>
- 组合式Api
<script>
import { onMounted,defineComponent } from "vue";
export default defineComponent({
setup() {
onMounted(()=>{
console.log('挂载完成')
})
return {
onMounted
};
},
});
</script>
- setup语法糖
<script setup>
import { onMounted } from "vue";
onMounted(()=>{
console.log('挂载完成')
})
</script>
从上面可以看出Vue3中的组合式API采用hook函数引入生命周期；其实不止生命周期采用hook函数引入，像watch、computed、路由守卫等都是采用hook函数实现
总结
Vue3中的生命周期相对于Vue2做了一些调整，命名上发生了一些变化并且移除了beforeCreate和created，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们。
生命周期采用hook函数引入
watch和computed
- 选项式API
<template>
<div>{{ addSum }}</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: 2
}
},
computed: {
addSum() {
return this.a + this.b
}
},
watch:{
a(newValue, oldValue){
console.log(`a从${oldValue}变成了${newValue}`)
}
}
}
</script>
- 组合式Api
<template>
<div>{{addSum}}</div>
</template>
<script>
import { computed, ref, watch, defineComponent } from "vue";
export default defineComponent({
setup() {
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
return a.value+b.value
})
watch(a, (newValue, oldValue) => {
console.log(`a从${oldValue}变成了${newValue}`)
})
return {
addSum
};
},
});
</script>
- setup语法糖
<template>
<div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
return a.value + b.value
})
watch(a, (newValue, oldValue) => {
console.log(`a从${oldValue}变成了${newValue}`)
})
</script>
Vue3中除了watch，还引入了副作用监听函数watchEffect，用过之后我发现它和React中的useEffect很像，只不过watchEffect不需要传入依赖项。
那么什么是watchEffect呢？
watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
比如这段代码
<template>
<div>{{ watchTarget }}</div>
</template>
<script setup>
import { watchEffect,ref } from "vue";
const watchTarget = ref(0)
watchEffect(()=>{
console.log(watchTarget.value)
})
setInterval(()=>{
watchTarget.value++
},1000)
</script>
首先刚进入页面就会执行watchEffect中的函数打印出:0,随着定时器的运行，watchEffect监听到依赖数据的变化回调函数每隔一秒就会执行一次
总结
computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行，即（{ immediate: true }）
