Vue 3.0学习笔记之 Data Property和方法

组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象然后 Vue 会通过响应性系统将其包裹起来并以 $data 的形式存储在组件实例中。为方便起见该对象的任何顶级 property 也直接通过组件实例暴露出来

1. const app = Vue.createApp({
2. data() {
3. return { count: 4 }
4. }
5. })
8. const vm = app.mount('#app')
11. console.log(vm.$data.count) // => 4
12. console.log(vm.count) // => 4
15. // 修改 vm.count 的值也会更新 $data.count
16. vm.count = 5
17. console.log(vm.$data.count) // => 5
20. // 反之亦然
21. vm.$data.count = 6
22. console.log(vm.count) // => 6

这些实例 property 仅在实例首次创建时被添加所以你需要确保它们都在 data 函数返回的对象中。必要时要对尚未提供所需值的 property 使用 null、undefined 或其他占位的值。。

直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内所以 Vue 的响应性系统不会自动跟踪它。

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀。你应该避免使用这两个字符开头的的顶级 data property 名称。

#方法

我们用 methods 选项向组件实例添加方法它应该是一个包含所需方法的对象

1. const app = Vue.createApp({
2. data() {
3. return { count: 4 }
4. },
5. methods: {
6. increment() {
7. // `this` 指向该组件实例
8. this.count++
9. }
10. }
11. })
14. const vm = app.mount('#app')
17. console.log(vm.count) // => 4
20. vm.increment()
23. console.log(vm.count) // => 5

Vue 自动为 methods 绑定 this以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数因为这会阻止 Vue 绑定恰当的 this 指向。

这些 methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中它们通常被当做事件监听使用

1. <button @click="increment">Up vote</button>

在上面的例子中点击 <button> 时会调用 increment 方法。

也可以直接从模板中调用方法。就像下一章节即将看到的通常换做计算属性会更好。但是在计算属性不可行的情况下使用方法可能会很有用。你可以在模板支持 JavaScript 表达式的任何地方调用方法

1. <span :title="toTitleDate(date)">
2. {{ formatDate(date) }}
3. </span>

如果 toTitleDate 或 formatDate 访问任何响应式数据则将其作为渲染依赖项进行跟踪就像直接在模板中使用过一样。

从模板调用的方法不应该有任何副作用比如更改数据或触发异步进程。如果你想这么做应该换做生命周期钩子。

#防抖和节流

Vue 没有内置支持防抖和节流但可以使用 Lodash 等库来实现。

如果某个组件仅使用一次可以在 methods 中直接应用防抖

1. <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js" rel="external nofollow" ></script>
2. <script>
3. Vue.createApp({
4. methods: {
5. // 用 Lodash 的防抖函数
6. click: _.debounce(function() {
7. // ... 响应点击 ...
8. }, 500)
9. }
10. }).mount('#app')
11. </script>

但是这种方法对于可复用组件有潜在的问题因为它们都共享相同的防抖函数。为了使组件实例彼此独立可以在生命周期钩子的 created 里添加该防抖函数:

1. app.component('save-button', {
2. created() {
3. // 用 Lodash 的防抖函数
4. this.debouncedClick = _.debounce(this.click, 500)
5. },
6. unmounted() {
7. // 移除组件时取消定时器
8. this.debouncedClick.cancel()
9. },
10. methods: {
11. click() {
12. // ... 响应点击 ...
13. }
14. },
15. template: `
16. <button @click="debouncedClick">
17. Save
18. </button>
19. `
20. })