1. computed
Usage scenario: When some data in the page depends on other data to change, you can use calculated attributes. A new data is generated based on an existing data, and the relationship between the two data is permanently established, and a cache is also established. When the irrelevant data is changed, the value in the cache is not recalculated but directly used.
计算属性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 does not need to be declared in data
2. watch
Application scenario: processing asynchronous (ajax, timing tasks) or expensive (time-consuming) operations
watch: monitor the variables that have been defined in data, when the variable changes, it will trigger the method in watch; when the data changes Perform asynchronous or expensive operations, and you can modify state changes at any time.
watch:l类似于监听机制+事件机制
In most cases, we will use computed, but if you want to perform asynchronous operations while data changes or if it is a relatively large overhead, then watch is the best choice. watch is an object, the key is the expression to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options.
In layman's terms, functions that can be implemented by both computed and watch monitoring are recommended. The focus is on the cache function of 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 Advanced usage of watch
注意，上面的watch方法是当改变值的时候，才会触发监听事件，但是我们想刚进入页面的时候，就触发监听事件，就要用hander() 方法
1. Handler(): When the page is just entered, the watch event is automatically bound without triggering
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
2. Immediate attribute: the Boolean value is
immediate：true：first loaded to monitor data changes and
immediate：false：only monitors when changes occur
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
3, deep: true; it is to open the in-depth monitoring, that is, all attributes are added with a listener, and if one of them changes, the handler function is executed.
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
deep:true
}
}
Reference address:
https://www.jianshu.com/p/a69a9bac9dc3
https://www.cnblogs.com/lk-food/p/12365949.html