VUE computed 计算结果 和 watch 监听 fliter过滤器

目录

一、计算结果 computed

1.computed是什么

2.computed 数据来源

3.computed 使用场景

二、watch监听

1.watch 监听 的含义

2.watch 的数据来源

3.普通监听

 4.深度监听

5.watch使用场景

三、fliter 过滤器

1.过滤器的含义

2.全局过滤器

3.局部过滤器

4.过滤器的使用

---

一、计算结果 computed

1.computed是什么

computed是vue组件的下的一个属性，用来计算各种数据的运算结果，里面可以有一个或者多个计算函数，这些计算函数必须具有返回值。当计算结果中的属性是计算函数，那么函数的返回值就是就算属性值，所以计算结果的额在调用的时候不用像函数一样函数名+（）调用，而是直接函数名获取属性值。

2.computed 数据来源

计算结果的数据来源必须是响应式数据，可以是vue组件中data里的值或者父组件传递过来的props中的数据,必须是响应式数据，computed 支持缓存的，也就是说，computed会先调用一次，存在缓存中，每一次需要用数据，就从缓存中去取。在computed中每一个属性都会有都有一个set 和 get 方法，当数据发生变化时，重新进行计算，并调用set方法，这也是计算结果和普通函数最主要的区别，普通函数调用一次就执行一次，计算一次。另外computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化 。如果有异步则可以使用watch监听。

3.computed 使用场景

当一个属性，依赖于其他多个属性计算而来，就可以使用computed，多对一，一对一，都可以使用。

二、watch监听

1.watch 监听 的含义

监听也是vue组件中下的一个字段，里面使一个或者多个监听函数，监听函数分为普通监听和深度监听，一般用不同监听监听基本数据类型或者对象的单个属性，用深度监听，监听整个对象。因为如果直接监听一个对象，当对象里某而过属性发生改变的时候，普通监听是监听不到数据变化的。

2.watch 的数据来源

watch 的数据源来源和computed是相同的 ，监听的是响应式数据，比如data里的值或者父组件传递过来的props中的数据,必须是响应式数据，但是监听不支持缓存，但支持异步，当数据发生变化时会立即触发操作，

3.普通监听

监听普通数据类型时，

直接监听对象的单个属性、监听单个属性的计算结果：

 

 4.深度监听

直接监听对象：

immediate：组件加载立即触发回调函数执行，当值为true的时候代表首次执行，false或者不写代表不执行，多用于，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

deep:深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。deep无法监听到数组的变动和对象的新增，只有以响应式的方式触发才会被监听到，原因是因为通过数组索引改变数组的时候，数组的地址并未改变，

所以监听不到，可以通过数组变异（变更如：改变数组长度，深浅拷贝，vue.set() 来实现数组更新）

5.watch使用场景

当一个属性发生变化时，需要执行对应的操作；一对多；

三、fliter 过滤器

1.过滤器的含义

过滤器分为全局过滤器和局部过滤器，在vue3中过滤器已经被computed计算结果替代，过滤器的本质是一个函数，过滤器是为了过滤数据的，对数据源进行再操作。函数也必须有返回值。返回值就是新的数据。

2.全局过滤器

在组件外进行定义

Vue.filter("newData",function(pre,e){
    //pre 是要过滤的数据源
    //e 是调用的时候传递的参数
    //return 后的返回值就是新的数据源
    
    return pre + e 

})

3.局部过滤器

在组件内添加fliters字段

 new Vue({
        el: '#myApp',
        data: {
            count:8989,
        },
 
        // 局部过滤器字段
        filters:{
            //函数名就是过滤器名 
            dataF(pre,e){
               //pre 要过滤的数据源
               // e 调用过滤器传递的参数
               // return  就是返回新的数据源
                return e + pre
            }
        },

4.过滤器的使用

局部过滤器和全局过滤器的使用方法并没有区别

使用时都为：{{过滤的数据源 | 过滤器名（要传递的参数）}}

也可以连着调用：{{过滤的数据源 | 过滤器名（要传递的参数）| 过滤器名（要传递的参数）}}

<p>{{count|newData("万")|dataF("❤")}}</p>