vue中侦听器,缓存与computed的区别是什么

这篇文章主要讲解了“Vue中侦听器,缓存与computed的区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中侦听器,缓存与computed的区别是什么”吧！

一、计算属性(computed)

1、vue computed 说明

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

分离逻辑(模板和数据分离)

缓存值

双向绑定(getter,setter)

2、语法格式

格式

computed:{ [key: string]: Function | { get: Function, set: Function } }

参数说明：

key：字符串类型

值：可以是一个方法,如果是方法默认是get操作,也可以是对象 ,设置get属性或者set属性

3、基础用法

说明

在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果,

计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新,适用于比较费时的数据计算

示例代码

<div id="app">    <!--使用表达式的方式-->    <p v-text="originalPrice - discountPrice"></p>    <!--使用计算属性的方式-->    <p v-text="currentPrice"></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>    let app = new Vue({        el: '#app',        data: {             id:1,            originalPrice:1200,            discountPrice:200,        },        //计算属性        computed: {            // 把日期换成 常见规格格式的字符串。            currentPrice: function () {                return "当前价格:" + (this.originalPrice - this.discountPrice);            }        }    });

4、setter与getter

说明

每一个计算属性都包含一个getter 和一个setter，上面的示例都是计算属性的默认用法， 只是利用了getter来读取

如果需要，也可以提供一个setter 函数， 当修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数

示例代码

<div id="app1">    <p v-text="currentPrice"></p></div><script src="Https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>    let app = new Vue({        el: '#app',        data: {            id: 1,            originalPrice: 1200,            discountPrice: 200,        },        //计算属性        computed: {             cache:false,            // 把日期换成 常见规格格式的字符串。            currentPrice: {                get: function () {                    return "当前价格:" + (this.originalPrice - this.discountPrice);                },                // 注意必须要传递参数,否则没有意义                set: function (value) {                     //执行自定义的一下操作                    this.discountPrice = value                }            }        }    });</script><!-- 在 console 中 输入 app.currentPrice=300 1> 先执行get方法改变discountPrice的值2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法-->

注意

绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法

5、缓存

说明

计算属性基于它们的依赖进行缓存的，只有相关依赖发生改变的时候才会重新求值，一般为响应式依赖

什么是响应式依赖，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应

示例代码

<!-- 响应式依赖 --><script>    var vm = new Vue({      data: {        // 声明 message 为一个空值字符串        message: ''      },    })    // 响应式    vm.message = 'Hello!'    vm.v="非响应式的的值"</script>

<div id="app">    <button @click="getMethodsDate">methods</button>    <button @click="getComputedDate">computed带缓存</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">    new Vue({        el: '#app',        methods: {            getMethodsDate: function () {                console.log(new Date().toLocaleTimeString())            },            // 返回computed选项中设置的计算属性——computedDate            getComputedDate: function () {                console.log("缓存--->" + this.computedDate)            }        },        computed: {            computedDate: function () {                return new Date().toLocaleTimeString()            }        }    })</script>

6、与methods的区别

computed 只有符合：存在依赖型数据，依赖型数据发生改变这两个条件，computed才会重新计算。而methods下的数据，是每次都会进行计算的

调用方式不一样，computed定义的成员像属性一样访问，而methods定义的成员必须以函数形式调用。

computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。

五、侦听器(watch)

1、说明

官方:当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，watch 选项允许我们执行异步操作 (访问一个 api)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态

watch和我们前面介绍的methods相同的语法，但是有一个关键的区别。虽然嵌套属性的值确实是函数，但键的名称必须对应数据属性中的名称

2、语法格式

watch:{[key: string]: string | Function | Object }]

3、语法说明

key：必须是Vue对象data中定义的属性

值：值可以是一个字符串，这个字符串是方法名；值可以是一个函数；值也可以是一个对象，其中包含回调函数可以其他选项：比如是否深度遍历。

4、基础使用

示例代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>    let vm = new Vue({        data: {            test: "111",            user: {                name: "码帝",                address: {                    city: "大武汉"                }            }        },        methods: {            fun: function (val) {                alert(val)            }        },        watch: {            // 方法名方式 对应 methods中的函数名            // test: 'fun',            // 函数方式            test: function (v1, v2) {                alert("新值" + v1 + "====旧值:" + v2)            },                        //            user: {                handler: function (val) {                    alert(val.name)                },                // 是否深度监听 默认是false                // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的                deep: true            },                        "user.address.city": function (val) {                alert(val)            }        }    });    vm.test = '333';    vm.user.name = "撸帝";    vm.user.address.city = '长沙'

<div id="app">    <input type="text" v-model="search"/>    <ul>        <li v-for="result in results" v-text="result"></li>    </ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>    let vm = new Vue({        el: "#app",        data: {            user:{                name:"码帝",            }            search: "",            results: [],                    },        methods: {          fun: function () {            alert("111");          }        }        watch: {         // 使用函数            search: function (v1, v2) {             console.log('新值: %s, 旧值: %s', v1, v2)                this.results.push(v1)            }        }            })</script>

5、与computed的区别

触发条件不同

computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。

watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。

应用场景不同

执行异步操作，开销较大的操作，避免堵塞主线程，使用watch。

简单且串行返回的，使用computed

感谢各位的阅读，以上就是“vue中侦听器,缓存与computed的区别是什么”的内容了，经过本文的学习后，相信大家对vue中侦听器,缓存与computed的区别是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！