vue学习--data property用法
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>