vue 常用特性 ( 计算属性 | 侦听器 | 过滤器 )

计算属性

在 Vue.js 中，计算属性是一种基于它们的依赖进行缓存的响应式属性。计算属性在模板中被当作普通属性来使用，但它们实际上是基于它们的依赖（即其他数据属性）动态计算出来的值。

定义计算属性

在 Vue 组件中，可以通过 computed 选项来定义计算属性。计算属性是一个对象，其键是计算属性的名称，值是一个函数，该函数返回计算属性的值。

 <div id="app">
        <div>计算属性--{{reversedMsg}}</div>
        <div>计算属性--{{reversedMsg}}</div>
        <div>方法--{{reverse()}}</div>
        <div>方法--{{reverse()}}</div>


    </div>
    <script>
        //  表达式的计算逻辑可能会比较复杂,使用计算属性可以使魔板内容更加简洁
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '焦虑'
            },
            //计算属性在 Vue 组件的 computed 选项中进行定义
            computed: {
                //反转字符串
                reversedMsg: function() {
                    console.log('调用了计算属性');

                    return this.msg.split('').reverse().join('');
                }
            },
            methods: {
                reverse: function() {
                    console.log('调用了方法');

                    return this.msg.split('').reverse().join('');

                }
            }
        })
    </script>

计算属性的特点

缓存：

计算属性是基于它们的依赖进行缓存的。如果依赖没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不会重新执行函数。

方法 vs 计算属性：

虽然计算属性在模板中看起来和方法类似（都是使用 {{ }} 语法），但它们有一个重要的区别：计算属性是基于它们的依赖进行缓存的，而方法则会在每次调用时重新执行。

设置器（Setter）：

计算属性默认只有 getter，但也可以提供一个 setter。当计算属性被赋值时，setter 会被调用。

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

过滤器

Vue过滤器是Vue.js框架中一种用于对数据进行格式化处理的工具

形式

1: 它们可以在双花括号插值,通过管道符“|”来调用
2: v-bind表达式中使用

Vue过滤器分为全局过滤器和局部过滤器两种：

全局过滤器：定义在Vue实例化之前，作用于所有Vue实例。适用于需要在多个组件中复用的过滤器。全局过滤器的定义通常放在Vue实例化之前，使用Vue.filter方法。
局部过滤器：定义在组件内部，只作用于该组件。适用于只在特定组件中使用的过滤器。局部过滤器在组件的filters选项中定义。

<!--过滤器作用 格式化数据-->
    <div id="app">
        <!--添加过滤器-->
        <input type="text" v-model="msg" />
        <!--可添加多个过滤器-->
        <!--方法一 插值表达式-->
        <div>{{msg | upper | lower}}</div>

        <!--方法二 属性绑定-->
        <div :a="msg | upper">测试</div>

    </div>

    <script type="text/javascript">
        //全局过滤器 val是目表元素
        /* Vue.filters(过滤器名称,function(目标数据,参数){
             return 结果  
         })*/
        // /charAt(index) 返回指定索引的字符
        Vue.filter('upper', function(val) {
            return val.charAt(0).toUpperCase() + val.slice(1)
        })
        Vue.filter('lower', function(val) {
            return val.charAt(0).toUpperCase().toLowerCase() + val.slice(1)
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ""


            },
            methods: {

            },
            //局部过滤器
            filters: {
                lower: function(val) {
                    return val.charAt(0).toUpperCase().toLowerCase() + val.slice(1)

                },
                upper: function(val) {
                    return val.charAt(0).toUpperCase() + val.slice(1)

                }
            }
        })
    </script>

侦听器

侦听器（Watcher）是Vue.js提供的一种响应式数据监听机制，监听Vue实例上数据属性的变化，并在变化发生时执行特定的逻辑。以下是关于Vue侦听器的详细解释：

在Vue实例或组件中，可以通过watch选项来定义侦听器。watch是一个对象，其键是要监听的数据属性的名称，值是一个函数或带有选项的对象，该函数或对象将在数据属性变化时被调用。

简单函数形式

侦听器可以是一个简单的函数，该函数接收两个参数：新值和旧值。当监听的数据属性变化时，函数会被调用，并传入新值和旧值作为参数。

<div id="app">
        <div>
            <label>姓</label>
            <input type="text" v-model="firstName" />
        </div>
        <div>
            <label>名</label>
            <input type="text" v-model="lastName" />
        </div>
        <!--实时显示姓名-->
        <div>{{fullName}}</div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            //侦听器观察和相应Vue实例上数据的变化,数据一旦发生变化就通知侦听器绑定的方法
            //应用场景:数据变化是进行异步或是开销大的操作
            el: '#app',
            data: {
                firstName: '',
                lastName: '',
                fullName: '' 


            },
           watch: {
                firstName: function(newVal, oldVal) { //newVal 变化后的值 ,oldVal原来的值
                    this.fullName = newVal + this.lastName;
                    console.log('原来的值' + oldVal);

                },
                lastName: function(newVal, oldVal) { //val 为fullName变化后的值
                    this.fullName = this.firstName + newVal
                }
            },
        })
    </script>   

带有选项的对象形式：

侦听器也可以是一个带有选项的对象，这些选项包括handler（回调函数）、deep（深度监听）、immediate（立即执行）等。

deep: true表示深度监听user对象内部属性的变化，immediate: true表示在侦听器初始化时立即执行回调函数。

new Vue({
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    user: {
      handler: function(newVal, oldVal) {
        console.log('user object changed');
      },
      deep: true,
      immediate: true
    }
  }
});