Vue2.x中computed与watch入门区别详解，如何关联使用？
- 内容介绍
- 相关推荐
本文共计885个文字，预计阅读时间需要4分钟。
前两篇介绍了computed和watch的基本使用+watch篇+computed篇+两者的区别，通过代码实现的具体方式去了解++li最开始的value值：{{name}}/licomputed计算后的值：{{computedName}}/liwatch修改后的值：{{name}}
前面两篇介绍了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的介绍
具体用法可以在官网中：
cn.vuejs.org/v2/api/#vm-watch
$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的项目中有所帮助
- 码云 gitee.com/lewyon/vue-note
- githup github.com/akari16/vue-note
文章个人博客地址：vue2.x版本中computed和watch的使用入门详解-关联和区别
欢迎关注公众号：程序猿布欧，不定期更新一些前端入门文章
创作不易，转载请注明出处和作者。
本文共计885个文字，预计阅读时间需要4分钟。
前两篇介绍了computed和watch的基本使用+watch篇+computed篇+两者的区别，通过代码实现的具体方式去了解++li最开始的value值：{{name}}/licomputed计算后的值：{{computedName}}/liwatch修改后的值：{{name}}
前面两篇介绍了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的介绍
具体用法可以在官网中：
cn.vuejs.org/v2/api/#vm-watch
$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的项目中有所帮助
- 码云 gitee.com/lewyon/vue-note
- githup github.com/akari16/vue-note
文章个人博客地址：vue2.x版本中computed和watch的使用入门详解-关联和区别
欢迎关注公众号：程序猿布欧，不定期更新一些前端入门文章
创作不易，转载请注明出处和作者。