Vue.js（4）：Data Property 和方法

逃离我推掉我的手 2022-09-14 09:52 139阅读 0赞

# 一、Data Property #

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

// 创建Vue对象
        const app = Vue.createApp({
            data() { // data函数，返回对象
                return { count: 4 }
            }
        })
        // 将Vue挂载到id为app的元素上
        const vm = app.mount('#app')
        // 在js中获取Vue中data函数值的方法，用组件实例直接调用即可
        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

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

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

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

# 二、方法 #

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

// 创建vue
        const app = Vue.createApp({
            data() {// 向组件实例添加属性
                return { count: 4 }
            },
            methods: {// 向组件实例添加方法
                increment() {
                    // `this` 指向该组件实例
                    this.count++
                }
            }
        })
        // 将vue挂载到元素上
        const vm = app.mount('#app')
        
        console.log(vm.count) // => 4
        // 调用实例方法 
        vm.increment()
    
        console.log(vm.count) // => 5

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

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

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

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

<div id="app">
    
        <span :title="toTitleDate(date)">
    
            {
       { formatDate(date) }}
        </span>
    </div>
    
    <script>
        // 创建vue
        const app = Vue.createApp({
            data() {// 向组件实例中添加一个日期属性
                return {
                    date: new Date()
                }
            },
            methods: {// 向组件实例添加方法
                toTitleDate: function (date) { // 将日期格式化后返回
                    return date.toLocaleString();
                },
                formatDate: function (date) { // 将日期格式化后返回
                    return date.toLocaleString();
                }
            }
        })
        // 将vue挂载到元素上
        const vm = app.mount('#app')
    
    </script>

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

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

## 防抖和节流 ##

Vue 没有内置支持防抖和节流，但可以使用 [Lodash][] 等库来实现。如果某个组件仅使用一次，可以在 `methods` 中直接应用防抖：

<div id="app">
        <button @click="click">点击</button>
    </div>
    
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
    <script>
        Vue.createApp({
            methods: {
                // 用 Lodash 的防抖函数
                click: _.debounce(function () {
                    alert(1)
                }, 1000)
            }
        }).mount('#app')

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

<div id="app">
    
        <save-button></save-button>
    </div>
    
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
    <script>
        // 创建vue
        const vue = Vue.createApp({});
        // 创建组件 （组件名，参数）
        vue.component('save-button', {
            created() { // 钩子函数创建后执行
                // 用 Lodash 的防抖函数
                this.debouncedClick = _.debounce(this.click, 500)
            },
            unmounted() { // 钩子函数卸载后执行
                // 移除组件时，取消定时器
                this.debouncedClick.cancel()
            },
            methods: { // 组件需要的方法集合
                click() {
                    alert(2)
                }
            },  // 定义组件使用模版
            template: `
              <button @click="debouncedClick">
              Save
              </button>
            `
        })
        // 将vue挂载到元素上，注意一定要放在创建组件后面，组件才能正常运行。
        vue.mount('#app');
    </script>

[Vue]: https://v3.cn.vuejs.org/guide/reactivity.html
[Link 1]: https://v3.cn.vuejs.org/guide/computed.html
[Link 2]: https://v3.cn.vuejs.org/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[Lodash]: https://lodash.com/