Use Computed properties (calculated attributes) and Watchers (listeners)
Many times, we want to show the value of a variable on a page, you need to go through some calculations, for example:
<div id="example">
{% raw %}{{{% endraw %} some_string.split(',').reverse().join('-') }}
</div>
The more complex, the more error-prone to the latter.
This time, we need a mechanism to facilitate the creation of such data obtained by calculation.
So, Computed Properties is our solution.
typical example
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p> 原始字符串： {{my_text}} </p>
<p> 通过运算后得到的字符串： {{my_computed_text}} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
my_text: 'good good study, day day up'
},
computed: {
my_computed_text: function(){
// 先去掉逗号，然后按照空格分割成数组，然后翻转，并用'-'来连接
return this.my_text.replace(',', '').split(' ').reverse().join('-')
}
}
})
</script>
</body>
</html>
It can be seen above the key code, in the constructor of Vue, passing a computedparagraph.
After using the browser to run, the results can be seen as shown below:
We also open the console to view.
Entry
> app.my_text
You will be: "good good study, day day up"
Entry
> app.my_computed_text
After the conversion will be: "up-day-day-study-good-good"
Computed Properties difference with ordinary methods.
According to the above example, we can use ordinary methods to achieve:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p> 原始字符串： {{my_text}} </p>
<p> 通过运算后得到的字符串： {% raw %}{{{% endraw %}my_computed_text() }} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
my_text: 'good good study, day day up'
},
methods: {
my_computed_text: function(){
return this.my_text.replace(',', '').split(' ').reverse().join('-') + '，我来自于 function, 不是computed '
}
}
})
</script>
</body>
</html>
The above code, after running as shown below:
You may find that they achieve the same effect.
Their difference is: the use of computed properties the way, will result "cache" up. Each time corresponding computed properties calls, as long as the corresponding dependent data is not changed, then it will not change.
The use of "function" version implemented, the cache is not an issue. Regenerated each time the corresponding numerical calculation.
So, we need to follow the actual situation, to choose whether to use "computed properties", or use the form of ordinary function.
watched property
Vuejs the property (attribute), is the change (computed) may occur either calculated or changes according to changes in other variables monitor (Watch)
We look at an example of how the change itself according to other variables monitor (watch), as follows;
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />（这是个watched property)
</p>
<p>
我所在的街道： <input v-model='district' />（这是个watched property)
</p>
<p> 我所在的详细一些的地址： {{full_address}} （每次其他两个发生变化，这里就会跟着变化) </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
full_address: "某市某区"
},
watch: {
city: function(city_name){
this.full_address = city_name + '-' + this.district
},
district: function(district_name){
this.full_address = this.city + '-' + district_name
}
}
})
</script>
</body>
</html>
In the above code, we can see that watch: { city: ..., district: ...}, said, city and district have been listening, and these two are watched properties.
Long city and districtchanges full_address will follow changes.
We open the browser above code, as shown below, because at this time city , and district have not changed, the full_addressvalue is "a district of a city":
When I was in the "street" input box, followed by "Wangjing street," the words, you can see, the following "full address", it changed. As shown below:
It will be more compact than using computed watch
Examples of the above, we can computed be rewritten as shown below:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />
</p>
<p>
我所在的街道： <input v-model='district' />
</p>
<p> 我所在的详细一些的地址： {{full_address}} （这是使用computed 实现的版本) </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
},
computed: {
full_address: function(){
return this.city + this.district;
}
}
})
</script>
</body>
</html>
You can see, one less method, datadefined in the property is also less of a, simple lot. Code is simple, it is easy to maintain it (the smaller the amount of code, program the better understanding)
As setter computed property of (mutator)
In principle, computed property based on other values, it has been calculated come. Should not be modified.
But in development, there are indeed some cases, the need for "computed property" to make changes, while the effects of certain corresponding attributes. (With the above process is reversed).
We look at the following code:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />
</p>
<p>
我所在的街道： <input v-model='district' />
</p>
<p> 我所在的详细一些的地址： <input v-model='full_address' /> </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
},
computed: {
full_address: {
get: function(){
return this.city + "-" + this.district;
},
set: function(new_value){
this.city = new_value.split('-')[0]
this.district = new_value.split('-')[1]
}
}
}
})
</script>
</body>
</html>
It can be seen in the above code, there is such a:
computed: {
full_address: {
get: function(){
return this.city + "-" + this.district;
},
set: function(new_value){
this.city = new_value.split('-')[0]
this.district = new_value.split('-')[1]
}
}
}
As can be seen, the above get code segment, the code is the original content. The setend, then defined, if computed property (that is, full_address) when the changes, cityand district the value should be how to change.
After the browser open, we in the "input box below the most" in the back to enter some words, you can see that the corresponding "street" has changed: