Table of contents
The difference between computed and methods
Two, watch monitoring properties
The difference between watch and computed
1. computed property
We hope that a variable can be used when a variable is calculated and then output instead of directly output. Computed properties are cached based on their responsive dependencies. They are only re-evaluated when the relevant reactive dependencies change. Each call to the function will cause the function to be re-executed.
A computed property is a brand new property that is calculated or returned after processing the existing properties of the Vue instance , so a computed property is a property that we can use directly in the interpolation syntax.
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<!-- 直接使用插值语法读取计算属性 -->
{
{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
// 计算属性不能写在这里
// total:0
},
computed:{
// 重新返回属性 主要是处理data中需要计算/处理的属性
// 1.计算属性完整写法
// total:{
// // get作用：当有人读取total时，get就会被调用，且返回值就作为total的值
// // get什么时候调用？1.初次读取total时 2.所依赖的数据发生改变时(即a或b发生改变时)
// get(){
// console.log('get被调用');
// return this.a + this.b
// },
// // set什么时候调用？当total被修改时
// set(value){
// console.log('set',value);
// }
// }
//--------------------------------------------------
// 2.计算属性简写形式(只考虑读取get，不考虑修改set时才能简写)
total(){
console.log('这是computed');
return this.a + this.b
}
},
})
</script>
</body>
The difference between computed and methods
Computed properties have a dependency cache, and if the value does not change, the calculated property will not be called again; methods have no cache, and will be re-executed/rendered every time they are called.
<body>
<div id="app">
{
{total}}
{
{total}}
{
{total}}
{
{str()}}
{
{str()}}
{
{str()}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0
},
computed:{
total(){
console.log('这是computed');
return this.a + this.b
}
},
methods:{
str(){
console.log('这是methods');
}
}
})
</script>
</body>
Two, watch monitoring properties
The listener property is also called listener/listener
Using listeners is most useful when you need to perform asynchronous or expensive operations when data changes.
While computed properties are more appropriate in most cases, sometimes a custom listener is required. That's why Vue provides a more general way to respond to data changes through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations on data changes.
The monitoring attribute is used to monitor the existing attribute. When the monitoring attribute changes, the callback function is automatically called to perform related operations.
There are two ways to write monitoring attributes:
(1) Write in the watch configuration item of the Vue instance
(2) Monitoring via vm.$watch()
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
{
{total}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0
},
watch: {
// 我们需要监听a和b属性 (也可以监听计算属性)
//1.完整写法
// a: {
// // handler是固定配置
// // handler什么时候调用？当a发生改变时调用
// // handler有两个参数，一个是修改后的值，一个是修改前的值
// handler(newValue, oldValue) {
// console.log('a被修改了', newValue, oldValue);
// this.total = this.a + this.b
// },
// // 其他配置项
// immediate: true //初始化时让handler调用一下
// }
//-------------------------------------------
// 2.简写
a(newVal, oldVal) {
console.log(newVal,oldVal,'这是监听器');
this.total = this.a + this.b
},
b() {
this.total = this.a + this.b
}
},
})
// 3.也可以使用vm.$watch(需要监听的属性,{配置项})实现监听
// vm.$watch('a',{
// handler(newValue,oldValue){
// console.log('a被修改了',newValue,oldValue);
// }
// })
</script>
</body>
deep monitoring
The watch in Vue does not monitor the change of the internal value of the object by default. We can realize deep monitoring by configuring deep:true.
<body>
<div id="app">
<input type="number" v-model="a">
<input type="number" v-model="b">
<input type="text" v-model="obj.name">
</div>
<script>
new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0,
obj: {
name: "zhangsan",
age: 12
}
},
watch: {
// 监听基本数据类型
a() {
console.log('a被改变了');
},
b: {
handler() {
console.log('b被改变了');
}
},
// 监听引用数据类型
obj: {
// 浅监听
handler(newValue, oldValue) {
console.log(newValue.name, oldValue.name);
},
// 递归监听 深度监听
deep: true
}
},
})
</script>
</body>The difference between watch and computed
computed
1. With cacheability, the page re-rendering value does not change, and the calculated property will immediately return the previous calculation result without having to execute the function again
2. Computed property calculates the change of a certain property. If a certain value changes, the calculated property will monitor and return
watch
1. Monitor value changes and execute asynchronous operations (axios request)
2. No caching, only execute/response when the current value changes