Vue中watch、computed、updated三者的区别以及使⽤⽅法
1、watch
理解： ，监听某个数据的变化从⽽来执⾏⼀些操作，当data⾥⾯的数据发⽣变化的时候来执⾏⼀下开销较⼤或异步的操作
1、监听值类型(简单类型)数据
//在⼀个vue实例中
new Vue({
el:"#myApp",
data:{
num1:1,
num2:2
},
methods:{},
watch:{
//这⾥两个属性，第⼀个值是变化后最新的值，第⼆个是变化前
num1(after,before){
this.num2 = after +1
}
immediate:true//页⾯⾸次加载的时候做⼀次监听。
//这⾥的意思就是，监听num1的变化，当num1的数据发⽣变化的时候，来操作num2的值
}
})
2、监听引⽤(复杂)类型的数据
new Vue({
el:"#myApp",
data:{
obj:{
userName:"caicai"
}
},
watch:{
obj:{
handler(newValue,oldValue){
// handler函数是当你的obj发⽣变化的时候你要做什么
console.log(newValue.userName,oldValue.userName);
},
deep:true//是否深度侦听，true开启，false关闭，默认false
//加了deep之后相当于在对象obj每⼀层的属性都加上了handler侦听器。否则的话侦听到的只是引⽤地址，不会执⾏handler函数
}
}
});
2、computed
理解： 计算属性，顾名思义就是通过某个属性（数据）来计算得到某个属性，这个重点在于计算，我们希望的是拿到data数据后处理⼀下，得到计算的结果。
在原vue中的template模板，作者初衷只是进⾏⼀些简单的运算，那么⽐较复杂的计算就可⽤computed
来进⾏操作
<div id="myApp">
<input type="text" v-model="str">
1、第⼀种操作，写在模板⾥，导致模板过重，难于维护
<p>{{str.split("").reverse().join("")}}</p>
2、第⼆种，使⽤⼀个⽅法来调⽤，若多处使⽤，就执⾏多次，降低运⾏速度，性能减少
<p>{{fn(str)}}</p>
3、第三种，使⽤过滤器，具有缓存，只要str不发⽣变化，就不会再次进⾏运算
<p>{{reverseStr}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#myApp",
data:{
str:"abcd"
},
methods:{
fn(v){
//若多出调⽤，就执⾏多次
return v.split("").reverse().join("")//炸开--反转--组合
}
},
computed:{
reverseStr(){
//str不发⽣变化的话，我只执⾏⼀次，具有缓存
return this.str.split("").reverse().join("")
}
}
})
</script>
value函数什么意思到这⾥我先略微总结⼀下这两者的区别，以及使⽤场景
computed：
1、监控⾃⼰定义的变量，不⽤再data⾥⾯声明，函数名就是变量名
2、适合多个变量或对象进⾏处理后返回⼀个值(结果)。若这多个变量发⽣只要有⼀个发⽣变化，结果都会变化。
3、计算的结果具有缓存，依赖响应式属性变化，响应式属性没有变化，直接从缓存中读取结果。
4、在内部函数调⽤的时候不⽤加()。
5、必须⽤return返回
6、不要在computed 中对data中的数据进⾏赋值操作，这会形成⼀个死循环。
watch：
1、watch 函数是不需要调⽤的。
2、重点在于监控，监控数据发⽣变化的时候，执⾏回调函数操作。
3、当我们需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤ watch
4、函数名就是你要监听的数据名字
使⽤场景：
computed：
1、⼀个需要的结果受多个数据影响的时候，⽐如购物车结算⾦额(受到很多处的价格结算)。
2、操作某个属性，执⾏⼀些复杂的逻辑，并在多处使⽤这个结果。
3、内部函数中多处要使⽤到这个结果的。
watch ：
1、监控⼀些input框值的特殊处理，适合⼀个数据影响多个数据。
2、数据变化时，执⾏⼀些异步操作，或开销⽐较⼤的操作
3、updated
理解： 是vue⽣命周期⾥⾯的⼀个钩⼦函数—data数据更新后触发视图更新。这⾥是视图更新之后的操作可以在这⾥执⾏。
触发条件：
1、当data中定义的数据有变化时就会加载updated⽅法。
2、任何数据的更新，如果要做统⼀的业务逻辑处理
3、在⼤多数情况下，此期间避免更改状态，因为这可能会导致更新⽆限循环。该钩⼦在服务器端渲染期间不被调⽤。
特点：
1.执⾏到它的时候时候是数据发⽣变化且界⾯更新完毕
2.不能监听到路由数据(例如⽹址中的参数)
3.所有的数据发⽣变化都会调⽤(消耗性能)
4.只要数据发⽣变化，每次触发的代码都是同⼀个

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。