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

后面两篇介绍了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的应用入门详解-关联和区别

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