江苏网站备案要求,电商网站开发发展和前景,深圳品牌策划设计,商城建设网站的原因data 选项#xff1a;
data 选项#xff1a;属性值必须是一个函数#xff1b;返回值是一个对象#xff0c;返回的对象会被 Vue 的响应式系统劫持#xff0c;之后对该对象的任何访问或者修改都会在劫持中被处理。 在 Vue2.x 中#xff0c;data 的属性值可以是一个函数
data 选项属性值必须是一个函数返回值是一个对象返回的对象会被 Vue 的响应式系统劫持之后对该对象的任何访问或者修改都会在劫持中被处理。 在 Vue2.x 中data 的属性值可以是一个函数也可以是一个对象但是在 Vue3.x 中data 的属性值必须是一个函数否则会在浏览器中直接报错。 div idapph1当前数字{{count}}/h1
/divscript
const app Vue.createApp({// 必须是一个函数返回一个对象data() {return {count: 0,}},
})
app.mount(#app)methods 选项
methods 选项属性值是一个对象在这个对象中可以定义方法这些方法可以被绑定到模板中在这些方法中可以使用 this 关键字直接访问到 data 中返回的对象的属性。 methods 中的函数不能使用箭头函数因为箭头函数没有自己的作用域会继承上级的作用域this 将不会按照期望指向组件实例。 div idapph1当前数字{{count}}/h1button clickhandleAdd1/buttonbutton clickhandleDelete-1/buttonbutton clickhandleError出错了~/button
/divscript
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)
/scriptmethods 函数中的 this
Vue 源码中其实是对 methods 中的所有函数进行遍历通过 bind 绑定 thisthis 就是当前实例的代理对象。
