Vue组合式与选项式写法的一些总结及部分代码

//相比选项式，组合式更为灵活。对于一个常见的选项式创建的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就可以看到子组件的数据和方法了