Vue3 组合式 选项式 区别简单理解

其实没那么麻烦，简单来说组合式的好处就是让 “数据” 和 “逻辑” 可以放在一起，方便维护，提高代码清晰度，不过实在不喜欢组合式的，Vue3并没有废弃选项式，好了，看代码

DOM绑定基本没变 说下 script 里的一些基本内容 和 script标签的 区别

老旧的选项式

<script>
    export default {
        
    }
</script>

新的组合式

<script setup>

</script>

数据绑定

选项式 在data里 写需要双向绑定的值

<script>
    export default {
        data() {
            return {
                msg :'This is a piece of data',
                name:'zopy'
            }
        }
    }
</script>

组合式 需要绑定的值 用 ref 包起来就可以了

<script setup>

    import { ref } from 'vue'

    let msg  = ref('This is a piece of data')
    let name = ref('zopy')
    
</script>

方法

选项式 方法统一在 methods 对象里

<script>
    export default {
        data() {
            return {
                msg :'This is a piece of data',
                name:'zopy'
            }
        },
        methods: {
            // 方法被调用时 修改 name 的值
            setInfo(){
                this.name = 'A porn-loving kitten'
            }   
        }
    }
</script>

组合式 单独定义方法 修改绑定的值时 不再使用 this 关键词 而是使用 .value 获取值

<script setup>

    import { ref } from 'vue'

    let msg  = ref('This is a piece of data')
    let name = ref('zopy')
    
    // 方法被调用时 修改 name 的值
    let setInfo = () => {
        name.value = 'A porn-loving kitten'
    }

</script>

生命周期 这里使用 mounted 生命周期 做示例 其他同理 新的组合式生命周期名称 去官网查

选项式

<script>
    export default {
        data() {
            return {
                msg :'This is a piece of data',
                name:'zopy'
            }
        },
        methods: {
            // 方法被调用时 修改 name 的值
            setInfo(){
                this.name = 'A porn-loving kitten'
            }   
        },
        mounted() {
            // 页面初始化 调用 setInfo 方法
            this.setInfo()
        }
    }
</script>

组合式 需要引入 请注意

<script setup>

    import { ref, onMounted } from 'vue'

    let msg  = ref('This is a piece of data')
    let name = ref('zopy')
    
    // 方法被调用时 修改 name 的值
    let setInfo = () => {
        name.value = 'A porn-loving kitten'
    }

    onMounted(()=>{
        // 页面初始化 调用 setInfo 方法
        setInfo()
    })

</script>

路由 

选项式

<script>
    export default {
        data() {
            return {
                msg :'This is a piece of data',
                name:'zopy'
            }
        },
        methods: {
            // 方法被调用时 修改 name 的值
            setInfo(){
                this.name = 'A porn-loving kitten'
            },
            // 跳转页面
            goPage(){
                this.$router.push({ name:'index' })
            }
        },
        mounted() {
            // 页面初始化 调用 setInfo 方法
            this.setInfo()
        }
    }
</script>

组合式 需要引入 并挂载

<script setup>

    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    
    let router = useRouter()       // 挂载路由实例
    let msg    = ref('This is a piece of data')
    let name   = ref('zopy')
    
    // 方法被调用时 修改 name 的值
    let setInfo = () => {
        name.value = 'A porn-loving kitten'
    }

    // 跳转页面
    let goPage = () => {
        router.push({ name: 'index' })
    }

    onMounted(()=>{
        // 页面初始化 调用 setInfo 方法
        setInfo()
    })

</script>

别的就先暂时不说了 能理解就行