当前位置：首页 > article >正文

《Vue3 三》Vue 中的 options 选项

article 2024/12/25 13:10:09

data 选项：

data 选项：属性值必须是一个函数；返回值是一个对象，返回的对象会被 Vue 的响应式系统劫持，之后对该对象的任何访问或者修改都会在劫持中被处理。

在 Vue2.x 中，data 的属性值可以是一个函数，也可以是一个对象；但是在 Vue3.x 中，data 的属性值必须是一个函数，否则会在浏览器中直接报错。

<div id="app">
    <h1>当前数字：{{count}}</h1>
</div>

<script>
const app = Vue.createApp({
    // 必须是一个函数，返回一个对象
    data() {
        return {
            count: 0,
        }
    },
})
app.mount('#app')

methods 选项：

methods 选项：属性值是一个对象；在这个对象中可以定义方法，这些方法可以被绑定到模板中，在这些方法中可以使用 this 关键字直接访问到 data 中返回的对象的属性。

methods 中的函数不能使用箭头函数，因为箭头函数没有自己的作用域，会继承上级的作用域，this 将不会按照期望指向组件实例。

<div id="app">
    <h1>当前数字：{{count}}</h1>
    <button @click="handleAdd">+1</button>
    <button @click="handleDelete">-1</button>
    <button @click="handleError">出错了~</button>
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            count: 0,
        }
    },
    methods: {
        // 这么写是正确的
        handleAdd: function() {
            this.count++;
        },
        // 这么写是正确的
        handleDelete() {
            this.count--;
        },
        // 这么写是错误的。箭头函数没有自己的作用域，会继承上级的作用域，this 将不会按照期望指向组件实例。上一级是 methods，是一个对象，没有作用域；再上一级是 Vue.createApp 中的对象，也没有作用域；再上一级就是全局作用域 window 了。 
        handleError: () => {
           console.log(this)
        },
    }
})
app.mount('#app')
</script>