乐趣区

关于前端:vue2x版本中computed和watch的使用入门详解关联和区别

jiezi

后面两篇介绍了 computed 和 watch 的根本应用

  • watch 篇
  • computed 篇

两者的区别，持续通过代码实现的形式具体去理解

html

<li> 最开始的 value 值：{{name}}</li>
<li>computed 计算后的值：{{computedName}}</li>
<li>
    watch 批改后的值：{{watchName}}
    <input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber"> 批改名字 </button></li>

JS

data() {
    return {
        name: "zhangsan",
        watchName: "张三",
    };
},
watch: {watchName(newVal, oldVal) {console.log("旧的值 ---->", newVal);
        console.log("新的值 ---->", oldVal);
        console.log("watch 下所有的状态都会监听 this.name---->", this.name);
        console.log(
            "watch 下所有的状态都会监听 this.computedName---->",
            this.computedName
        );
        this.watchName = newVal;
    },
},
computed: {computedName: function (currentThis) {
        console.log(
            "和计算属性无关的状态产生更改时, 不会执行，只有依赖的状态产生更改，缓存才会更新",
            currentThis
        );
        return ` 依赖于 name，：${this.name}`;
    },
},
methods: {handleNumber() {this.name = "lisi";},
},

区别

依赖值： computed 依赖于所应用的状态，相似在 data 中申明的 name,
而 watch 中监听的值不依赖于某个值，只有组件状态产生更改，监听的值就实时获取最新值,
computed 的实现应用的是 getter 和 setter 获取值，属于同步操作。

应用办法：

  • computed 最初须要进行 return 解决返回值，并且能够应用更深层次的 getter 和 setter，具体参考 computed 篇
  • watch 除了 callback 回调函数外，还有两个属性值为布尔值的属性，用于首次绑定 immediate，以及对对象的深度监听 deep
  • 两者相同点就是能够通过办法参数获取新值，联合其余状态解决相干的业务

** 补充

在官网文档中，除了在组件中应用的 watch 外，官网文档中，还有对于示例中 watch 的介绍

具体用法能够在官网中：

https://cn.vuejs.org/v2/api/#…

$watch 根底应用 – 来自官网文档例子

官网文档提醒：

留神：在变更 (不是替换) 对象或数组时，旧值将与新值雷同，因为它们的援用指向同一个对象 / 数组。Vue 不会保留变更之前值的正本。

vm.$watch('a.b.c', function (newVal, oldVal) {// 做点什么})

// 函数
vm.$watch(function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的后果时
    // 处理函数都会被调用。// 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {// 做点什么}
)

须要留神的是，如果应用 vm.$watch，那么应用 unwatch 有助于咱们勾销对某个状态的监听，缩小不必要的监听和交互开销 

var unwatch = vm.$watch('a', cb)
// 之后勾销察看
unwatch()

结尾

  • watch 篇
  • computed 篇

花了三个篇幅去介绍 watch 和 computed 的应用办法，以及这两个钩子函数的区别，在理论的企业我的项目开发中，应用的场景和次数较多，所以尽量写的略微具体一些，同时也将笔记的代码放在了开源仓库，心愿对大家在开发 vue2.x 的我的项目中有所帮忙

  • 码云 https://gitee.com/lewyon/vue-note
  • githup https://github.com/akari16/vue-note

文章集体博客地址：vue2.x 版本中 computed 和 watch 的应用入门详解 - 关联和区别

创作不易，转载请注明出处和作者。

退出移动版