//相比选项式，组合式更为灵活。对于一个常见的选项式创建的vue文件，里面如果要写数据，就需要我们将这些数据写在data函数里面，计算属性，函数方法，监听他们都需要写在合适的函数里面。但组合式的这些都可以不需要了，统统都可以写在setup()函数下面（这是组合式的一中写法），写法上他也改变了很多，如果你想创建一个数据，需要import ?{ref,reactive} ?from 'vue'，利用ref函数创建数据，reactive可以创建引用数据类型，不能创建普通数据类型。
然后在setup()里面const message=ref('Hello word')，?const rea=reactive(['reactive'])。
就是说有些需要导入写法了。
//ref创建的数据需要.value才可以出来，最后数据和方法return，就可以有了
<script>
?? ?import ?{ref,reactive} ?from 'vue'
export default{
?? ?name:'App',
?? ?setup() {
?? ??? ?const message=ref('Hello word')
?? ??? ?const arr=ref(['a','b','c'])
?? ??? ?const ?deil=()=>{
?? ??? ??? ?message.value='你好'
?? ??? ?}
?? ??? ?const ?deilarr=()=>{
?? ??? ??? ?arr.value.push('d')
?? ??? ?}
?? ??? ?const rea=reactive(['reactive'])
?? ??? ?const ?godeil=()=>{
?? ??? ??? ?rea.push('d')
?? ??? ?}
?? ??? ?return{
?? ??? ??? ?message,
?? ??? ??? ?deil,
?? ??? ??? ?arr,
?? ??? ??? ?deilarr,
?? ??? ??? ?rea,
?? ??? ??? ?godeil
?? ??? ?}
?? ?}
}
</script>
<template>
<div class="app">
?? ?app
?? ?<h3>基本数据类型：{{message}}</h3>
?? ?<div>ref数组：{{arr}}和reactive数组:{{rea}}</div>
?? ??? ?<button @click="deilarr()">ref修改arr</button>
?? ?<button @click="deil()">ref修改message</button>
?? ?<button @click="godeil()">reactive修改rea</button>
</div>
</template>
<style scoped>
</style>
//还有需要注意的是组件通过属性父传子，事件子传父，在选项式是props和this.$emit这些写法来传递，但在组合式的this是undfined,所以不能使用this,官网提供了setup(props, context)，方法的第一个参数，是组件接收到的属性对象，方法的第二个参数是 context （和this差不多）上下文对象，所以就可以使用了
<template>
? <div class="son">
? ? 子组件
? ? <div>接收到属性: {{ message }}</div>
? ? <div>反转 message: {{ reversedMessage }}</div>
? ? <div><button @click="handleTransfer">向父组件传递数据</button></div>
? ? <div>两个数字相加之和: {{ sum }}</div>
? ? <hr>
? </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
? name: 'Son',
? props: ['message'],
? emits: ['custom'],
? components: {
? ? GrandSon,
? },
? setup(props, context) {
? ? console.log('props:', props)
? ? const reversedMessage = computed(() => props.message.split('').reverse().join(''))
? ? // 子组件向父组件传递数据
? ? const handleTransfer = () => {
? ? ? console.log('context:', context)
? ? ? context.emit('custom', '从子组件向父组件传递数据')
? ? }
?
? ? return {
? ? ? reversedMessage,
? ? ? handleTransfer,
? ? }
? },
}
</script>
<style scoped>
</style>
//如果在组合式想进行跨组件传递数据，像provide,inject就都需要导入，在祖先中import { provide } from 'vue'，然后在setup()里面??provide('message', message)的写法，在后代import { inject } from 'vue'，然后inject('message')，选项式就不需要导入，?provide()函数里面写，return就可以了，最后inject:[]来接收
//还有生命周期上面created在组合式是没有的
//组合式的watch的监听也需要导入，并且还有和他相似的watchEffect，他们的区别是watchEffect会自动执行一次，watch需要一定的配置才行。watch可以监听前后数据的变化，watchEffect只能监听新的数据出现。并且watchEffect可以监听多个数据的变化，但不可以确定是哪一个，watch监听一个。
//选项式的watch和组合式差不多，没有watchEffect
//当然还有几个函数的导入在组合式中，但不常用
//然后组合式的另一种写法，这里就不需要return，子组件不需要components了，简便了很多
//当然传递数据需要define的写法，和之前不一样了
<template>
? <div class="son">
? ? 子组件2，接收到属性: {{ message }}
? ? <br>
? ? {{ reversedMessage }}
? ? <br>
? ? ?两个数字之和: {{ sum }} <br>
? ? <button @click="handleTransfer">发送数据</button>
? </div>
</template>
<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
? message: String
})
const emit = defineEmits(['custom'])
?
const reversedMessage = computed(() => props.message.split('').reverse().join(''))
</script>
<style scoped>
</style>
//然后如果想组合和选项一起用，不会报错，可以使用，但是不建议
//组合里面要使用选项的像methods函数写法，需要defineOptions的写法
defineOptions({
? name: 'App',
? methods: {
? ? handleOptionsClick() {
? ? ? console.log('这是在选项 methods 中定义事件方法...')
? ? }
? }
})
//组合如果在组件使用ref相对选项麻烦一些，不光需要在子组件上面写ref="sonRef"，在setup里面还需要， 获取子组件实例const sonRef = ref()，并且在子组件需要暴露出传递的数据和方法，return会保留数据在里面，使用不能return,需要context.expose()函数的写法，才能让暴露出传递的数据或方法，控制台上面sonRef.value才能看到。在选项中this.$refs.sonRef就可以看到子组件的数据和方法了