目录
Vue2 ：Options API选项类型（属性data、methods、computed）
data用function返回对象，而不是直接返回对象：多个组件实例时，新建/引用同一个
Vue3 ：Composition API合成型(函数定义组件逻辑，不同组件中可复用)
Vue3.0 暴露变量必须 return 出来，template 中才能使用
Vue3.2 中 setup语法糖，只需要在 script 标签上加上 setup 属性
props：父组件传递给当前组件的属性，默认undifined
context：上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property（attrs、slots、emit）
逻辑组合/复用机制
mixin混入状态复用【官方不推荐使用】
生命周期合并
同名覆盖
难溯源
// mixin1
export default {
created() {
console.log('我是ikun一号')
},
method: {
sayKunkun() {
console.log('kunkun好帅~')
}
}
}
// mixin2
export default {
method: {
say() {
this.sayKunkun();
}
}
}
// index.vue
export default {
mixins: [mixin1, mixin2],
created() {
this.say()
this.love()
},
method: {
say() {
console.log('index.vue ikun')
},
love() {
this.sayKunkun()
}
}
}
我是ikun一号
index.vue ikun
kunkun好帅~
- mixin的 craeted 和 index.vue 的 created 合并执行了
- index.vue 的 say 函数顶掉了 mixin 的 say 函数
- mixin2 居然能访问到 mixin1 的 sayKunkun 函数
hooks钩子【只能在setup生命周期中用】
“高度聚合，可阅读性提升”。伴随而来的便是 “效率提升，bug变少”
ref ()、reactive()=useState
computed()=useMemo
自定义： useXxx
示例
Vue2 ：Options API选项类型（属性data、methods、computed）
选项在组件实例化后会被合并到组件实例中，可以在组件内部访问和使用。
<template>
<div>
<p>{
{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
},
methods: {
changeMessage() {
this.message = 'New Message';
}
}
};
</script>
data用function返回对象，而不是直接返回对象：多个组件实例时，新建/引用同一个
官方的解答：
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了
用function return 其实就相当于申明了新的变量，相互独立
Vue3 ：Composition API合成型(函数定义组件逻辑，不同组件中可复用)
Vue3.0 暴露变量必须 return 出来，template 中才能使用
<template>
<div>
<p>{
{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
//ref函数来创建一个响应式的数据
const message = ref('Hello Vue!');
const changeMessage = () => {
message.value = 'New Message';
};
return {
message,
changeMessage
};
}
};
</script>
Vue3.2 中 setup语法糖，只需要在 script 标签上加上 setup 属性
<script setup>
...
</script>setup(props,context)
props：父组件传递给当前组件的属性，默认undifined
context：上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property（attrs、slots、emit）
<script setup="props, context" lang="ts">
context.attrs
context.slots
context.emit
<script>
<script setup="props, { emit }" lang="ts">
<script>