1. property
组件的 data
选项是一个函数,返回一个对象,对象的属性可以在模板中使用。
<template>
<div class="hello">
<div>{{test}}</div>
</div>
</template>
<script>
export default {
$data: null,
data() {
return {
test: '普通文本',
}
}
}
data函数返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data
的形式存储在组件实例中。为方便起见,该对象的任何顶级 property 也直接通过组件实例暴露出来
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5
// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6
Vue 使用 $
前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _
前缀。你应该避免使用这两个字符开头的的顶级 data
property 名称(当然你用了,直接会在编译阶段报错,比如用了$data: error Key '$data' is reserved vue/no-reserved-keys)
2.方法
我们用 methods
选项向组件实例添加方法,它应该是一个包含所需方法的对象
- Vue 自动为
methods
绑定this
,以便于它始终指向组件实例 - 定义
methods
时应避免使用箭头函数,因为这会阻止 Vue 绑定恰当的this
指向
<template>
<div class="hello">
<div @click="increment">{{count}}</div>
<div @click="increment2">{{count2}}</div>
</div>
</template>
<script>
export default {
$data: null,
data() {
return {
test: '普通文本',
count: 0,
count2: 0,
}
},
methods: {
// 正常运行
increment() {
this.count++;
},
// this指向不对,this是undefined
increment2: () => {
this.count2++;
}
}
}
</script>