vue3中data|methods与script setup区别

最新推荐文章于 2024-05-03 11:08:18 发布

林烈涛

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.8k

点赞数 2

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/linlietao0587/article/details/128337675

版权

Vue3 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

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>