案列
Vue2
优点;已于学习和使用,写代码的位置约定好。
缺点:数据和业务逻辑分散在同一个文件的N个地方,随着业务复杂度的上升,可能会出现动图左侧的代码组织方式,不利于管理和维护。
<template>
<div class="container">
<p>X 轴:{{ x }} Y 轴:{{ y }}</p>
<hr />
<div>
<p>{{ count }}</p>
<button @click="add()">自增</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// !#Fn1
x: 0,
y: 0,
// ?#Fn2
count: 0
}
},
mounted() {
// !#Fn1
document.addEventListener('mousemove', this.move)
},
methods: {
// !#Fn1
move(e) {
this.x = e.pageX
this.y = e.pageY
},
// ?#Fn2
add() {
this.count++
}
},
destroyed() {
// !#Fn1
document.removeEventListener('mousemove', this.move)
}
}
</script>
优点:可以把同一功能的 *数据 *和 *业务逻辑 *组织到一起,方便复用和维护。
缺点:需要良好的代码组织和拆分能力,相对没有Vue2 容易上手。
注意:为了能让大家较好的过滤到Vue3.0版本,目前也是支持Vue2.x选项API的写法。
链接: why-composition-api、composition-api-doc。
<template>
<div class="container">
<p>X 轴:{{ x }} Y 轴:{{ y }}</p>
<hr />
<div>
<p>{{ count }}</p>
<button @click="add()">自增</button>
</div>
</div>
</template>
<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
export default {
name: 'App',
setup() {
// !#Fn1
const mouse = reactive({
x: 0,
y: 0
})
const move = (e) => {
mouse.x = e.pageX
mouse.y = e.pageY
}
onMounted(() => {
document.addEventListener('mousemove', move)
})
onUnmounted(() => {
document.removeEventListener('mousemove', move)
})
// ?Fn2
const count = ref(0)
const add = () => {
count.value++
}
// 统一返回数据供模板使用
return {
...toRefs(mouse),
count,
add
}
}
}
</script>