vue3中data|methods与script setup区别

vue3中data|methods与script setup区别

一、 < script > 中data与methods

1.1 data

• 组件data选项是一个函数

• Vue在创建新组件实例的过程中调用此函数

• 它返回一个对象，然后在vue会通过响应性系统其包裹起来

• 必要时，使用null、undefined或其它占位值

1.2 methods

• 自动绑定this

• 避免使用箭头函数，会阻止this指向

1.3 例子

组件

<template>
    <p>{{ msg }}</p>
    <button @click="changeMsg">changeMsg</button>
</template>

<script>
    export default{
        data(){
            return {
                msg:'Hello组件'
            }
        },
        methods:{
            changeMsg(){
               return this.msg+='a'
            }
        },
    }
</script>

使用

<script setup>
import Hello from './components/Hello.vue'
</script>

<template>
  <Hello/>
</template>

二、< script setup > 中data与methods

相同效果，写法更加简洁

<template>
    <p>{{ msg }}</p>
    <button @click="changeMsg">changeMsg</button>
</template>

<script setup>
    import { ref} from 'vue'
    const msg=ref("Hello组件")
    function changeMsg(){
        msg.value+='a'
    }
</script>