JS VUE 的配置项 / 模板1. data(){ return { } } 用选项式 API 时，会用 data

1. data(){ return { } }

用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。

2.methods: { }

要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象：
Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。

3. components: { }

在Vue中，你可以使用components选项来注册组件，然后在模板中使用这些组件。下面是一个简单的例子来说明如何使用components选项：

js
    <template>
        <title_bu />
    </template>

    <script>
    import title_bu from './components/title_bu.vue'
        export default {
            components: {
                title_bu
            }
        }
    </script>

通过这种方式，你可以在Vue实例中注册和使用任意数量的组件，使得你的应用更加模块化和可维护。

4. computed: { }

在Vue中，computed属性用于计算派生出来的数据，它们依赖于Vue实例的响应式数据，并且会在依赖数据发生变化时自动更新。computed属性可以像普通属性一样在模板中使用，但是它们实际上是基于它们的依赖关系进行缓存的，只有在依赖数据发生变化时才会重新计算。

要在Vue中使用computed属性，你可以在Vue实例的computed选项中定义计算属性，例如：

js
    <template>
        <p>数据--- {{ num }} --- {{ getStatic }}</p>
        <button @click="setNum">点击修改num 的 值</button>
    </template>
    <script>
    export default {
        data() {
            return {
                num: 1,
                static: '奇数'
            }
        },
        methods: {
            setNum() {
                this.num = Math.floor( Math.random() * 10 + 1)
            }
        },
        computed: {
            getStatic() {
                console.log(new Date().getFullYear())
                return this.num % 2 === 0 ? '偶数' : '奇数'
            }
        }
    }
    </script>

当num的值发生变化时，static会自动更新以反映最新的计算结果。

总之，computed属性是Vue中非常有用的特性，可以帮助你简化模板中的复杂逻辑，同时也能提高应用的性能。

5. 侦听器（watch）

在Vue中，你可以使用侦听器（watcher）来监听数据的变化，并在数据发生变化时执行相应的操作。你可以在Vue组件中使用watch选项来定义侦听器，示例如下：

js
    <template>
        <h1>年份 --- {{ year }}</h1>
        <button @click="year++">修改年份</button>

        <h1>{{ msg1 }} --- {{ msg2 }}</h1>
    </template>

    <script>
    export default {
        data() {
            return {
                year: 2005,
                msg1: "",
                msg2: "",
            };
        },
        // 内部专门存储 侦听器
        watch: {
            year: {
                handler() {
                    console.log(
                        "页面首次执行的时候, 我不会执行, 但是 year 这个变量被修改后我会立即执行"
                    );
                    // document.body.style.backgroundColor = "red";
                    this.msg1 = "msg1 展示";
                    this.msg2 = "msg2 展示";
                },
                // 将当前的侦听器在页面打开的时候立即执行一次
                immediate: true,

                // 开始深层监听, 极度不推荐, 因为这个选项开启之后, 会遍历我们监听的对象/数组内的所有数据, 不管对象或者数组有多少层, 都会监听, 非常浪费性能
                // deep: true

                // 将侦听器的回调延迟到 VUE 真实 DOM 更新完毕后 执行
                // flush: 'post'
            },
            // year() {
            //     console.log(
            //         "页面首次执行的时候, 我不会执行, 但是 year 这个变量被修改后我会立即执行"
            //     );
            //     document.body.style.backgroundColor = "red";
            //     this.msg1 = "msg1 展示";
            //     this.msg2 = "msg2 展示";
            // },
        },
    };
    </script>

在上面的示例中，我们定义了一个名为year的数据属性，然后使用watch选项来定义侦听器，侦听year的变化。当year发生变化时，侦听器会执行相应的操作。

你也可以使用计算属性来实现类似的功能，计算属性会在相关依赖发生变化时自动重新计算，但如果你需要执行异步或开销较大的操作，侦听器通常更适合。

6. 计算属性与监听器的区别

侦听器

页面打开的时候不会立即执行，除非添加配置项
没有缓存性
内部可以书写异步代码
内部不需要书写 return
一个值（监听的值）的变化可能会导致多个值发生变化一对多

计算属性

只要使用了计算属性，那么页面一打开计算属性就会立即执行一次
具有缓存性
内部不能书写异步代码
内部必须书写 return
多个值（计算属性内的所有响应式数据）的变化，可能会导致一个值发生变化多对一

模板指令 重点！！！

JS VUE 的配置项 / 模板