1. computed
使用场景:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。
计算属性computed是基于data中的数据进行处理的,data数据变化,他也跟着变化
当data中的数据没有发生改变时,我们调用computed中的函数n次,只会进行缓存(执行一次)
根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。
<div id="app">
<p>{
{
fullName}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'si',
lastName: 'li'
},
computed: {
fullName() {
return this.firstName + this.lastName //必须有return,否则无法拿到结果
}
}
})
</script>
fullName 不需要在 data 中声明
2. watch
应用场景:处理异步(ajax,定时任务)或开销较大(耗时)的操作
watch:监听的是已经在 data 中定义的变量,当该变量变化时,会触发 watch 中的方法;数据变化时执行异步或开销较大的操作,可以随时修改状态的变化。
watch:l类似于监听机制+事件机制
在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。
通俗来讲,既能用computed 实现又可以用 watch 监听来实现的功能,推荐用 computed,重点在于 computed 的缓存功能
// 这里直接用 v-model 来绑定,不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" /> {
{
tip}}
data() {
return {
nameValue: "",
tip: ""
};
},
methods: {
checkName(value) {
var that = this;
setTimeout(() => {
if (value == "admin") {
that.tip = "用户名已存在";
} else {
that.tip = "用户名可以使用";
}
}, 2000);
}
},
watch: {
// 数据变化时执行异步或开销较大的操作
nameValue(value) {
this.checkName(value);
this.tip = "正在验证......";
}
}
2.1 watch的高级用法
注意,上面的watch方法是当改变值的时候,才会触发监听事件,但是我们想刚进入页面的时候,就触发监听事件,就要用hander() 方法
1,handler():当页面刚进入时,自动绑定watch事件,不需要进行触发
watch: {
// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
2,immediate属性:布尔值
immediate:true:
首次加载就监听数据变化
immediate:false:
只有发生改变才监听
watch: {
// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
3,deep:true;是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。
watch: {
// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
deep:true
}
}
参考地址:
https://www.jianshu.com/p/a69a9bac9dc3
https://www.cnblogs.com/lk-food/p/12365949.html