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

《Vue3 三》Vue 中的 options 选项

news 2025/6/23 5:19:52

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>