vue中watch和computed的区别是什么啊,vue watch compute
本文主要介绍vue版中computed和watch的使用，在基于vue框架的前端项目开发过程中，只要涉及到稍微复杂一点的业务，我们都会用到computed计算属性的hook函数，可以用于一些状态组合处理和缓存操作。
目录
前言一、computed uses getter VS setter其他组件状态的基本用法二。watch基本上使用即时和深度实例。
前言
在基于vue框架的前端项目开发过程中，每当涉及到稍微复杂的业务时，我们总会用到computed计算属性的hook函数，可以用于一些状态组合处理和缓存操作。
一、computed基础使用
在computed中，声明了一个函数，需要提供一个返回值，可以显示在页面上，也可以结合其他方法进行处理。
结合state状态使用
通过changeName返回依赖于name的字符串。
li计算机基本使用/li
Li值：{{ name }}/li
李{ { changeName } }/李
data() {
返回{
姓名：张三，
};
},
计算值：{
changeName: function () {
返回一段依赖于名称的文本：$ { this . name } `；
},
},
使用其他组件状态
主动触发computed方法，比较不依赖于其他状态的差异，有些操作是通过点击事件主动触发的。
li{{ isCache }}/li
li{{ cacheTip }}/li
li{{ changeCache }}/li
Utton @ click=处理更改以修改文本/button/li
data() {
返回{
缓存提示：原始缓存提示：缓存提示，
};
},
计算值：{
isCache: function () {
返回一段不依赖于任何属性值的文本`;
},
changeCache: function () {
Return依赖于cacheTip，$ { this . cacheTip } `；
},
},
方法：{
handleChange() {
This.cacheTip=cacheTip状态已修改；
},
},
当我们点击修改状态时，可以看到修改cacheTip时，依赖cacheTip的changeCache也会发生变化。
IsCache不与其他状态相关联，因此它保持其原始值不变。
getter VS setter
上面的cacheTip，或者isCache，在computed的一般方法中，都默认使用getter方法来获取处理后的值。
可以写成：
isCache: {
setter:function () {
返回一段不依赖于任何属性值的文本`;
}
}
Getter和setter可以进一步处理需要处理的状态。
李{{名字} }/李
李{{姓氏} }/李
李{ { setter getter } }/李
button @ click= handlechangefirst 修改文本/button/li
data() {
返回{
名字：“lewyon001”，
姓氏：“Buou 001”，
};
},
计算值：{
setterGetter: {
//getter
get: function (newValue) {
console.log(newValue ，new value)；
返回this . first name“”this . last name；
},
//setter
set: function (newValue) {
console.log(newValue ，new value)；
this . first name=` $ { new value . first name } `；
this . last name=` $ { new value . last name } `；
},
},
}
方法：{
handleChangeFirst() {
This.setter getter={名字： Lewy on ，姓氏： Buou }；
},
},
get属性可以获取原来的依赖值并进行处理，set方法可以获取修改后的依赖值，修改后可以显示在页面上，也可以根据其他业务需要进行处理。computed方法的基础，包括高级操作，以及setter和getter方法如上。
使用建议：
作为经常使用的方法：
Computed可以用作依赖于其他状态的缓存，包括一些不经常更新的内容、开销减少的简单字符串模板、其他状态和其他开发中的场景。我们都可以用，结合手表等。
二、watch基本使用
顾名思义，watch是2.x版本中的一个钩子函数，监视和观察组件的状态变化。常见的应用场景包括监控路由变化，以及从父组件传输到子组件的props数据的变化。
使用watch时，需要在数据中活出一个状态，添加到watch中进行观察。当它发生变化时，watch可以通过默认参数获得最新的值变化。
Li值：{{ name }}/li
李{ { name tip } }/李
Li异步操作得到的年龄：{{age}}/li
Utton @ click= getuser 修改名称/button/li
设p1=新承诺((解决，拒绝)={
resolve({ age: 14 })；
});
data() {
返回{
姓名：张三，
提示：“名称未更改”，
};
},
观察：{
名称(新值，旧值){
//watch可以监听状态的一些变化，做一些处理，修改状态，或者执行异步操作。
This.nameTip=姓名状态已更改；
this . get data()；
},
},
方法：{
getData() {
setTimeout(()={
this . getage()；
}, 1000);
},
getUser() {
this.name= lisi
},
getAge() {
p1.then((res)={
console . log(RES)；
this . age=RES . age；
});
},
},
当您单击修改时，名称的值将被修改为lisi。手表监测到姓名的修改后，您可以修改姓名提示的文本，并开始修改其他状态。
我们也可以通过newVal得到name的最新值，或者比较运算oldVal的值。
使用promise和timer来模拟请求后台数据和状态变化时的渲染，这是我们在开发过程中使用watch的一个典型例子。
immediate和deep
Immediate:当手表第一次加载或者第一次绑定时，需要监控并获取数据中的状态，那么可以使用immediate，设置为true，属性值为boolean。
当deep:watch监视的值是一个对象时，可以使用该属性来监视对象的深层属性变化。
注意事项：
deep的默认值为false。使用的时候需要加上deep: true。deep的值与immediate的值相同，都是布尔值。
实例
li{{ immediateNameTip }}/li
data() {
返回{
即时名称：“即时名称原始值”，
即时姓名：“即时姓名更改时提示文本”，
};
},
即时姓名：{
处理程序(newVal，oldVal) {
Console.log(immediate表示在初始监控值值得时也执行这段代码)；
setTimeout(()={
this . immediate name IP=
ImmediateName添加immediate，将执行第一次绑定；
}, 2000);
},
即时：真的，
Deep: true，//仅用于对象的深层属性更改
},
当immediate设置为true时，第一个传入的immediateNameTip将在计时器执行后更改。
这里没有更多的深的例子。可以在实战中自己使用和学习。
使用建议；
Watch可用于监控路由更改，并以异步方式获取数据。同时在一些昂贵的状态下监控也有很多应用场景，包括购物车功能的实现。
关于vue2.x的这篇文章到此为止，它解释了computed和基于computed的watch的用法。更多相关vuecomputed和watch内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。