欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别

发布时间：2024/9/18 vue 59 豆豆
生活随笔 收集整理的这篇文章主要介绍了 vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

思考：请说下Vue中computed 和 watch 的区别( 面试题 )

构造选项

computed / watch / methods

computed

● computed 起初构想

在Vue的 template模板内（{{ }}）是可以写一些简单的js表达式的很便利，如上直接计算

{{this.firstName + ' ' + this.lastName}}

因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。

● computed属性的实现原理

  • Vue实例初始化时，给data的每个属性(data)都添加getter和setter方法
  • 计算属性computed初始化时，提供的函数将作为对应属性(computed)的getter方法
    其中
    • computed: function(){return this.data+'change' }
  • 当首次获取计算属性的值是，dep开始收集依赖，即收集到data和computed的依赖关系
  • 在data变化时，此时会调用data的getter方法，通过dep收集的依赖，可以判定出data与computed对应数据的依赖关系
  • 此时可以做到，在data发生变化时，computed属性数据也发生变化

    • ● computed

    computed 就是计算属性的意思

    含义：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

    <div id="example">{{ message.split('').reverse().join('') }} </div>

    在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

    所以，对于任何复杂逻辑，你都应当使用计算属性。

    ● 实例：计算属性的getter函数

    当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body><div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p> </div><script> var vm = new Vue({el: '#app', //element：元素data: {message: 'Runoob!'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}} }) </script></body> </html>—————————————————————————————————————————————————— 运行结果： 原始字符串: Runoob!计算后反转字符串: !boonuR

    同步实时更新：getter属性

    实例中声明了一个计算属性 reversedMessage,提供的函数将用作属性 vm.reversedMessage 的 getter，vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

    computed 计算出一个值：其值在调用不需要加括号，当属性一样使用,它会根据你所依赖的数据动态显示新的计算结果。计算结果根据依赖会自动缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算 ( 依赖不变computed不会重新计算 )

    ● 实例：计算属性的setter函数

    当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。// 显示-姓名/邮件/电话,但是会重复 // DRY Don't rapeat yourself, 用 computed 来计算 displayNametemplate: `<div>{{user.nickname || user.email || user.phone}}</div>` ——————————————————————————————————————————————————template: `<div>{{displayName}}<div><button @click="set">set</button></div></div>`, computed: { //通过 computed 更改 displayName 中的值(set-nickName)displayName: { //方法（当属性使用），computed会默认读取返回值get() {const user = this.user;return user.nickname || user.email || user.phone;},set(value) { // 这里由于该计算属性被赋值，将被调用this.user.nickname = value;}}},methods: {set() { // 赋值，调用setter函数this.displayName = "圆圆";},},

    应用场景

    适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed

    watch

    watch就是监听的意思（侦听属性）

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch，然而，通常更好的做法是使用计算属性而不是命令式的watch回调。

    当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。其允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

    这样来看，watch 完全可以替代 computed ？什么情况下，只能使用computed呢？

    回顾 computed 最大特点就是缓存，所以上述问题可以转换为：哪些情况下，我们需要依赖缓存？

    示例：父组件给子组件传值，值的类型为引用类型

    watch在监听时有两种选项：

    • immediate表示第一次渲染时是否执行函数
    • deep监听对象时是否查看里面属性的变化；如果其属性变化就会去执行一个函数

    methods

    我们也可以使用 methods 来替代 computed，效果上两个都是一样的。

    但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p><p>使用方法后反转字符串: {{ reversedMessage2() }}</p> </div><script> var vm = new Vue({el: '#app',data: {message: 'Runoob!'}, // 计算属性computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}, // 方法methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')}} }) </script> </body> </html>—————————————————————————————————————————————————— 运行结果： 原始字符串: Runoob!计算后反转字符串: !boonuR使用方法后反转字符串: !boonuR

    计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法却会执行。

    注意：

    这也同样意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：

    computed: {now: function () {return Date.now()} }

    应用场景：

    我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的 getter！如果你不希望有缓存，请用方法来替代。

    相同之处：

    computed和methods将被混入到 Vue 实例中。vm.reversedMessage/vm.reversedMessage()即可获取相关计算属性/方法。

    结论：可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

    computed属性与methods的区别

  • 在模板文件中，computed属性只需要写{{reverseMessage}}，而methods需要写成{{reverseMessage()}}，最明显的区别就是methods是方法，需要执行；
  • computed属性只有在依赖的data放生变化时，才会重新执行，否则会使用缓存中的值，而methods是每次进入页面都要执行的，有些需要每次进入页面都执行的方法，需要使用methods，而computed属性比较节约。

    • computed属性与watch的区别

  • 当需要数据在异步变化或者开销较大时，执行更新，使用watch会更好一些；而computed不能进行异步操作；
  • computed可以用缓存中拿数据，而watch是每次都要运行函数计算，不管变量的值是否发生变化，而computed在值没有发生变化时，可以直接读取上次的值
    • 计算属性和侦听器 — Vue.js​cn.vuejs.orgVue.js 计算属性 | 菜鸟教程​www.runoob.comVue系列之computed使用详解(附demo,不定期更新)​juejin.imvue computed正确使用方式​blog.csdn.net面试题： Vue中的 computed 和 watch的区别​juejin.im第 146 题：Vue 中的 computed 和 watch 的区别在哪里 · Issue #304 · Advanced-Frontend/Daily-Interview-Question​github.com人类身份验证 - SegmentFault​segmentfault.com白日梦：Vue 里的 computed 和 watch 的区别​zhuanlan.zhihu.comLittlearmour：Vue中的 computed 和 watch的区别​zhuanlan.zhihu.comVue中computed和watch的区别​www.jianshu.comhttps://www.jianshu.com/p/11caebb66fb8​www.jianshu.comVue中methods computed 和 watch 的区别​m.yisu.comVue中computed 和 watch 的区别和运用的场景？​blog.csdn.netVue.js 监听属性 | 菜鸟教程​www.runoob.comVue中watch的简单应用 - 靳哲 - 博客园​www.cnblogs.com

    总结

    以上是生活随笔为你收集整理的vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。